chore: Nicer own reaction color design

lib/pages/chat/events/message_reactions.dart

@@ -4,7 +4,6 @@ import 'package:collection/collection.dart' show IterableExtension;
 import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/future_loading_dialog.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -110,11 +109,7 @@ class _Reaction extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final textColor =
-        theme.brightness == Brightness.dark ? Colors.white : Colors.black;
-    final color = reacted == true
-        ? theme.bubbleColor
-        : theme.colorScheme.surfaceContainerHigh;
+
     Widget content;
     if (reactionKey.startsWith('mxc://')) {
       content = Row(
@@ -131,8 +126,9 @@ class _Reaction extends StatelessWidget {
             const SizedBox(width: 4),
             Text(
               count.toString(),
+              textAlign: TextAlign.center,
               style: TextStyle(
-                color: textColor,
+                color: theme.colorScheme.onSurface,
                 fontSize: DefaultTextStyle.of(context).style.fontSize,
               ),
             ),
@@ -147,7 +143,7 @@ class _Reaction extends StatelessWidget {
       content = Text(
         renderKey.toString() + (count > 1 ? ' $count' : ''),
         style: TextStyle(
-          color: reacted == true ? theme.onBubbleColor : textColor,
+          color: theme.colorScheme.onSurface,
           fontSize: DefaultTextStyle.of(context).style.fontSize,
         ),
       );
@@ -158,7 +154,15 @@ class _Reaction extends StatelessWidget {
       borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
       child: Container(
         decoration: BoxDecoration(
-          color: color,
+          color: reacted == true
+              ? theme.colorScheme.primaryContainer
+              : theme.colorScheme.surfaceContainerHigh,
+          border: Border.all(
+            color: reacted == true
+                ? theme.colorScheme.primary
+                : theme.colorScheme.surfaceContainerHigh,
+            width: 1,
+          ),
           borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
         ),
         padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),