feat(flutter_mobile): adjust bottom sheet quick action button style (#7121)

* feat: adjust bottom sheet quick action button style

* chore: remove final dividers

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart

@@ -190,7 +190,6 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.unpublish,
           ),
         ),
-        _divider(),
       ];
     } else {
       return [
@@ -201,13 +200,9 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.publish,
           ),
         ),
-        _divider(),
       ];
     }
   }
 
-  Widget _divider() => const Divider(
-        height: 8.5,
-        thickness: 0.5,
-      );
+  Widget _divider() => const MobileQuickActionDivider();
 }

frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/group_card_header.dart

@@ -7,7 +7,6 @@ import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
@@ -113,12 +112,8 @@ class _GroupCardHeaderState extends State<GroupCardHeader> {
                     context,
                     showDragHandle: true,
                     backgroundColor: Theme.of(context).colorScheme.surface,
-                    builder: (_) => SeparatedColumn(
+                    builder: (_) => Column(
                       crossAxisAlignment: CrossAxisAlignment.stretch,
-                      separatorBuilder: () => const Divider(
-                        height: 8.5,
-                        thickness: 0.5,
-                      ),
                       children: [
                         MobileQuickActionButton(
                           text: LocaleKeys.board_column_renameColumn.tr(),
@@ -132,6 +127,7 @@ class _GroupCardHeaderState extends State<GroupCardHeader> {
                             context.pop();
                           },
                         ),
+                        const MobileQuickActionDivider(),
                         MobileQuickActionButton(
                           text: LocaleKeys.board_column_hideColumn.tr(),
                           icon: FlowySvgs.hide_s,

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart

@@ -149,7 +149,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
             icon: FlowySvgs.duplicate_s,
             text: LocaleKeys.button_duplicate.tr(),
           ),
-          const Divider(height: 8.5, thickness: 0.5),
+          const MobileQuickActionDivider(),
           MobileQuickActionButton(
             onTap: () => showMobileBottomSheet(
               context,
@@ -201,7 +201,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
             icon: FlowySvgs.add_cover_s,
             text: 'Add cover',
           ),
-          const Divider(height: 8.5, thickness: 0.5),
+          const MobileQuickActionDivider(),
           MobileQuickActionButton(
             onTap: () => _performAction(viewId, _bloc.state.currentRowId, true),
             text: LocaleKeys.button_delete.tr(),
@@ -209,7 +209,6 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
             icon: FlowySvgs.trash_s,
             iconColor: Theme.of(context).colorScheme.error,
           ),
-          const Divider(height: 8.5, thickness: 0.5),
         ],
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart

@@ -48,7 +48,7 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
             context.pop();
           }
         }),
-        _divider(),
+        const MobileQuickActionDivider(),
         _actionButton(
           context,
           _Action.duplicate,
@@ -58,7 +58,7 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
           },
           !isInline,
         ),
-        _divider(),
+        const MobileQuickActionDivider(),
         _actionButton(
           context,
           _Action.delete,
@@ -68,7 +68,6 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
           },
           !isInline,
         ),
-        _divider(),
       ],
     );
   }
@@ -88,8 +87,6 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
       enable: enable,
     );
   }
-
-  Widget _divider() => const Divider(height: 8.5, thickness: 0.5);
 }
 
 enum _Action {

frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart

@@ -25,36 +25,41 @@ class MobileQuickActionButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final iconSize = this.iconSize ?? const Size.square(18);
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 4),
-      child: InkWell(
-        onTap: enable ? onTap : null,
-        borderRadius: BorderRadius.circular(12),
-        overlayColor:
-            enable ? null : const WidgetStatePropertyAll(Colors.transparent),
-        splashColor: Colors.transparent,
-        child: Container(
-          height: 44,
-          padding: const EdgeInsets.symmetric(horizontal: 12),
-          child: Row(
-            children: [
-              FlowySvg(
-                icon,
-                size: iconSize,
-                color: enable ? iconColor : Theme.of(context).disabledColor,
+    return InkWell(
+      onTap: enable ? onTap : null,
+      overlayColor:
+          enable ? null : const WidgetStatePropertyAll(Colors.transparent),
+      splashColor: Colors.transparent,
+      child: Container(
+        height: 52,
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: Row(
+          children: [
+            FlowySvg(
+              icon,
+              size: iconSize,
+              color: enable ? iconColor : Theme.of(context).disabledColor,
+            ),
+            HSpace(30 - iconSize.width),
+            Expanded(
+              child: FlowyText.regular(
+                text,
+                fontSize: 16,
+                color: enable ? textColor : Theme.of(context).disabledColor,
               ),
-              HSpace(30 - iconSize.width),
-              Expanded(
-                child: FlowyText.regular(
-                  text,
-                  fontSize: 16,
-                  color: enable ? textColor : Theme.of(context).disabledColor,
-                ),
-              ),
-            ],
-          ),
+            ),
+          ],
         ),
       ),
     );
   }
 }
+
+class MobileQuickActionDivider extends StatelessWidget {
+  const MobileQuickActionDivider({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Divider(height: 0.5, thickness: 0.5);
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_message_bubble.dart

@@ -309,11 +309,10 @@ class ChatAIMessagePopup extends StatelessWidget {
               children: [
                 const VSpace(16.0),
                 _copyButton(context, bottomSheetContext),
-                const Divider(height: 8.5, thickness: 0.5),
+                _divider(),
                 _regenerateButton(context),
-                const Divider(height: 8.5, thickness: 0.5),
+                _divider(),
                 _saveToPageButton(context),
-                const Divider(height: 8.5, thickness: 0.5),
               ],
             );
           },
@@ -323,6 +322,8 @@ class ChatAIMessagePopup extends StatelessWidget {
     );
   }
 
+  Widget _divider() => const MobileQuickActionDivider();
+
   Widget _copyButton(BuildContext context, BuildContext bottomSheetContext) {
     return MobileQuickActionButton(
       onTap: () async {

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/url.dart

@@ -193,7 +193,7 @@ class MobileURLEditor extends StatelessWidget {
           icon: FlowySvgs.url_s,
           text: LocaleKeys.grid_url_launch.tr(),
         ),
-        const Divider(height: 8.5, thickness: 0.5),
+        const MobileQuickActionDivider(),
         MobileQuickActionButton(
           enable: context.watch<URLCellBloc>().state.content.isNotEmpty,
           onTap: () {
@@ -209,7 +209,6 @@ class MobileURLEditor extends StatelessWidget {
           icon: FlowySvgs.copy_s,
           text: LocaleKeys.grid_url_copy.tr(),
         ),
-        const Divider(height: 8.5, thickness: 0.5),
       ],
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_attachment_item.dart

@@ -117,21 +117,20 @@ class _AddAttachmentMenu extends StatelessWidget {
             iconSize: const Size.square(20),
             onTap: () async => selectPhoto(context),
           ),
-          const Divider(height: 8.5, thickness: 0.5),
+          const MobileQuickActionDivider(),
           MobileQuickActionButton(
             text: LocaleKeys.document_attachmentMenu_takePicture.tr(),
             icon: FlowySvgs.camera_s,
             iconSize: const Size.square(20),
             onTap: () async => selectCamera(context),
           ),
-          const Divider(height: 8.5, thickness: 0.5),
+          const MobileQuickActionDivider(),
           MobileQuickActionButton(
             text: LocaleKeys.document_attachmentMenu_chooseFile.tr(),
             icon: FlowySvgs.file_s,
             iconSize: const Size.square(20),
             onTap: () async => selectFile(context),
           ),
-          const Divider(height: 8.5, thickness: 0.5),
         ],
       ),
     );