fix: mobile UI issues (#4561)

* fix: don't re-request focus after editing a cell

* fix: card detail more actions

* fix: select option indicators

* fix: add field bottom sheet revamp

* fix: edit field type bottom sheet

* chore: bump spacing between header and first row of field types

* fix: grid spacing

* refactor: use svg and background colors

* refactor: use shared component

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_url_cell.dart

@@ -165,7 +165,7 @@ class _VisitURLAccessoryState extends State<_VisitURLAccessory>
         preferBelow: false,
         child: _URLAccessoryIconContainer(
           child: FlowySvg(
-            FlowySvgs.attach_s,
+            FlowySvgs.url_s,
             color: AFThemeExtension.of(context).textColor,
           ),
         ),

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

@@ -161,6 +161,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
           ),
           const VSpace(22),
           _OptionList(
+            fieldType: widget.cellController.fieldType,
             onCreateOption: (optionName) {
               context
                   .read<SelectOptionCellEditorBloc>()
@@ -240,11 +241,13 @@ class _SearchField extends StatelessWidget {
 
 class _OptionList extends StatelessWidget {
   const _OptionList({
+    required this.fieldType,
     required this.onCreateOption,
     required this.onCheck,
     required this.onMoreOptions,
   });
 
+  final FieldType fieldType;
   final void Function(String optionName) onCreateOption;
   final void Function(SelectOptionPB option, bool value) onCheck;
   final void Function(SelectOptionPB option) onMoreOptions;
@@ -272,6 +275,7 @@ class _OptionList extends StatelessWidget {
         cells.addAll(
           state.options.map(
             (option) => _SelectOption(
+              fieldType: fieldType,
               option: option,
               checked: state.selectedOptions.contains(option),
               onCheck: (value) => onCheck(option, value),
@@ -295,12 +299,14 @@ class _OptionList extends StatelessWidget {
 
 class _SelectOption extends StatelessWidget {
   const _SelectOption({
+    required this.fieldType,
     required this.option,
     required this.checked,
     required this.onCheck,
     required this.onMoreOptions,
   });
 
+  final FieldType fieldType;
   final SelectOptionPB option;
   final bool checked;
   final void Function(bool value) onCheck;
@@ -316,13 +322,14 @@ class _SelectOption extends StatelessWidget {
         onTap: () => onCheck(!checked),
         child: Row(
           children: [
-            // check icon
-            FlowySvg(
-              checked
-                  ? FlowySvgs.m_checkbox_checked_s
-                  : FlowySvgs.m_checkbox_uncheck_s,
-              size: const Size.square(24.0),
-              blendMode: checked ? null : BlendMode.srcIn,
+            // checked or selected icon
+            SizedBox(
+              height: 20,
+              width: 20,
+              child: _IsSelectedIndicator(
+                fieldType: fieldType,
+                isSelected: checked,
+              ),
             ),
             // padding
             const HSpace(12),
@@ -480,3 +487,49 @@ class _MoreOptionsState extends State<_MoreOptions> {
     );
   }
 }
+
+class _IsSelectedIndicator extends StatelessWidget {
+  const _IsSelectedIndicator({
+    required this.fieldType,
+    required this.isSelected,
+  });
+
+  final FieldType fieldType;
+  final bool isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return isSelected
+        ? DecoratedBox(
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: Theme.of(context).colorScheme.primary,
+            ),
+            child: Center(
+              child: fieldType == FieldType.MultiSelect
+                  ? FlowySvg(
+                      FlowySvgs.checkmark_tiny_s,
+                      color: Theme.of(context).colorScheme.onPrimary,
+                    )
+                  : Container(
+                      width: 7.5,
+                      height: 7.5,
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: Theme.of(context).colorScheme.onPrimary,
+                      ),
+                    ),
+            ),
+          )
+        : DecoratedBox(
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              border: Border.fromBorderSide(
+                BorderSide(
+                  color: Theme.of(context).dividerColor,
+                ),
+              ),
+            ),
+          );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database/widgets/group/database_group.dart

@@ -5,7 +5,7 @@ import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/setting/group_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/common/type_option_separator.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/board_entities.pb.dart';
@@ -154,7 +154,7 @@ class _GridGroupCell extends StatelessWidget {
             color: AFThemeExtension.of(context).textColor,
           ),
           leftIcon: FlowySvg(
-            fieldInfo.fieldType.icon(),
+            fieldInfo.fieldType.svgData,
             color: Theme.of(context).iconTheme.color,
           ),
           rightIcon: rightIcon,

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

@@ -6,8 +6,8 @@ import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/setting/property_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_editor.dart';
-import 'package:appflowy/plugins/database/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
+import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:collection/collection.dart';
@@ -167,7 +167,7 @@ class _DatabasePropertyCellState extends State<DatabasePropertyCell> {
               ),
               const HSpace(6.0),
               FlowySvg(
-                widget.fieldInfo.fieldType.icon(),
+                widget.fieldInfo.fieldType.svgData,
                 color: Theme.of(context).iconTheme.color,
               ),
             ],