action_sheet: Redesign bottom sheet

Fixes: #90

lib/widgets/action_sheet.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
@@ -11,10 +13,10 @@ 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';
+import 'theme.dart';
 
 /// Show a sheet of actions you can take on a message in the message list.
 ///
@@ -36,20 +38,47 @@ void showMessageActionSheet({required BuildContext context, required Message mes
       && reactionWithVotes.userIds.contains(store.selfUserId))
     ?? false;
 
-  showDraggableScrollableModalBottomSheet<void>(
+  final designVariables = DesignVariables.of(context);
+  showModalBottomSheet<void>(
     context: context,
+    clipBehavior: Clip.antiAlias,
+    backgroundColor: designVariables.actionSheetBackground,
+    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 SizedBox(height: 8),
+            const MessageActionSheetCancelButton(),
+          ],
         ),
-        CopyMessageTextButton(message: message, messageListContext: context),
-        CopyMessageLinkButton(message: message, messageListContext: context),
-        ShareButton(message: message, messageListContext: context),
-      ]);
+      );
     });
 }
 
@@ -69,11 +98,21 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
     return MenuItemButton(
-      leadingIcon: Icon(icon),
+      trailingIcon: Icon(icon, color: designVariables.actionSheetMenuButtonForeground),
+      style: MenuItemButton.styleFrom(
+        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        minimumSize: Size.zero,
+        backgroundColor: designVariables.actionSheetMenuButtonBackground,
+        foregroundColor: designVariables.actionSheetMenuButtonForeground,
+      ),
       onPressed: () => onPressed(context),
-      child: Text(label(zulipLocalizations)));
+      child: Text(label(zulipLocalizations),
+        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
+      ));
   }
 }
 
@@ -86,7 +125,7 @@ class AddThumbsUpButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => Icons.add_reaction_outlined;
+  @override IconData get icon => ZulipIcons.smile;
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
@@ -127,11 +166,13 @@ class StarButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => ZulipIcons.star_filled;
+  @override IconData get icon => _isStarred ? ZulipIcons.star_filled : ZulipIcons.star;
+
+  bool get _isStarred => message.flags.contains(MessageFlag.starred);
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
-    return message.flags.contains(MessageFlag.starred)
+    return _isStarred
       ? zulipLocalizations.actionSheetOptionUnstarMessage
       : zulipLocalizations.actionSheetOptionStarMessage;
   }
@@ -223,7 +264,7 @@ class QuoteAndReplyButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => Icons.format_quote_outlined;
+  @override IconData get icon => ZulipIcons.format_quote;
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
@@ -285,7 +326,7 @@ class CopyMessageTextButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => Icons.copy;
+  @override IconData get icon => ZulipIcons.copy;
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
@@ -353,7 +394,7 @@ class ShareButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => Icons.adaptive.share;
+  @override IconData get icon => Platform.isIOS ? ZulipIcons.share_ios : ZulipIcons.share;
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
@@ -402,3 +443,25 @@ class ShareButton extends MessageActionSheetMenuItemButton {
     }
   }
 }
+
+class MessageActionSheetCancelButton extends StatelessWidget {
+  const MessageActionSheetCancelButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    return TextButton(
+      style: TextButton.styleFrom(
+        padding: const EdgeInsets.all(10),
+        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        minimumSize: Size.zero,
+        backgroundColor: designVariables.actionSheetCancelButtonBackground,
+        foregroundColor: designVariables.actionSheetCancelButtonForeground,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
+      ),
+      onPressed: () => Navigator.pop(context),
+      child: Text(ZulipLocalizations.of(context).dialogCancel,
+        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
+    );
+  }
+}

lib/widgets/icons.dart

@@ -42,44 +42,62 @@ abstract final class ZulipIcons {
   /// The Zulip custom icon "clock".
   static const IconData clock = IconData(0xf106, fontFamily: "Zulip Icons");
 
+  /// The Zulip custom icon "copy".
+  static const IconData copy = IconData(0xf107, fontFamily: "Zulip Icons");
+
   /// The Zulip custom icon "edited".
-  static const IconData edited = IconData(0xf107, fontFamily: "Zulip Icons");
+  static const IconData edited = IconData(0xf108, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "format_quote".
+  static const IconData format_quote = IconData(0xf109, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "globe".
-  static const IconData globe = IconData(0xf108, fontFamily: "Zulip Icons");
+  static const IconData globe = IconData(0xf10a, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "group_dm".
-  static const IconData group_dm = IconData(0xf109, fontFamily: "Zulip Icons");
+  static const IconData group_dm = IconData(0xf10b, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "hash_sign".
-  static const IconData hash_sign = IconData(0xf10a, fontFamily: "Zulip Icons");
+  static const IconData hash_sign = IconData(0xf10c, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "language".
-  static const IconData language = IconData(0xf10b, fontFamily: "Zulip Icons");
+  static const IconData language = IconData(0xf10d, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "lock".
-  static const IconData lock = IconData(0xf10c, fontFamily: "Zulip Icons");
+  static const IconData lock = IconData(0xf10e, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "message_moved".
-  static const IconData message_moved = IconData(0xf10d, fontFamily: "Zulip Icons");
+  static const IconData message_moved = IconData(0xf10f, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "mute".
-  static const IconData mute = IconData(0xf10e, fontFamily: "Zulip Icons");
+  static const IconData mute = IconData(0xf110, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "read_receipts".
-  static const IconData read_receipts = IconData(0xf10f, fontFamily: "Zulip Icons");
+  static const IconData read_receipts = IconData(0xf111, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "share".
+  static const IconData share = IconData(0xf112, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "share_ios".
+  static const IconData share_ios = IconData(0xf113, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "smile".
+  static const IconData smile = IconData(0xf114, fontFamily: "Zulip Icons");
+
+  /// The Zulip custom icon "star".
+  static const IconData star = IconData(0xf115, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "star_filled".
-  static const IconData star_filled = IconData(0xf110, fontFamily: "Zulip Icons");
+  static const IconData star_filled = IconData(0xf116, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "topic".
-  static const IconData topic = IconData(0xf111, fontFamily: "Zulip Icons");
+  static const IconData topic = IconData(0xf117, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "unmute".
-  static const IconData unmute = IconData(0xf112, fontFamily: "Zulip Icons");
+  static const IconData unmute = IconData(0xf118, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "user".
-  static const IconData user = IconData(0xf113, fontFamily: "Zulip Icons");
+  static const IconData user = IconData(0xf119, fontFamily: "Zulip Icons");
 
   // END GENERATED ICON DATA
 }