chore: polish upload image menu (#5928)

* chore: polish upload image menu

* fix: text align issue

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/upload_image_menu.dart

@@ -150,25 +150,33 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
     final type = values[currentTabIndex];
     switch (type) {
       case UploadImageType.local:
-        return Container(
+        return Padding(
           padding: const EdgeInsets.all(8.0),
-          alignment: Alignment.center,
-          constraints: constraints,
-          child: Column(
-            children: [
-              UploadImageFileWidget(
-                allowMultipleImages: widget.allowMultipleImages,
-                onPickFiles: widget.onSelectedLocalImages,
+          child: Container(
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              border: Border.all(
+                color: Theme.of(context).colorScheme.outline,
               ),
-              if (widget.limitMaximumImageSize) ...[
-                const VSpace(6.0),
-                FlowyText(
-                  LocaleKeys.document_imageBlock_maximumImageSize.tr(),
-                  fontSize: 12.0,
-                  color: Theme.of(context).hintColor,
+            ),
+            constraints: constraints,
+            child: Column(
+              children: [
+                UploadImageFileWidget(
+                  allowMultipleImages: widget.allowMultipleImages,
+                  onPickFiles: widget.onSelectedLocalImages,
                 ),
+                if (widget.limitMaximumImageSize) ...[
+                  const VSpace(6.0),
+                  FlowyText(
+                    LocaleKeys.document_imageBlock_maximumImageSize.tr(),
+                    fontSize: 12.0,
+                    color: Theme.of(context).hintColor,
+                  ),
+                ],
               ],
-            ],
+            ),
           ),
         );
       case UploadImageType.url:

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu/widgets/embed_image_url_widget.dart

@@ -1,9 +1,8 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/shared/patterns/common_patterns.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 
 class EmbedImageUrlWidget extends StatefulWidget {
   const EmbedImageUrlWidget({
@@ -25,31 +24,38 @@ class _EmbedImageUrlWidgetState extends State<EmbedImageUrlWidget> {
   Widget build(BuildContext context) {
     return Column(
       children: [
+        const VSpace(12),
         FlowyTextField(
           hintText: LocaleKeys.document_imageBlock_embedLink_placeholder.tr(),
           onChanged: (value) => inputText = value,
           onEditingComplete: submit,
         ),
         if (!isUrlValid) ...[
-          const VSpace(8),
+          const VSpace(12),
           FlowyText(
             LocaleKeys.document_plugins_cover_invalidImageUrl.tr(),
             color: Theme.of(context).colorScheme.error,
           ),
         ],
-        const VSpace(8),
+        const VSpace(20),
         SizedBox(
-          width: 160,
+          height: 32,
+          width: 300,
           child: FlowyButton(
+            backgroundColor: Theme.of(context).colorScheme.primary,
+            hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9),
             showDefaultBoxDecorationOnMobile: true,
-            margin: const EdgeInsets.all(8.0),
+            margin: const EdgeInsets.all(5),
             text: FlowyText(
               LocaleKeys.document_imageBlock_embedLink_label.tr(),
+              lineHeight: 1,
               textAlign: TextAlign.center,
+              color: Theme.of(context).colorScheme.onPrimary,
             ),
             onTap: submit,
           ),
         ),
+        const VSpace(8),
       ],
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/slash_menu/slash_menu_items.dart

@@ -448,7 +448,7 @@ Widget _slashMenuItemNameBuilder(
   SelectionMenuStyle style,
   bool isSelected,
 ) {
-  return FlowyText(
+  return FlowyText.regular(
     name,
     fontSize: 12.0,
     figmaLineHeight: 15.0,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart

@@ -167,10 +167,11 @@ class FlowyText extends StatelessWidget {
     }
 
     double? lineHeight;
-    if (this.lineHeight != null) {
-      lineHeight = this.lineHeight!;
-    } else if (figmaLineHeight != null) {
+    // use figma line height as first priority
+    if (figmaLineHeight != null) {
       lineHeight = figmaLineHeight! / fontSize;
+    } else if (this.lineHeight != null) {
+      lineHeight = this.lineHeight!;
     }
 
     if (isEmoji && (_useNotoColorEmoji || Platform.isWindows)) {
@@ -210,7 +211,7 @@ class FlowyText extends StatelessWidget {
         textAlign: textAlign,
         overflow: overflow ?? TextOverflow.clip,
         style: textStyle,
-        strutStyle: (isEmoji && optimizeEmojiAlign)
+        strutStyle: !isEmoji || (isEmoji && optimizeEmojiAlign)
             ? StrutStyle.fromTextStyle(
                 textStyle,
                 forceStrutHeight: true,