fix: show delete icon for document icon properly (#2475)

frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/emoji_popover.dart

@@ -1,11 +1,10 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/src/default_emoji_picker_view.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/src/emoji_view_state.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide FlowySvg;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
 
 class EmojiPopover extends StatefulWidget {
@@ -33,57 +32,53 @@ class _EmojiPopoverState extends State<EmojiPopover> {
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.all(15),
-      child: EmojiPicker(
-        onEmojiSelected: (category, emoji) {
-          widget.onEmojiChanged(emoji);
-        },
-        customWidget: (Config config, EmojiViewState state) {
-          return Stack(
-            alignment: Alignment.topRight,
-            children: [
-              Container(
-                padding: EdgeInsets.only(top: widget.showRemoveButton ? 25 : 0),
-                child: DefaultEmojiPickerView(config, state),
+      child: Column(
+        children: [
+          if (widget.showRemoveButton)
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4.0),
+              child: Align(
+                alignment: Alignment.centerRight,
+                child: DeleteButton(onPressed: widget.removeIcon),
+              ),
+            ),
+          Expanded(
+            child: EmojiPicker(
+              onEmojiSelected: (category, emoji) {
+                widget.onEmojiChanged(emoji);
+              },
+              config: Config(
+                columns: 8,
+                emojiSizeMax: 28,
+                bgColor: Colors.transparent,
+                iconColor: Theme.of(context).iconTheme.color!,
+                iconColorSelected: Theme.of(context).colorScheme.onSurface,
+                selectedHoverColor: Theme.of(context).colorScheme.secondary,
+                progressIndicatorColor: Theme.of(context).iconTheme.color!,
+                buttonMode: ButtonMode.CUPERTINO,
+                initCategory: Category.RECENT,
               ),
-              _buildDeleteButtonIfNeed(),
-            ],
-          );
-        },
-        config: Config(
-          columns: 8,
-          emojiSizeMax: 28,
-          bgColor: Colors.transparent,
-          iconColor: Theme.of(context).iconTheme.color!,
-          iconColorSelected: Theme.of(context).colorScheme.onSurface,
-          selectedHoverColor: Theme.of(context).colorScheme.secondary,
-          progressIndicatorColor: Theme.of(context).iconTheme.color!,
-          buttonMode: ButtonMode.CUPERTINO,
-          initCategory: Category.RECENT,
-        ),
+            ),
+          ),
+        ],
       ),
     );
   }
+}
+
+class DeleteButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  const DeleteButton({required this.onPressed, Key? key}) : super(key: key);
 
-  Widget _buildDeleteButtonIfNeed() {
-    if (!widget.showRemoveButton) {
-      return const SizedBox();
-    }
+  @override
+  Widget build(BuildContext context) {
     return FlowyButton(
-      onTap: () => widget.removeIcon(),
+      onTap: () => onPressed,
       useIntrinsicWidth: true,
-      text: Row(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.end,
-        children: [
-          const FlowySvg(name: 'editor/delete'),
-          const SizedBox(
-            width: 5,
-          ),
-          FlowyText(
-            LocaleKeys.document_plugins_cover_removeIcon.tr(),
-          ),
-        ],
+      text: FlowyText(
+        LocaleKeys.document_plugins_cover_removeIcon.tr(),
       ),
+      leftIcon: const FlowySvg(name: 'editor/delete'),
     );
   }
 }