[MessageActionsModal] Fix various alignment, size and color issues

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

lib/src/message_actions_modal.dart

@@ -1,3 +1,4 @@
+import 'dart:math';
 import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
@@ -92,8 +93,9 @@ class MessageActionsModal extends StatelessWidget {
               child: Padding(
                 padding: const EdgeInsets.symmetric(vertical: 8.0),
                 child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: reverse
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                      ? CrossAxisAlignment.end
+                      : CrossAxisAlignment.start,
                   children: <Widget>[
                     if (showReactions &&
                         (message.status == MessageSendingStatus.SENT ||
@@ -143,7 +145,6 @@ class MessageActionsModal extends StatelessWidget {
                             ),
                           );
                         }),
-                    SizedBox(height: 8),
                     TweenAnimationBuilder<double>(
                         tween: Tween(begin: 0.0, end: 1.0),
                         duration: Duration(milliseconds: 300),
@@ -153,11 +154,16 @@ class MessageActionsModal extends StatelessWidget {
                             transform: Matrix4.identity()
                               ..scale(val)
                               ..rotateZ(-1.0 + val),
-                            alignment: Alignment.topRight,
+                            alignment: reverse
+                                ? Alignment.topRight
+                                : Alignment.topLeft,
                             child: Padding(
-                              padding: const EdgeInsets.symmetric(
+                              padding: EdgeInsets.only(
-                                horizontal: 48.0,
+                                right: reverse ? 16 : 0,
+                                left: reverse ? 0 : 48,
                               ),
+                              child: SizedBox(
+                                width: MediaQuery.of(context).size.width * 0.75,
                                 child: Material(
                                   color: StreamChatTheme.of(context)
                                       .colorTheme
@@ -170,6 +176,9 @@ class MessageActionsModal extends StatelessWidget {
                                     crossAxisAlignment:
                                         CrossAxisAlignment.stretch,
                                     children: ListTile.divideTiles(
+                                      color: StreamChatTheme.of(context)
+                                          .colorTheme
+                                          .greyWhisper,
                                       context: context,
                                       tiles: [
                                         if (showReply &&
@@ -188,15 +197,16 @@ class MessageActionsModal extends StatelessWidget {
                                           _buildResendMessage(context),
                                         if (showEditMessage)
                                           _buildEditMessage(context),
-                                      if (showDeleteMessage)
-                                        _buildDeleteButton(context),
                                         if (showCopyMessage)
                                           _buildCopyButton(context),
+                                        if (showDeleteMessage)
+                                          _buildDeleteButton(context),
                                       ],
                                     ).toList(),
                                   ),
                                 ),
                               ),
+                            ),
                           );
                         })
                   ],
@@ -211,13 +221,19 @@ class MessageActionsModal extends StatelessWidget {
 
   Widget _buildReplyButton(BuildContext context) {
     return ListTile(
-      title: Text(
+      dense: true,
-        'Reply',
+      title: Row(
-        style: Theme.of(context).textTheme.headline6,
+        children: [
-      ),
+          StreamSvgIcon.reply(
-      leading: StreamSvgIcon.reply(
             color: StreamChatTheme.of(context).primaryIconTheme.color,
           ),
+          const SizedBox(width: 16),
+          Text(
+            'Reply',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
       onTap: () {
         Navigator.pop(context);
         if (onReplyTap != null) {
@@ -230,14 +246,22 @@ class MessageActionsModal extends StatelessWidget {
   Widget _buildDeleteButton(BuildContext context) {
     final isDeleteFailed = message.status == MessageSendingStatus.FAILED_DELETE;
     return ListTile(
-      title: Text(
+      dense: true,
-        isDeleteFailed ? 'Retry deleting message' : 'Delete message',
+      title: Row(
-        style:
+        children: [
-            Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
+          StreamSvgIcon.delete(
-      ),
-      leading: StreamSvgIcon.delete(
             color: Colors.red,
           ),
+          const SizedBox(width: 16),
+          Text(
+            isDeleteFailed ? 'Retry Deleting Message' : 'Delete Message',
+            style: StreamChatTheme.of(context)
+                .textTheme
+                .headline
+                .copyWith(color: Colors.red),
+          ),
+        ],
+      ),
       onTap: () {
         Navigator.pop(context);
         StreamChat.of(context).client.deleteMessage(
@@ -250,13 +274,20 @@ class MessageActionsModal extends StatelessWidget {
 
   Widget _buildCopyButton(BuildContext context) {
     return ListTile(
-      title: Text(
+      dense: true,
-        'Copy message',
+      title: Row(
-        style: Theme.of(context).textTheme.headline6,
+        children: [
-      ),
+          StreamSvgIcon.copy(
-      leading: StreamSvgIcon.copy(
+            size: 24,
             color: StreamChatTheme.of(context).primaryIconTheme.color,
           ),
+          const SizedBox(width: 16),
+          Text(
+            'Copy Message',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
       onTap: () async {
         await Clipboard.setData(ClipboardData(text: message.text));
         Navigator.pop(context);
@@ -266,13 +297,19 @@ class MessageActionsModal extends StatelessWidget {
 
   Widget _buildEditMessage(BuildContext context) {
     return ListTile(
-      title: Text(
+      dense: true,
-        'Edit message',
+      title: Row(
-        style: Theme.of(context).textTheme.headline6,
+        children: [
-      ),
+          StreamSvgIcon.edit(
-      leading: StreamSvgIcon.edit(
             color: StreamChatTheme.of(context).primaryIconTheme.color,
           ),
+          const SizedBox(width: 16),
+          Text(
+            'Edit Message',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
       onTap: () async {
         Navigator.pop(context);
         _showEditBottomSheet(context);
@@ -283,13 +320,19 @@ class MessageActionsModal extends StatelessWidget {
   Widget _buildResendMessage(BuildContext context) {
     final isUpdateFailed = message.status == MessageSendingStatus.FAILED_UPDATE;
     return ListTile(
-      title: Text(
+      dense: true,
-        isUpdateFailed ? 'Resend edited message' : 'Resend',
+      title: Row(
-        style: Theme.of(context).textTheme.headline6,
+        children: [
-      ),
+          StreamSvgIcon.circle_up(
-      leading: StreamSvgIcon.circle_up(
             color: StreamChatTheme.of(context).colorTheme.accentBlue,
           ),
+          const SizedBox(width: 16),
+          Text(
+            isUpdateFailed ? 'Resend Edited Message' : 'Resend',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
       onTap: () {
         Navigator.pop(context);
         final client = StreamChat.of(context).client;
@@ -374,13 +417,19 @@ class MessageActionsModal extends StatelessWidget {
 
   Widget _buildThreadReplyButton(BuildContext context) {
     return ListTile(
-      title: Text(
+      dense: true,
-        'Thread reply',
+      title: Row(
-        style: Theme.of(context).textTheme.headline6,
+        children: [
-      ),
+          StreamSvgIcon.thread(
-      leading: StreamSvgIcon.thread(
             color: StreamChatTheme.of(context).primaryIconTheme.color,
           ),
+          const SizedBox(width: 16),
+          Text(
+            'Thread Reply',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
       onTap: () {
         Navigator.pop(context);
         if (onThreadReplyTap != null) {

lib/src/message_widget.dart

@@ -423,10 +423,12 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                   widget.reverse ? pi : 0),
                                               child: CustomPaint(
                                                 painter: ReactionBubblePainter(
-                                                  widget.messageTheme
+                                                  StreamChatTheme.of(context)
-                                                      .reactionsBackgroundColor,
+                                                      .colorTheme
-                                                  widget.messageTheme
+                                                      .white,
-                                                      .reactionsBorderColor,
+                                                  StreamChatTheme.of(context)
+                                                      .colorTheme
+                                                      .white,
                                                 ),
                                               ),
                                             ),
@@ -492,18 +494,16 @@ class _MessageWidgetState extends State<MessageWidget> {
           mainAxisSize: MainAxisSize.min,
           children: [
             StreamSvgIcon.eye(
-              color:
+              color: StreamChatTheme.of(context).colorTheme.grey,
-                  StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
               size: 16.0,
             ),
             SizedBox(width: 8.0),
             Text(
               'Only visible to you',
-              style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
+              style: StreamChatTheme.of(context)
-                  color: StreamChatTheme.of(context)
+                  .textTheme
-                      .colorTheme
+                  .footnote
-                      .black
+                  .copyWith(color: StreamChatTheme.of(context).colorTheme.grey),
-                      .withOpacity(0.5)),
             ),
           ],
         ),
@@ -754,9 +754,7 @@ class _MessageWidgetState extends State<MessageWidget> {
       side: widget.attachmentBorderSide ??
           widget.borderSide ??
           BorderSide(
-            color: Theme.of(context).brightness == Brightness.dark
+            color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-                ? StreamChatTheme.of(context).colorTheme.white.withAlpha(24)
-                : StreamChatTheme.of(context).colorTheme.black.withAlpha(24),
           ),
       borderRadius: widget.attachmentBorderRadiusGeometry ??
           widget.borderRadiusGeometry ??

lib/src/reaction_picker.dart

@@ -58,11 +58,13 @@ class _ReactionPickerState extends State<ReactionPicker>
           return Transform.scale(
             scale: val,
             child: Material(
-              color: widget.messageTheme.reactionsBackgroundColor,
+              color: StreamChatTheme.of(context).colorTheme.white,
               clipBehavior: Clip.hardEdge,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(24),
               ),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.end,
@@ -116,6 +118,7 @@ class _ReactionPickerState extends State<ReactionPicker>
                   }).toList(),
                 ),
               ),
+            ),
           );
         });
   }

lib/src/stream_chat_theme.dart

@@ -228,19 +228,9 @@ class StreamChatThemeData {
         inputBackground: colorTheme.white.withAlpha(12),
       ),
       ownMessageTheme: MessageTheme(
-        messageText: TextStyle(
+        messageText: textTheme.body,
-          fontSize: 14.5,
+        createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
-          color: colorTheme.black,
+        replies: textTheme.footnoteBold.copyWith(color: accentColor),
-        ),
-        createdAt: TextStyle(
-          color: colorTheme.black.withOpacity(.5),
-          fontSize: 12,
-        ),
-        replies: TextStyle(
-          color: accentColor,
-          fontWeight: FontWeight.w600,
-          fontSize: 12,
-        ),
         messageBackgroundColor: colorTheme.greyGainsboro,
         reactionsBackgroundColor: colorTheme.white,
         reactionsBorderColor: colorTheme.greyWhisper,
@@ -259,19 +249,9 @@ class StreamChatThemeData {
       otherMessageTheme: MessageTheme(
         reactionsBackgroundColor: colorTheme.greyGainsboro,
         reactionsBorderColor: colorTheme.white,
-        messageText: TextStyle(
+        messageText: textTheme.body,
-          fontSize: 14.5,
+        createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
-          color: colorTheme.black,
+        replies: textTheme.footnoteBold.copyWith(color: accentColor),
-        ),
-        createdAt: TextStyle(
-          color: colorTheme.black.withOpacity(.5),
-          fontSize: 12,
-        ),
-        replies: TextStyle(
-          color: accentColor,
-          fontWeight: FontWeight.w600,
-          fontSize: 12,
-        ),
         messageLinks: TextStyle(
           color: accentColor,
         ),