action_sheet: Redesign bottom sheet

Fixes: #90

Author: sm-sayedi

lib/widgets/action_sheet.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
@@ -12,16 +13,18 @@ import 'actions.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 'text.dart';
+import 'theme.dart';
 
 /// Show a sheet of actions you can take on a message in the message list.
 ///
 /// Must have a [MessageListPage] ancestor.
 void showMessageActionSheet({required BuildContext context, required Message message}) {
   final store = PerAccountStoreWidget.of(context);
+  final designVariables = DesignVariables.of(context);
 
   // The UI that's conditioned on this won't live-update during this appearance
   // of the action sheet (we avoid calling composeBoxControllerOf in a build
@@ -41,21 +44,76 @@ void showMessageActionSheet({required BuildContext context, required Message mes
       && reactionWithVotes.userIds.contains(store.selfUserId))
     ?? false;
 
-  showDraggableScrollableModalBottomSheet<void>(
+  final optionButtons = [
+    if (!hasThumbsUpReactionVote)
+      AddThumbsUpButton(message: message, messageListContext: context),
+    StarButton(message: message, messageListContext: context),
+    if (isComposeBoxOffered)
+      QuoteAndReplyButton(message: message, messageListContext: context),
+    if (showMarkAsUnreadButton)
+      MarkAsUnreadButton(message: message, messageListContext: context, narrow: narrow),
+    CopyMessageTextButton(message: message, messageListContext: context),
+    CopyMessageLinkButton(message: message, messageListContext: context),
+    ShareButton(message: message, messageListContext: context),
+  ];
+
+  showModalBottomSheet<void>(
     context: context,
+    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),
-        if (showMarkAsUnreadButton)
-          MarkAsUnreadButton(message: message, messageListContext: context, narrow: narrow),
-        CopyMessageTextButton(message: message, messageListContext: context),
-        CopyMessageLinkButton(message: message, messageListContext: context),
-        ShareButton(message: message, messageListContext: context),
-      ]);
+      return SafeArea(
+        minimum: const EdgeInsets.only(bottom: 16),
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(16, 0, 16, 0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // TODO(#217): show message text
+              Flexible(
+                child: Stack(
+                  children: [
+                    SingleChildScrollView(
+                      padding: const EdgeInsets.only(top: 16, bottom: 8),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(7),
+                        child: Column(spacing: 1, children: optionButtons),
+                      )),
+                    // top shadow
+                    Positioned(
+                      top: 0, right: 0, left: 0,
+                      child: Container(
+                        height: 8,
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment.topCenter,
+                            end: Alignment.bottomCenter,
+                            colors: [
+                              designVariables.bgContextMenu,
+                              designVariables.bgContextMenu.withValues(alpha: 0),
+                            ])))),
+                    // bottom shadow
+                    Positioned(
+                      bottom: 0, right: 0, left: 0,
+                      child: Container(
+                        height: 8,
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment.topCenter,
+                            end: Alignment.bottomCenter,
+                            colors: [
+                              designVariables.bgContextMenu.withValues(alpha: 0),
+                              designVariables.bgContextMenu,
+                            ])))),
+                  ],
+                ),
+              ),
+              const MessageActionSheetCancelButton(),
+            ],
+          ),
+        ),
+      );
     });
 }
 
@@ -75,11 +133,22 @@ 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.contextMenuItemText),
+      style: MenuItemButton.styleFrom(
+        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+        foregroundColor: designVariables.contextMenuItemText,
+        splashFactory: NoSplash.splashFactory,
+      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
+          designVariables.contextMenuItemBg.withValues(
+            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
       onPressed: () => onPressed(context),
-      child: Text(label(zulipLocalizations)));
+      child: Text(label(zulipLocalizations),
+        style: const TextStyle(fontSize: 20, height: 24 / 20)
+          .merge(weightVariableTextStyle(context, wght: 600)),
+      ));
   }
 }
 
@@ -92,7 +161,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) {
@@ -133,11 +202,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;
   }
@@ -229,7 +300,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) {
@@ -314,7 +385,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) {
@@ -382,7 +453,10 @@ class ShareButton extends MessageActionSheetMenuItemButton {
     required super.messageListContext,
   });
 
-  @override IconData get icon => Icons.adaptive.share;
+  @override
+  IconData get icon => defaultTargetPlatform == TargetPlatform.iOS
+    ? ZulipIcons.share_ios
+    : ZulipIcons.share;
 
   @override
   String label(ZulipLocalizations zulipLocalizations) {
@@ -431,3 +505,28 @@ 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),
+        foregroundColor: designVariables.contextMenuCancelText,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
+        splashFactory: NoSplash.splashFactory,
+      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
+          designVariables.contextMenuCancelBg.withValues(
+            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
+      onPressed: () {
+        Navigator.pop(context);
+      },
+      child: Text(ZulipLocalizations.of(context).dialogCancel,
+        style: const TextStyle(fontSize: 20, height: 24 / 20)
+          .merge(weightVariableTextStyle(context, wght: 600))),
+    );
+  }
+}