[MessageReactionsModal] Fix user online indicator size, reaction bubble alignment

Signed-off-by: Sahil Kumar <[email protected]>

lib/src/message_reactions_modal.dart

@@ -217,6 +217,7 @@ class MessageReactionsModal extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           Stack(
+            overflow: Overflow.visible,
             children: [
               UserAvatar(
                 onTap: onUserAvatarTap,
@@ -225,6 +226,10 @@ class MessageReactionsModal extends StatelessWidget {
                   height: 64,
                   width: 64,
                 ),
+                onlineIndicatorConstraints: BoxConstraints.tightFor(
+                  height: 12,
+                  width: 12,
+                ),
                 borderRadius: BorderRadius.circular(32),
               ),
               Positioned(
@@ -236,13 +241,14 @@ class MessageReactionsModal extends StatelessWidget {
                     flipTail: !reverse,
                     borderColor: messageTheme.reactionsBorderColor,
                     backgroundColor: messageTheme.reactionsBackgroundColor,
-                    maskColor: messageTheme.reactionsMaskColor,
+                    maskColor: StreamChatTheme.of(context).colorTheme.white,
+                    tailCirclesSpacing: 1,
                     highlightOwnReactions: false,
                   ),
                 ),
                 bottom: 6,
-                left: isCurrentUser ? 0 : null,
-                right: isCurrentUser ? 0 : null,
+                left: isCurrentUser ? -3 : null,
+                right: isCurrentUser ? -3 : null,
               ),
             ],
           ),

lib/src/reaction_bubble.dart

@@ -16,7 +16,7 @@ class ReactionBubble extends StatelessWidget {
     this.reverse = false,
     this.flipTail = false,
     this.highlightOwnReactions = true,
-    this.tailCirclesSpace = 0,
+    this.tailCirclesSpacing = 0,
   }) : super(key: key);
 
   final List<Reaction> reactions;
@@ -26,7 +26,7 @@ class ReactionBubble extends StatelessWidget {
   final bool reverse;
   final bool flipTail;
   final bool highlightOwnReactions;
-  final double tailCirclesSpace;
+  final double tailCirclesSpacing;
 
   @override
   Widget build(BuildContext context) {
@@ -45,7 +45,7 @@ class ReactionBubble extends StatelessWidget {
               padding: const EdgeInsets.all(2),
               decoration: BoxDecoration(
                 color: maskColor,
-                borderRadius: BorderRadius.all(Radius.circular(14)),
+                borderRadius: BorderRadius.all(Radius.circular(16)),
               ),
               child: Container(
                 padding: EdgeInsets.symmetric(
@@ -148,7 +148,7 @@ class ReactionBubble extends StatelessWidget {
         backgroundColor,
         borderColor,
         maskColor,
-        tailCirclesSpace: tailCirclesSpace,
+        tailCirclesSpace: tailCirclesSpacing,
       ),
     );
     return Transform(