feat: new UI design for number format list (#4537)

frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart

@@ -26,7 +26,7 @@ class FlowySearchTextField extends StatelessWidget {
         onSubmitted: onSubmitted,
         placeholder: hintText,
         prefixIcon: const FlowySvg(FlowySvgs.m_search_m),
-        prefixInsets: const EdgeInsets.only(left: 16.0),
+        prefixInsets: const EdgeInsets.only(left: 16.0, right: 2.0),
         suffixIcon: const Icon(Icons.close),
         suffixInsets: const EdgeInsets.only(right: 16.0),
         placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith(

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart

@@ -3,6 +3,7 @@ import 'dart:typed_data';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
@@ -19,7 +20,6 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/uuid.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:protobuf/protobuf.dart';
@@ -654,8 +654,7 @@ class _NumberOption extends StatelessWidget {
             return DraggableScrollableSheet(
               expand: false,
               snap: true,
-              initialChildSize: 0.6,
+              minChildSize: 0.5,
-              minChildSize: 0.6,
               builder: (context, scrollController) => _NumberFormatList(
                 scrollController: scrollController,
                 selectedFormat: selectedFormat,
@@ -701,16 +700,7 @@ class _NumberFormatListState extends State<_NumberFormatList> {
         Container(
           margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
           height: 44.0,
-          child: CupertinoSearchTextField(
+          child: FlowySearchTextField(
-            prefixIcon: const FlowySvg(FlowySvgs.m_search_m),
-            prefixInsets: const EdgeInsets.only(left: 16.0),
-            suffixIcon: const Icon(Icons.close),
-            suffixInsets: const EdgeInsets.only(right: 16.0),
-            placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
-                  color: Theme.of(context).hintColor,
-                  fontWeight: FontWeight.w400,
-                  fontSize: 14.0,
-                ),
             onChanged: (String value) {
               setState(() {
                 formats = NumberFormatPB.values
@@ -732,19 +722,21 @@ class _NumberFormatListState extends State<_NumberFormatList> {
               child: Row(
                 children: [
                   Padding(
-                    padding: const EdgeInsets.symmetric(
+                    padding: const EdgeInsets.fromLTRB(
-                      horizontal: 4.0,
+                      4.0,
-                      vertical: 16.0,
+                      16.0,
+                      12.0,
+                      16.0,
                     ),
                     child: FlowyText(
                       element.title(),
                       fontSize: 16,
                     ),
                   ),
-                  const Spacer(),
                   FlowyText(
                     element.iconSymbol(),
                     fontSize: 16,
+                    color: Theme.of(context).hintColor,
                   ),
                   widget.selectedFormat != element
                       ? const HSpace(30.0)

frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart

@@ -111,8 +111,7 @@ class FlowyOptionTile extends StatelessWidget {
       leading: leftIcon,
       trailing: isSelected
           ? const FlowySvg(
-              FlowySvgs.blue_check_s,
+              FlowySvgs.m_blue_check_s,
-              size: Size.square(24.0),
               blendMode: null,
             )
           : null,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart

@@ -65,6 +65,7 @@ Future<bool?> showAddBlockMenu(
     showHeader: true,
     showDragHandle: true,
     showDoneButton: true,
+    showCloseButton: true,
     barrierColor: Colors.transparent,
     backgroundColor: theme.toolbarMenuBackgroundColor,
     elevation: 20,

frontend/resources/flowy_icons/16x/m_blue_check.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icons 16 / Check">
+<path id="Vector" d="M3 10.3L7.76923 16L17 4" stroke="#00BCF0" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>