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/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart

@@ -5,27 +5,31 @@ class FlowyOptionDecorateBox extends StatelessWidget {
     super.key,
     this.showTopBorder = true,
     this.showBottomBorder = true,
+    this.color,
     required this.child,
   });
 
   final bool showTopBorder;
   final bool showBottomBorder;
   final Widget child;
+  final Color? color;
 
   @override
   Widget build(BuildContext context) {
     return DecoratedBox(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surface,
+        color: color ?? Theme.of(context).colorScheme.surface,
         border: Border(
           top: showTopBorder
               ? BorderSide(
                   color: Theme.of(context).dividerColor,
+                  width: 0.5,
                 )
               : BorderSide.none,
           bottom: showBottomBorder
               ? BorderSide(
                   color: Theme.of(context).dividerColor,
+                  width: 0.5,
                 )
               : BorderSide.none,
         ),

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

@@ -1,77 +0,0 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-
-class FlowyMobileSearchTextField extends StatefulWidget {
-  const FlowyMobileSearchTextField({
-    super.key,
-    required this.onKeywordChanged,
-  });
-
-  final void Function(String keyword) onKeywordChanged;
-
-  @override
-  State<FlowyMobileSearchTextField> createState() =>
-      _FlowyMobileSearchTextFieldState();
-}
-
-class _FlowyMobileSearchTextFieldState
-    extends State<FlowyMobileSearchTextField> {
-  final TextEditingController controller = TextEditingController();
-  final FocusNode focusNode = FocusNode();
-
-  @override
-  void dispose() {
-    controller.dispose();
-    focusNode.dispose();
-
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ConstrainedBox(
-      constraints: const BoxConstraints(
-        maxHeight: 36.0,
-      ),
-      child: FlowyTextField(
-        focusNode: focusNode,
-        hintText: LocaleKeys.emoji_search.tr(),
-        controller: controller,
-        onChanged: widget.onKeywordChanged,
-        prefixIcon: const Padding(
-          padding: EdgeInsets.only(
-            left: 8.0,
-            right: 4.0,
-          ),
-          child: FlowySvg(
-            FlowySvgs.search_s,
-          ),
-        ),
-        prefixIconConstraints: const BoxConstraints(
-          maxHeight: 18.0,
-        ),
-        suffixIcon: Padding(
-          padding: const EdgeInsets.all(4.0),
-          child: FlowyButton(
-            text: const FlowySvg(
-              FlowySvgs.close_lg,
-            ),
-            margin: EdgeInsets.zero,
-            useIntrinsicWidth: true,
-            onTap: () {
-              if (controller.text.isNotEmpty) {
-                controller.clear();
-                widget.onKeywordChanged('');
-              } else {
-                focusNode.unfocus();
-              }
-            },
-          ),
-        ),
-      ),
-    );
-  }
-}

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

@@ -0,0 +1,40 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class FlowyMobileSearchTextField extends StatelessWidget {
+  const FlowyMobileSearchTextField({
+    super.key,
+    this.hintText,
+    this.controller,
+    this.onChanged,
+    this.onSubmitted,
+  });
+
+  final String? hintText;
+  final TextEditingController? controller;
+  final ValueChanged<String>? onChanged;
+  final ValueChanged<String>? onSubmitted;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 44.0,
+      child: CupertinoSearchTextField(
+        controller: controller,
+        onChanged: onChanged,
+        onSubmitted: onSubmitted,
+        placeholder: hintText,
+        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,
+            ),
+      ),
+    );
+  }
+}

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

@@ -32,6 +32,9 @@ class FlowyOptionTile extends StatelessWidget {
     this.onTextChanged,
     this.onTextSubmitted,
     this.autofocus,
+    this.content,
+    this.backgroundColor,
+    this.fontFamily,
   });
 
   factory FlowyOptionTile.text({
@@ -89,14 +92,20 @@ class FlowyOptionTile extends StatelessWidget {
     required bool isSelected,
     required VoidCallback? onTap,
     Widget? leftIcon,
+    Widget? content,
     bool showTopBorder = true,
     bool showBottomBorder = true,
+    String? fontFamily,
+    Color? backgroundColor,
   }) {
     return FlowyOptionTile._(
       type: FlowyOptionTileType.checkbox,
       isSelected: isSelected,
       text: text,
+      content: content,
       onTap: onTap,
+      fontFamily: fontFamily,
+      backgroundColor: backgroundColor,
       showTopBorder: showTopBorder,
       showBottomBorder: showBottomBorder,
       leading: leftIcon,
@@ -141,6 +150,9 @@ class FlowyOptionTile extends StatelessWidget {
   final Widget? leading;
   final Widget? trailing;
 
+  // customize the content widget
+  final Widget? content;
+
   // only used in checkbox or switcher
   final bool isSelected;
 
@@ -155,25 +167,27 @@ class FlowyOptionTile extends StatelessWidget {
 
   final FlowyOptionTileType type;
 
+  final Color? backgroundColor;
+  final String? fontFamily;
+
   @override
   Widget build(BuildContext context) {
     final leadingWidget = _buildLeading();
 
-    final child = ColoredBox(
-      color: Theme.of(context).colorScheme.surface,
-      child: FlowyOptionDecorateBox(
-        showTopBorder: showTopBorder,
-        showBottomBorder: showBottomBorder,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-          child: Row(
-            children: [
-              if (leadingWidget != null) leadingWidget,
-              _buildText(),
-              _buildTextField(),
-              if (trailing != null) trailing!,
-            ],
-          ),
+    final child = FlowyOptionDecorateBox(
+      color: backgroundColor,
+      showTopBorder: showTopBorder,
+      showBottomBorder: showBottomBorder,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+        child: Row(
+          children: [
+            if (leadingWidget != null) leadingWidget,
+            if (content != null) content!,
+            if (content == null) _buildText(),
+            if (content == null) _buildTextField(),
+            if (trailing != null) trailing!,
+          ],
         ),
       ),
     );
@@ -215,6 +229,7 @@ class FlowyOptionTile extends StatelessWidget {
           text!,
           fontSize: 16,
           color: textColor,
+          fontFamily: fontFamily,
         ),
       ),
     );