fix(ui): Fix message theme not applied correctly.

Signed-off-by: xsahil03x <[email protected]>

packages/stream_chat_flutter/lib/src/message_widget/deleted_message.dart

@@ -32,7 +32,6 @@ class StreamDeletedMessage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final chatThemeData = StreamChatTheme.of(context);
     return Material(
       color: messageTheme.messageBackgroundColor,
       shape: shape ??
@@ -40,9 +39,7 @@ class StreamDeletedMessage extends StatelessWidget {
             borderRadius: borderRadiusGeometry ?? BorderRadius.zero,
             side: borderSide ??
                 BorderSide(
-                  color: Theme.of(context).brightness == Brightness.dark
-                      ? chatThemeData.colorTheme.barsBg.withAlpha(24)
-                      : chatThemeData.colorTheme.textHighEmphasis.withAlpha(24),
+                  color: messageTheme.messageBorderColor ?? Colors.transparent,
                 ),
           ),
       child: Padding(

packages/stream_chat_flutter/lib/src/message_widget/message_card.dart

@@ -139,7 +139,8 @@ class _MessageCardState extends State<MessageCard> {
           RoundedRectangleBorder(
             side: widget.borderSide ??
                 BorderSide(
-                  color: widget.messageTheme.messageBorderColor ?? Colors.grey,
+                  color: widget.messageTheme.messageBorderColor ??
+                      Colors.transparent,
                 ),
             borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero,
           ),

packages/stream_chat_flutter/lib/src/message_widget/reactions/desktop_reactions_builder.dart

@@ -163,23 +163,28 @@ class _DesktopReactionsBuilderState extends State<DesktopReactionsBuilder> {
         onExit: (event) {
           setState(() => _showReactionsPopup = !_showReactionsPopup);
         },
-        child: Wrap(
-          children: [
-            ...reactionsList.map((reaction) {
-              final reactionIcon = reactionIcons.firstWhereOrNull(
-                (r) => r.type == reaction.type,
-              );
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 2),
+          child: Wrap(
+            spacing: 4,
+            runSpacing: 4,
+            children: [
+              ...reactionsList.map((reaction) {
+                final reactionIcon = reactionIcons.firstWhereOrNull(
+                  (r) => r.type == reaction.type,
+                );
 
-              return _BottomReaction(
-                reaction: reaction,
-                message: widget.message,
-                borderSide: widget.borderSide,
-                messageTheme: widget.messageTheme,
-                reactionIcon: reactionIcon,
-                streamChatTheme: streamChatTheme,
-              );
-            }).toList(),
-          ],
+                return _BottomReaction(
+                  reaction: reaction,
+                  message: widget.message,
+                  borderSide: widget.borderSide,
+                  messageTheme: widget.messageTheme,
+                  reactionIcon: reactionIcon,
+                  streamChatTheme: streamChatTheme,
+                );
+              }).toList(),
+            ],
+          ),
         ),
       ),
     );
@@ -206,6 +211,9 @@ class _BottomReaction extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final userId = StreamChat.of(context).currentUser?.id;
+
+    final backgroundColor = messageTheme?.reactionsBackgroundColor;
+
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       onTap: () {
@@ -225,33 +233,35 @@ class _BottomReaction extends StatelessWidget {
         }
       },
       child: Card(
-        shape: StadiumBorder(
+        margin: EdgeInsets.zero,
+        // Setting elevation as null when background color is transparent.
+        // This is done to avoid shadow when background color is transparent.
+        elevation: backgroundColor == Colors.transparent ? 0 : null,
+        shape: RoundedRectangleBorder(
           side: borderSide ??
               BorderSide(
-                color: messageTheme?.messageBorderColor ?? Colors.grey,
+                color: messageTheme?.reactionsBorderColor ?? Colors.transparent,
               ),
+          borderRadius: BorderRadius.circular(10),
         ),
-        color: messageTheme?.messageBackgroundColor,
+        color: backgroundColor,
         child: Padding(
-          padding: const EdgeInsets.symmetric(
-            horizontal: 6,
-            vertical: 2,
-          ),
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
               ConstrainedBox(
                 constraints: BoxConstraints.tight(
-                  const Size.square(16),
+                  const Size.square(14),
                 ),
                 child: reactionIcon?.builder(
                       context,
                       reaction.user?.id == userId,
-                      16,
+                      14,
                     ) ??
                     Icon(
                       Icons.help_outline_rounded,
-                      size: 16,
+                      size: 14,
                       color: reaction.user?.id == userId
                           ? streamChatTheme.colorTheme.accentPrimary
                           : streamChatTheme.colorTheme.textHighEmphasis

packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart

@@ -174,6 +174,7 @@ class StreamMessageReactionsModal extends StatelessWidget {
   ) {
     final isCurrentUser = reaction.user?.id == currentUser.id;
     final chatThemeData = StreamChatTheme.of(context);
+    final reverse = !isCurrentUser;
     return ConstrainedBox(
       constraints: BoxConstraints.loose(
         const Size(64, 100),
@@ -199,13 +200,14 @@ class StreamMessageReactionsModal extends StatelessWidget {
               ),
               Positioned(
                 bottom: 6,
-                left: isCurrentUser ? -3 : null,
-                right: isCurrentUser ? -3 : null,
+                left: !reverse ? -3 : null,
+                right: reverse ? -3 : null,
                 child: Align(
                   alignment:
                       reverse ? Alignment.centerRight : Alignment.centerLeft,
                   child: StreamReactionBubble(
                     reactions: [reaction],
+                    reverse: !reverse,
                     flipTail: !reverse,
                     borderColor:
                         messageTheme.reactionsBorderColor ?? Colors.transparent,
@@ -213,7 +215,6 @@ class StreamMessageReactionsModal extends StatelessWidget {
                         Colors.transparent,
                     maskColor: chatThemeData.colorTheme.barsBg,
                     tailCirclesSpacing: 1,
-                    highlightOwnReactions: false,
                   ),
                 ),
               ),