chore: mobile grid dark mode improvements (#4821)

* chore: field type grid

* chore: don't allow hiding primary field

* chore: bottom sheets

* chore: checklist bottom sheet

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

@@ -20,6 +20,7 @@ class OptionColorList extends StatelessWidget {
       crossAxisCount: 6,
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
+      padding: EdgeInsets.zero,
       children: SelectOptionColorPB.values.map(
         (colorPB) {
           final color = colorPB.toColor(context);

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -65,7 +65,7 @@ Future<T?> showMobileBottomSheet<T>(
 
   backgroundColor ??= Theme.of(context).brightness == Brightness.light
       ? const Color(0xFFF7F8FB)
-      : const Color(0xFF626364);
+      : const Color(0xFF23262B);
 
   return showModalBottomSheet<T>(
     context: context,

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart

@@ -39,7 +39,7 @@ Future<T?> showTransitionMobileBottomSheet<T>(
 
   backgroundColor ??= Theme.of(context).brightness == Brightness.light
       ? const Color(0xFFF7F8FB)
-      : const Color(0xFF626364);
+      : const Color(0xFF23262B);
 
   return Navigator.of(
     context,

frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart

@@ -55,7 +55,7 @@ class _MobileDateCellEditScreenState extends State<MobileDateCellEditScreen> {
       minChildSize: 0.4,
       snapSizes: const [0.4, 0.7, 1.0],
       builder: (_, controller) => Material(
-        color: Theme.of(context).colorScheme.secondaryContainer,
+        color: Colors.transparent,
         child: ListView(
           controller: controller,
           children: [

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

@@ -47,7 +47,9 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
           .map(
             (fieldType) => TypeOptionMenuItemValue(
               value: fieldType,
-              backgroundColor: fieldType.mobileIconBackgroundColor,
+              backgroundColor: Theme.of(context).brightness == Brightness.light
+                  ? fieldType.mobileIconBackgroundColor
+                  : fieldType.mobileIconBackgroundColorDark,
               text: fieldType.i18n,
               icon: fieldType.svgData,
               onTap: (context, fieldType) =>
@@ -121,7 +123,6 @@ void showQuickEditField(
 ) {
   showMobileBottomSheet(
     context,
-    backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
     showDragHandle: true,
     builder: (context) {
       return SingleChildScrollView(

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

@@ -208,7 +208,9 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
   Widget build(BuildContext context) {
     final option = _buildOption();
     return Container(
-      color: Theme.of(context).colorScheme.secondaryContainer,
+      color: Theme.of(context).brightness == Brightness.light
+          ? const Color(0xFFF7F8FB)
+          : const Color(0xFF23262B),
       height: MediaQuery.of(context).size.height,
       child: SingleChildScrollView(
         child: Column(
@@ -259,6 +261,7 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
             ],
             ..._buildOptionActions(),
             const _Divider(),
+            VSpace(MediaQuery.viewPaddingOf(context).bottom == 0 ? 28.0 : 16.0),
           ],
         ),
       ),
@@ -351,7 +354,7 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
     }
 
     return [
-      if (widget.actions.contains(FieldOptionAction.hide))
+      if (widget.actions.contains(FieldOptionAction.hide) && !widget.isPrimary)
         FlowyOptionTile.text(
           text: LocaleKeys.grid_field_hide.tr(),
           leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),

frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart

@@ -87,7 +87,11 @@ class _DatabaseViewSelectorButton extends StatelessWidget {
                 borderRadius: BorderRadius.all(Radius.circular(12)),
               ),
             ),
-            backgroundColor: const MaterialStatePropertyAll(Color(0x0F212729)),
+            backgroundColor: MaterialStatePropertyAll(
+              Theme.of(context).brightness == Brightness.light
+                  ? const Color(0x0F212729)
+                  : const Color(0x0FFFFFFF),
+            ),
             overlayColor: MaterialStatePropertyAll(
               Theme.of(context).colorScheme.secondary,
             ),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart

@@ -39,7 +39,6 @@ class MobileGridChecklistCellSkin extends IEditableChecklistCellSkin {
       ),
       onTap: () => showMobileBottomSheet(
         context,
-        backgroundColor: Theme.of(context).colorScheme.background,
         builder: (context) {
           return BlocProvider.value(
             value: bloc,

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart

@@ -44,7 +44,6 @@ class MobileGridDateCellSkin extends IEditableDateCellSkin {
       onTap: () {
         showMobileBottomSheet(
           context,
-          backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
           builder: (context) {
             return MobileDateCellEditScreen(
               controller: bloc.cellController,

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

@@ -230,7 +230,7 @@ class _ChecklistItemState extends State<_ChecklistItem> {
   void _showDeleteTaskBottomSheet() {
     showMobileBottomSheet(
       context,
-      padding: const EdgeInsets.only(top: 8, bottom: 32),
+      showDragHandle: true,
       builder: (_) => Column(
         mainAxisSize: MainAxisSize.min,
         children: [

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

@@ -421,7 +421,6 @@ class _MoreOptionsState extends State<_MoreOptions> {
 
   @override
   Widget build(BuildContext context) {
-    final color = Theme.of(context).colorScheme.secondaryContainer;
     return SingleChildScrollView(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -432,22 +431,18 @@ class _MoreOptionsState extends State<_MoreOptions> {
           const VSpace(16.0),
           Padding(
             padding: const EdgeInsets.only(left: 12.0),
-            child: ColoredBox(
+            child: FlowyText(
-              color: color,
+              LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(),
-              child: FlowyText(
+              color: Theme.of(context).hintColor,
-                LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(),
+              fontSize: 13,
-                color: Theme.of(context).hintColor,
-                fontSize: 13,
-              ),
             ),
           ),
           const VSpace(4.0),
           FlowyOptionDecorateBox(
             child: Padding(
-              padding: const EdgeInsets.only(
+              padding: const EdgeInsets.symmetric(
-                top: 12.0,
+                vertical: 12.0,
-                left: 6.0,
+                horizontal: 6.0,
-                right: 6.0,
               ),
               child: OptionColorList(
                 selectedColor: option.color,

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

@@ -147,7 +147,6 @@ void _showEditSortPanelFromToolbar(
 ) {
   showMobileBottomSheet(
     context,
-    backgroundColor: Theme.of(context).colorScheme.surface,
     showDragHandle: true,
     showDivider: false,
     useSafeArea: false,

frontend/appflowy_flutter/lib/util/field_type_extension.dart

@@ -42,14 +42,30 @@ extension FieldTypeExtension on FieldType {
   Color get mobileIconBackgroundColor => switch (this) {
         FieldType.RichText => const Color(0xFFBECCFF),
         FieldType.Number => const Color(0xFFCABDFF),
-        FieldType.DateTime => const Color(0xFFFDEDA7),
+        FieldType.URL => const Color(0xFFFFB9EF),
         FieldType.SingleSelect => const Color(0xFFBECCFF),
         FieldType.MultiSelect => const Color(0xFFBECCFF),
-        FieldType.URL => const Color(0xFFFFB9EF),
+        FieldType.DateTime => const Color(0xFFFDEDA7),
-        FieldType.Checkbox => const Color(0xFF98F4CD),
-        FieldType.Checklist => const Color(0xFF98F4CD),
         FieldType.LastEditedTime => const Color(0xFFFDEDA7),
         FieldType.CreatedTime => const Color(0xFFFDEDA7),
+        FieldType.Checkbox => const Color(0xFF98F4CD),
+        FieldType.Checklist => const Color(0xFF98F4CD),
+        FieldType.Relation => const Color(0xFFFDEDA7),
+        _ => throw UnimplementedError(),
+      };
+
+  // TODO(RS): inner icon color isn't always white
+  Color get mobileIconBackgroundColorDark => switch (this) {
+        FieldType.RichText => const Color(0xFF6859A7),
+        FieldType.Number => const Color(0xFF6859A7),
+        FieldType.URL => const Color(0xFFA75C96),
+        FieldType.SingleSelect => const Color(0xFF5366AB),
+        FieldType.MultiSelect => const Color(0xFF5366AB),
+        FieldType.DateTime => const Color(0xFFB0A26D),
+        FieldType.LastEditedTime => const Color(0xFFB0A26D),
+        FieldType.CreatedTime => const Color(0xFFB0A26D),
+        FieldType.Checkbox => const Color(0xFF42AD93),
+        FieldType.Checklist => const Color(0xFF42AD93),
         FieldType.Relation => const Color(0xFFFDEDA7),
         _ => throw UnimplementedError(),
       };

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart

@@ -74,10 +74,9 @@ class MobileAppearance extends BaseAppearance {
             outline: _hintColorInDarkMode,
             outlineVariant: Colors.black,
             //Snack bar
-            surface: const Color(0xff2F3030),
+            surface: const Color(0xFF171A1F),
             onSurface: const Color(0xffC5C6C7), // text/body color
           );
-
     final hintColor = brightness == Brightness.light
         ? const Color(0x991F2329)
         : _hintColorInDarkMode;