fix: expand the icon to be the same size as the text in the heading block (#6093)

* fix: hidden board group padding

* fix: expand icon in heading style

frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart

@@ -42,6 +42,8 @@ class HiddenGroupsColumn extends StatelessWidget {
           return const SizedBox.shrink();
         }
         final isCollapsed = layoutSettings.collapseHiddenGroups;
+        final leftPadding = margin.left +
+            context.read<DatabasePluginWidgetBuilderSize>().horizontalPadding;
         return AnimatedSize(
           alignment: AlignmentDirectional.topStart,
           curve: Curves.easeOut,
@@ -56,27 +58,22 @@ class HiddenGroupsColumn extends StatelessWidget {
                     ),
                   ),
                 )
-              : SizedBox(
+              : Container(
                   width: 274,
+                  padding: EdgeInsets.only(
+                    left: leftPadding,
+                    right: margin.right + 4,
+                  ),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       SizedBox(
                         height: 50,
-                        child: Padding(
-                          padding: EdgeInsets.only(
-                            left: margin.left +
-                                context
-                                    .read<DatabasePluginWidgetBuilderSize>()
-                                    .horizontalPadding,
-                            right: margin.right + 4,
-                          ),
                         child: Row(
                           children: [
                             Expanded(
                               child: FlowyText.medium(
-                                  LocaleKeys
+                                LocaleKeys.board_hiddenGroupSection_sectionTitle
-                                      .board_hiddenGroupSection_sectionTitle
                                     .tr(),
                                 overflow: TextOverflow.ellipsis,
                                 color: Theme.of(context).hintColor,
@@ -86,7 +83,6 @@ class HiddenGroupsColumn extends StatelessWidget {
                           ],
                         ),
                       ),
-                      ),
                       Expanded(
                         child: HiddenGroupList(
                           databaseController: databaseController,
@@ -204,10 +200,7 @@ class _HiddenGroupCardState extends State<HiddenGroupCard> {
     final databaseController = widget.bloc.databaseController;
     final primaryField = databaseController.fieldController.fieldInfos
         .firstWhereOrNull((element) => element.isPrimary)!;
-
+    return AppFlowyPopover(
-    return Padding(
-      padding: const EdgeInsets.only(left: 26),
-      child: AppFlowyPopover(
       controller: _popoverController,
       direction: PopoverDirection.bottomWithCenterAligned,
       triggerActions: PopoverTriggerFlags.none,
@@ -229,7 +222,6 @@ class _HiddenGroupCardState extends State<HiddenGroupCard> {
         index: widget.index,
         bloc: widget.bloc,
       ),
-      ),
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart

@@ -1,7 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/application/mobile_router.dart';
-import 'package:appflowy/plugins/base/emoji/emoji_text.dart';
 import 'package:appflowy/plugins/document/application/document_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mobile_page_selector_sheet.dart';
@@ -106,70 +105,32 @@ class _MentionPageBlockState extends State<MentionPageBlock> {
         final view = state.data;
         // memorize the result
         pageMemorizer[widget.pageId] = view;
+
         if (view == null) {
-          return FlowyHover(
+          return _NoAccessMentionPageBlock(
-            child: Padding(
+            textStyle: widget.textStyle,
-              padding: const EdgeInsets.symmetric(horizontal: 4),
-              child: FlowyText(
-                LocaleKeys.document_mention_noAccess.tr(),
-                color: Theme.of(context).disabledColor,
-                decoration: TextDecoration.underline,
-                fontSize: widget.textStyle?.fontSize,
-                fontWeight: widget.textStyle?.fontWeight,
-              ),
-            ),
           );
         }
 
-        final iconSize = widget.textStyle?.fontSize ?? 16.0;
+        if (PlatformExtension.isMobile) {
-        Widget child = Row(
+          return _MobileMentionPageBlock(
-          mainAxisSize: MainAxisSize.min,
+            view: view,
-          children: [
+            textStyle: widget.textStyle,
-            const HSpace(4),
+            handleTap: handleTap,
-            view.icon.value.isNotEmpty
+            handleDoubleTap: handleDoubleTap,
-                ? EmojiText(
-                    emoji: view.icon.value,
-                    fontSize: 12,
-                    textAlign: TextAlign.center,
-                    lineHeight: 1.3,
-                  )
-                : FlowySvg(
-                    view.layout.icon,
-                    size: Size.square(iconSize + 2.0),
-                  ),
-            const HSpace(2),
-            FlowyText(
-              view.name,
-              decoration: TextDecoration.underline,
-              fontSize: widget.textStyle?.fontSize,
-              fontWeight: widget.textStyle?.fontWeight,
-            ),
-            const HSpace(4),
-          ],
           );
-
+        } else {
-        if (PlatformExtension.isDesktop) {
+          return _DesktopMentionPageBlock(
-          child = Padding(
+            view: view,
-            padding: const EdgeInsets.symmetric(horizontal: 2),
+            textStyle: widget.textStyle,
-            child: FlowyHover(
+            handleTap: handleTap,
-              cursor: SystemMouseCursors.click,
-              child: child,
-            ),
           );
         }
-
-        return GestureDetector(
-          onTap: handleTap,
-          onDoubleTap: PlatformExtension.isMobile ? handleDoubleTap : null,
-          behavior: HitTestBehavior.opaque,
-          child: child,
-        );
       },
     );
   }
 
   Future<void> handleTap() async {
-    debugPrint('handleTap');
     final view = await fetchView(widget.pageId);
     if (view == null) {
       Log.error('Page(${widget.pageId}) not found');
@@ -246,3 +207,127 @@ class _MentionPageBlockState extends State<MentionPageBlock> {
     });
   }
 }
+
+class _MentionPageBlockContent extends StatelessWidget {
+  const _MentionPageBlockContent({
+    required this.view,
+    required this.textStyle,
+  });
+
+  final ViewPB view;
+  final TextStyle? textStyle;
+
+  @override
+  Widget build(BuildContext context) {
+    final emojiSize = textStyle?.fontSize ?? 12.0;
+    final iconSize = textStyle?.fontSize ?? 16.0;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        const HSpace(4),
+        view.icon.value.isNotEmpty
+            ? FlowyText.emoji(
+                view.icon.value,
+                fontSize: emojiSize,
+                lineHeight: textStyle?.height,
+                optimizeEmojiAlign: true,
+              )
+            : FlowySvg(
+                view.layout.icon,
+                size: Size.square(iconSize + 2.0),
+              ),
+        const HSpace(2),
+        FlowyText(
+          view.name,
+          decoration: TextDecoration.underline,
+          fontSize: textStyle?.fontSize,
+          fontWeight: textStyle?.fontWeight,
+          lineHeight: textStyle?.height,
+        ),
+        const HSpace(4),
+      ],
+    );
+  }
+}
+
+class _NoAccessMentionPageBlock extends StatelessWidget {
+  const _NoAccessMentionPageBlock({
+    required this.textStyle,
+  });
+
+  final TextStyle? textStyle;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyHover(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 4),
+        child: FlowyText(
+          LocaleKeys.document_mention_noAccess.tr(),
+          color: Theme.of(context).disabledColor,
+          decoration: TextDecoration.underline,
+          fontSize: textStyle?.fontSize,
+          fontWeight: textStyle?.fontWeight,
+        ),
+      ),
+    );
+  }
+}
+
+class _MobileMentionPageBlock extends StatelessWidget {
+  const _MobileMentionPageBlock({
+    required this.view,
+    required this.textStyle,
+    required this.handleTap,
+    required this.handleDoubleTap,
+  });
+
+  final TextStyle? textStyle;
+  final ViewPB view;
+  final VoidCallback handleTap;
+  final VoidCallback handleDoubleTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: handleTap,
+      onDoubleTap: handleDoubleTap,
+      behavior: HitTestBehavior.opaque,
+      child: _MentionPageBlockContent(
+        view: view,
+        textStyle: textStyle,
+      ),
+    );
+  }
+}
+
+class _DesktopMentionPageBlock extends StatelessWidget {
+  const _DesktopMentionPageBlock({
+    required this.view,
+    required this.textStyle,
+    required this.handleTap,
+  });
+
+  final TextStyle? textStyle;
+  final ViewPB view;
+  final VoidCallback handleTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: handleTap,
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 2),
+        child: FlowyHover(
+          cursor: SystemMouseCursors.click,
+          child: _MentionPageBlockContent(
+            view: view,
+            textStyle: textStyle,
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -137,9 +137,8 @@ class EditorStyleCustomizer {
           textStyle: baseTextStyle.copyWith(
             fontSize: fontSize,
             fontWeight: FontWeight.normal,
-            fontStyle: FontStyle.italic,
             color: Colors.red,
-            backgroundColor: Colors.grey.withOpacity(0.3),
+            backgroundColor: theme.colorScheme.inverseSurface.withOpacity(0.8),
           ),
         ),
         applyHeightToFirstAscent: true,