fix: bottom sheet issues (#4523)

* fix: bottom sheet padding

* fix: set divider width to 0.5px

* feat: optimize number select menu

* chore: update edit field icons

* chore: use short form in add block menu

* feat: optimize select and multi-select menu

* feat: refactor font settings page, theme mode menu and rtl menu

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart

@@ -1,7 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -68,6 +68,8 @@ class SelectOptionTag extends StatelessWidget {
     this.color,
     this.textStyle,
     this.onRemove,
+    this.textAlign,
+    this.isExpanded = false,
     required this.padding,
   }) : assert(option != null || name != null && color != null);
 
@@ -78,11 +80,20 @@ class SelectOptionTag extends StatelessWidget {
   final TextStyle? textStyle;
   final void Function(String)? onRemove;
   final EdgeInsets padding;
+  final TextAlign? textAlign;
+  final bool isExpanded;
 
   @override
   Widget build(BuildContext context) {
     final optionName = option?.name ?? name!;
     final optionColor = option?.color.toColor(context) ?? color!;
+    final text = FlowyText.medium(
+      optionName,
+      fontSize: fontSize,
+      overflow: TextOverflow.ellipsis,
+      color: AFThemeExtension.of(context).textColor,
+      textAlign: textAlign,
+    );
     return Container(
       padding: onRemove == null ? padding : padding.copyWith(right: 2.0),
       decoration: BoxDecoration(
@@ -96,14 +107,7 @@ class SelectOptionTag extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Flexible(
-            child: FlowyText.medium(
-              optionName,
-              fontSize: fontSize,
-              overflow: TextOverflow.ellipsis,
-              color: AFThemeExtension.of(context).textColor,
-            ),
-          ),
+          isExpanded ? Expanded(child: text) : Flexible(child: text),
           if (onRemove != null) ...[
             const HSpace(4),
             FlowyIconButton(

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart

@@ -1,12 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
+import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
-import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
-import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/select_option_editor_bloc.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
+import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -65,6 +65,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
                   padding: const EdgeInsets.symmetric(horizontal: 8.0),
                   child: _buildHeader(context),
                 ),
+                const Divider(height: 0.5),
                 Expanded(
                   child: Padding(
                     padding: EdgeInsets.symmetric(
@@ -146,6 +147,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
     return SingleChildScrollView(
       child: Column(
         children: [
+          const VSpace(16),
           _SearchField(
             controller: searchController,
             hintText: LocaleKeys.grid_selectOption_searchOrCreateOption.tr(),
@@ -165,6 +167,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
                   );
             },
           ),
+          const VSpace(22),
           _OptionList(
             onCreateOption: (optionName) {
               context
@@ -234,23 +237,11 @@ class _SearchField extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final textStyle = Theme.of(context).textTheme.bodyMedium;
-    return Padding(
-      padding: const EdgeInsets.symmetric(
-        vertical: 12,
-      ),
-      child: SizedBox(
-        height: 44, // the height is fixed.
-        child: FlowyTextField(
-          autoFocus: false,
-          hintText: hintText,
-          textStyle: textStyle,
-          hintStyle: textStyle?.copyWith(color: Theme.of(context).hintColor),
-          onChanged: onChanged,
-          onSubmitted: onSubmitted,
-          controller: controller,
-        ),
-      ),
+    return FlowyMobileSearchTextField(
+      controller: controller,
+      onChanged: onChanged,
+      onSubmitted: onSubmitted,
+      hintText: hintText,
     );
   }
 }
@@ -300,8 +291,7 @@ class _OptionList extends StatelessWidget {
         return ListView.separated(
           shrinkWrap: true,
           itemCount: cells.length,
-          separatorBuilder: (_, __) =>
-              VSpace(GridSize.typeOptionSeparatorHeight),
+          separatorBuilder: (_, __) => const VSpace(20),
           physics: const NeverScrollableScrollPhysics(),
           itemBuilder: (_, int index) => cells[index],
           padding: const EdgeInsets.only(bottom: 12.0),
@@ -327,7 +317,7 @@ class _SelectOption extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 44,
+      height: 40,
       child: GestureDetector(
         // no need to add click effect, so using gesture detector
         behavior: HitTestBehavior.translucent,
@@ -340,19 +330,28 @@ class _SelectOption extends StatelessWidget {
                   ? FlowySvgs.m_checkbox_checked_s
                   : FlowySvgs.m_checkbox_uncheck_s,
               size: const Size.square(24.0),
-              blendMode: null,
+              blendMode: checked ? null : BlendMode.srcIn,
             ),
             // padding
             const HSpace(12),
             // option tag
-            SelectOptionTag(
-              option: option,
-              padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 8),
+            Expanded(
+              child: SelectOptionTag(
+                option: option,
+                padding: const EdgeInsets.symmetric(
+                  vertical: 10,
+                ),
+                textAlign: TextAlign.center,
+                fontSize: 15.0,
+                isExpanded: true,
+              ),
             ),
-            const Spacer(),
+            const HSpace(24),
             // more options
             FlowyIconButton(
-              icon: const FlowySvg(FlowySvgs.three_dots_s),
+              icon: const FlowySvg(
+                FlowySvgs.m_field_more_s,
+              ),
               onPressed: onMoreOptions,
             ),
           ],
@@ -386,13 +385,13 @@ class _CreateOptionCell extends StatelessWidget {
             ),
             const HSpace(8),
             Expanded(
-              child: Align(
-                alignment: Alignment.centerLeft,
-                child: SelectOptionTag(
-                  name: optionName,
-                  color: Theme.of(context).colorScheme.surfaceVariant,
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 11, vertical: 8),
+              child: SelectOptionTag(
+                isExpanded: true,
+                name: optionName,
+                color: Theme.of(context).colorScheme.surfaceVariant,
+                textAlign: TextAlign.center,
+                padding: const EdgeInsets.symmetric(
+                  vertical: 10,
                 ),
               ),
             ),
@@ -483,7 +482,7 @@ class _MoreOptionsState extends State<_MoreOptions> {
   Widget _buildDeleteButton(BuildContext context) {
     return FlowyOptionTile.text(
       text: LocaleKeys.button_delete.tr(),
-      leftIcon: const FlowySvg(FlowySvgs.delete_s),
+      leftIcon: const FlowySvg(FlowySvgs.m_delete_s),
       onTap: widget.onDelete,
     );
   }

frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart

@@ -95,7 +95,6 @@ class MobileDatabaseControls extends StatelessWidget {
                       showDragHandle: true,
                       showDivider: false,
                       title: LocaleKeys.grid_settings_viewList.tr(),
-                      padding: const EdgeInsets.only(bottom: 36.0),
                       builder: (_) {
                         return MultiBlocProvider(
                           providers: [