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,9 +150,16 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
     final type = values[currentTabIndex];
     switch (type) {
       case UploadImageType.local:
-        return Container(
+        return Padding(
           padding: const EdgeInsets.all(8.0),
+          child: Container(
             alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              border: Border.all(
+                color: Theme.of(context).colorScheme.outline,
+              ),
+            ),
             constraints: constraints,
             child: Column(
               children: [
@@ -170,6 +177,7 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
                 ],
               ],
             ),
+          ),
         );
       case UploadImageType.url:
         return Container(

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) {
+    // use figma line height as first priority
-      lineHeight = this.lineHeight!;
+    if (figmaLineHeight != null) {
-    } else 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,