action_sheet: Redesign bottom sheet

Author: sm-sayedi

lib/widgets/action_sheet.dart

@@ -11,7 +11,6 @@ import '../model/narrow.dart';
 import 'clipboard.dart';
 import 'compose_box.dart';
 import 'dialog.dart';
-import 'draggable_scrollable_modal_bottom_sheet.dart';
 import 'icons.dart';
 import 'message_list.dart';
 import 'store.dart';
@@ -36,20 +35,44 @@ void showMessageActionSheet({required BuildContext context, required Message mes
       && reactionWithVotes.userIds.contains(store.selfUserId))
     ?? false;
 
-  showDraggableScrollableModalBottomSheet<void>(
+  showModalBottomSheet<void>(
     context: context,
+    clipBehavior: Clip.antiAlias,
+    shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))),
+    useSafeArea: true,
+    isScrollControlled: true,
     builder: (BuildContext _) {
-      return Column(children: [
-        if (!hasThumbsUpReactionVote) AddThumbsUpButton(message: message, messageListContext: context),
-        StarButton(message: message, messageListContext: context),
-        if (isComposeBoxOffered) QuoteAndReplyButton(
-          message: message,
-          messageListContext: context,
+      return Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // TODO(#217): show message text
+            Flexible(
+              child: SingleChildScrollView(
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(7),
+                  child: Column(children: [
+                    if (!hasThumbsUpReactionVote) AddThumbsUpButton(message: message, messageListContext: context),
+                    StarButton(message: message, messageListContext: context),
+                    if (isComposeBoxOffered) QuoteAndReplyButton(
+                      message: message,
+                      messageListContext: context,
+                    ),
+                    CopyMessageTextButton(message: message, messageListContext: context),
+                    CopyMessageLinkButton(message: message, messageListContext: context),
+                    ShareButton(message: message, messageListContext: context),
+                  // TODO: The following line could be replaced by the [spacing]
+                  // property when https://github.com/flutter/flutter/issues/55378 is fixed.
+                  ].expand((item) => [const SizedBox(height: 1), item]).skip(1).toList()),
+                ),
+              ),
+            ),
+            const MessageActionSheetCancelButton(),
+          ],
         ),
-        CopyMessageTextButton(message: message, messageListContext: context),
-        CopyMessageLinkButton(message: message, messageListContext: context),
-        ShareButton(message: message, messageListContext: context),
-      ]);
+      );
     });
 }
 
@@ -71,9 +94,13 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
     return MenuItemButton(
-      leadingIcon: Icon(icon),
+      trailingIcon: Icon(icon, color: const Color(0xFF381DA7)), // TODO(#831)
+        style: MenuItemButton.styleFrom(
+          backgroundColor: const Color(0xFF6159E1).withOpacity(0.12), // TODO(#831)
+          foregroundColor: const Color(0xFF381DA7), // TODO(#831)
+        ),
       onPressed: () => onPressed(context),
-      child: Text(label(zulipLocalizations)));
+      child: Text(label(zulipLocalizations), style: const TextStyle(fontSize: 16)));
   }
 }
 
@@ -402,3 +429,23 @@ class ShareButton extends MessageActionSheetMenuItemButton {
     }
   }
 }
+
+class MessageActionSheetCancelButton extends StatelessWidget {
+  const MessageActionSheetCancelButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        elevation: 0,
+        backgroundColor: const Color(0xFF797986).withOpacity(0.15), // TODO(#831)
+        foregroundColor: const Color(0xFF222222), // TODO(#831)
+        shadowColor: Colors.transparent,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
+      ),
+      onPressed: () => Navigator.pop(context),
+      child: Text(ZulipLocalizations.of(context).dialogCancel,
+        style: const TextStyle(fontSize: 16)),
+    );
+  }
+}