fix: UI issues in dark mode (#2344)

* fix: date cell UI issue #2301

* chore: update font size toggle button hover effect

* chore: update more button background

* chore: update NumberTypeOptionWidge hover style

* chore: improve the hover color in _SelectOptionColorCell

* chore: update User setting UI

* fix: delete unused file

* fix: remove the hover effect when delete button is disable

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart

@@ -203,6 +203,7 @@ class _DeleteFieldButton extends StatelessWidget {
       builder: (context, state) {
         final enable = !state.canDelete && !state.isGroupField;
         Widget button = FlowyButton(
+          disable: !enable,
           text: FlowyText.medium(
             LocaleKeys.grid_field_delete.tr(),
             color: enable ? null : Theme.of(context).disabledColor,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart

@@ -1,6 +1,5 @@
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/field_entities.pb.dart';
 import 'package:flutter/material.dart';
@@ -58,15 +57,12 @@ class FieldTypeCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         text: FlowyText.medium(
           fieldType.title(),
-          color: AFThemeExtension.of(context).textColor,
         ),
         onTap: () => onSelectField(fieldType),
-        leftIcon: svgWidget(
-          fieldType.iconName(),
-          color: Theme.of(context).iconTheme.color,
+        leftIcon: FlowySvg(
+          name: fieldType.iconName(),
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/plugins/database_view/application/field/type_option/typ
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/field_entities.pb.dart';
@@ -113,20 +112,12 @@ class _SwitchFieldButton extends StatelessWidget {
   Widget _buildMoreButton(BuildContext context) {
     final bloc = context.read<FieldTypeOptionEditBloc>();
     return FlowyButton(
-      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       text: FlowyText.medium(
         bloc.state.field.fieldType.title(),
-        color: AFThemeExtension.of(context).textColor,
       ),
       margin: GridSize.typeOptionContentInsets,
-      leftIcon: svgWidget(
-        bloc.state.field.fieldType.iconName(),
-        color: Theme.of(context).iconTheme.color,
-      ),
-      rightIcon: svgWidget(
-        "grid/more",
-        color: Theme.of(context).iconTheme.color,
-      ),
+      leftIcon: FlowySvg(name: bloc.state.field.fieldType.iconName()),
+      rightIcon: const FlowySvg(name: 'grid/more'),
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart

@@ -233,7 +233,7 @@ class DateFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(name: 'grid/checkmark');
     }
 
     return SizedBox(
@@ -317,7 +317,7 @@ class TimeFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(name: 'grid/checkmark');
     }
 
     return SizedBox(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart

@@ -3,7 +3,6 @@ import 'package:appflowy/plugins/database_view/application/field/type_option/num
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/format.pbenum.dart';
 import 'package:flutter/material.dart';
@@ -60,15 +59,10 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
           final selectNumUnitButton = SizedBox(
             height: GridSize.popoverItemHeight,
             child: FlowyButton(
-              hoverColor: AFThemeExtension.of(context).lightGreyHover,
               margin: GridSize.typeOptionContentInsets,
-              rightIcon: svgWidget(
-                "grid/more",
-                color: AFThemeExtension.of(context).textColor,
-              ),
+              rightIcon: const FlowySvg(name: 'grid/more'),
               text: FlowyText.regular(
                 state.typeOption.format.title(),
-                color: AFThemeExtension.of(context).textColor,
               ),
             ),
           );
@@ -79,7 +73,6 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
             alignment: Alignment.centerLeft,
             child: FlowyText.medium(
               LocaleKeys.grid_field_numberFormat.tr(),
-              color: AFThemeExtension.of(context).textColor,
             ),
           );
           return Padding(
@@ -188,7 +181,9 @@ class NumberFormatCell extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget? checkmark;
     if (isSelected) {
-      checkmark = svgWidget("grid/checkmark");
+      checkmark = const FlowySvg(
+        name: 'grid/checkmark',
+      );
     }
 
     return SizedBox(

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart

@@ -105,15 +105,10 @@ class _DeleteTag extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         text: FlowyText.medium(
           LocaleKeys.grid_selectOption_deleteTag.tr(),
-          color: AFThemeExtension.of(context).textColor,
-        ),
-        leftIcon: svgWidget(
-          "grid/delete",
-          color: Theme.of(context).iconTheme.color,
         ),
+        leftIcon: const FlowySvg(name: 'grid/delete'),
         onTap: () {
           context
               .read<EditSelectOptionBloc>()
@@ -226,7 +221,11 @@ class _SelectOptionColorCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        text: FlowyText.medium(color.optionName()),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          color.optionName(),
+          color: AFThemeExtension.of(context).textColor,
+        ),
         leftIcon: colorIcon,
         rightIcon: checkmark,
         onTap: () {

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart

@@ -20,7 +20,7 @@ class ChecklistProgressBar extends StatelessWidget {
       percent: percent,
       padding: EdgeInsets.zero,
       progressColor: Theme.of(context).colorScheme.primary,
-      backgroundColor: AFThemeExtension.of(context).progressBarBGcolor,
+      backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
       barRadius: const Radius.circular(5),
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -24,6 +25,8 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
 
   @override
   Widget build(BuildContext context) {
+    final selectedBgColor = AFThemeExtension.of(context).toggleButtonBGColor;
+    final foregroundColor = Theme.of(context).colorScheme.onBackground;
     return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
       builder: (context, state) {
         return Column(
@@ -43,10 +46,16 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
               onPressed: (int index) {
                 _updateSelectedFontSize(_fontSizes[index].item2);
               },
+              color: foregroundColor,
               borderRadius: const BorderRadius.all(Radius.circular(5)),
-              selectedColor: Theme.of(context).colorScheme.tertiary,
-              fillColor: Theme.of(context).colorScheme.primary,
-              color: Theme.of(context).hintColor,
+              borderColor: foregroundColor,
+              borderWidth: 0.5,
+              // when selected
+              selectedColor: foregroundColor,
+              selectedBorderColor: foregroundColor,
+              fillColor: selectedBgColor,
+              // when hover
+              hoverColor: selectedBgColor.withOpacity(0.3),
               constraints: const BoxConstraints(
                 minHeight: 40.0,
                 minWidth: 80.0,

frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart

@@ -12,6 +12,7 @@ class DocumentMoreButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PopupMenuButton<int>(
+      color: Theme.of(context).colorScheme.surfaceVariant,
       offset: const Offset(0, 30),
       itemBuilder: (context) {
         return [