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,35 +58,29 @@ 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(
+                        child: Row(
-                          padding: EdgeInsets.only(
+                          children: [
-                            left: margin.left +
+                            Expanded(
-                                context
+                              child: FlowyText.medium(
-                                    .read<DatabasePluginWidgetBuilderSize>()
+                                LocaleKeys.board_hiddenGroupSection_sectionTitle
-                                    .horizontalPadding,
+                                    .tr(),
-                            right: margin.right + 4,
+                                overflow: TextOverflow.ellipsis,
-                          ),
+                                color: Theme.of(context).hintColor,
-                          child: Row(
-                            children: [
-                              Expanded(
-                                child: FlowyText.medium(
-                                  LocaleKeys
-                                      .board_hiddenGroupSection_sectionTitle
-                                      .tr(),
-                                  overflow: TextOverflow.ellipsis,
-                                  color: Theme.of(context).hintColor,
-                                ),
                               ),
-                              _collapseExpandIcon(context, isCollapsed),
+                            ),
-                            ],
+                            _collapseExpandIcon(context, isCollapsed),
-                          ),
+                          ],
                         ),
                       ),
                       Expanded(
@@ -204,31 +200,27 @@ class _HiddenGroupCardState extends State<HiddenGroupCard> {
     final databaseController = widget.bloc.databaseController;
     final primaryField = databaseController.fieldController.fieldInfos
         .firstWhereOrNull((element) => element.isPrimary)!;
-
+    return AppFlowyPopover(
-    return Padding(
+      controller: _popoverController,
-      padding: const EdgeInsets.only(left: 26),
+      direction: PopoverDirection.bottomWithCenterAligned,
-      child: AppFlowyPopover(
+      triggerActions: PopoverTriggerFlags.none,
-        controller: _popoverController,
+      constraints: const BoxConstraints(maxWidth: 234, maxHeight: 300),
-        direction: PopoverDirection.bottomWithCenterAligned,
+      popupBuilder: (popoverContext) {
-        triggerActions: PopoverTriggerFlags.none,
+        return BlocProvider.value(
-        constraints: const BoxConstraints(maxWidth: 234, maxHeight: 300),
+          value: context.read<BoardBloc>(),
-        popupBuilder: (popoverContext) {
+          child: HiddenGroupPopupItemList(
-          return BlocProvider.value(
+            viewId: databaseController.viewId,
-            value: context.read<BoardBloc>(),
+            groupId: widget.group.groupId,
-            child: HiddenGroupPopupItemList(
+            primaryFieldId: primaryField.id,
-              viewId: databaseController.viewId,
+            rowCache: databaseController.rowCache,
-              groupId: widget.group.groupId,
+          ),
-              primaryFieldId: primaryField.id,
+        );
-              rowCache: databaseController.rowCache,
+      },
-            ),
+      child: HiddenGroupButtonContent(
-          );
+        popoverController: _popoverController,
-        },
+        groupId: widget.group.groupId,
-        child: HiddenGroupButtonContent(
+        index: widget.index,
-          popoverController: _popoverController,
+        bloc: widget.bloc,
-          groupId: widget.group.groupId,
-          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,
+        } else {
-                    fontSize: 12,
+          return _DesktopMentionPageBlock(
-                    textAlign: TextAlign.center,
+            view: view,
-                    lineHeight: 1.3,
+            textStyle: widget.textStyle,
-                  )
+            handleTap: handleTap,
-                : 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),
-          ],
-        );
-
-        if (PlatformExtension.isDesktop) {
-          child = Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 2),
-            child: FlowyHover(
-              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,