fix: improve color selector (#5743)

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart

@@ -299,10 +299,16 @@ class ConfirmPopup extends StatefulWidget {
   final String title;
   final String description;
   final VoidCallback onConfirm;
-  final String? confirmLabel;
   final Color? confirmButtonColor;
   final ConfirmPopupStyle style;
 
+  /// The label of the confirm button.
+  ///
+  /// Defaults to 'Delete' for [ConfirmPopupStyle.cancelAndOk] style.
+  /// Defaults to 'Ok' for [ConfirmPopupStyle.onlyOk] style.
+  ///
+  final String? confirmLabel;
+
   @override
   State<ConfirmPopup> createState() => _ConfirmPopupState();
 }

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart

@@ -15,6 +15,7 @@ import 'package:appflowy/workspace/application/settings/date_time/date_format_ex
 import 'package:appflowy/workspace/application/settings/date_time/time_format_ext.dart';
 import 'package:appflowy/workspace/application/settings/workspace/workspace_settings_bloc.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/af_dropdown_menu_entry.dart';
@@ -31,6 +32,7 @@ import 'package:appflowy/workspace/presentation/settings/shared/settings_input_f
 import 'package:appflowy/workspace/presentation/settings/shared/settings_radio_select.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/single_setting_action.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -44,7 +46,6 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
-import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:google_fonts/google_fonts.dart';
 
@@ -1144,9 +1145,21 @@ class _DocumentCursorColorSetting extends StatelessWidget {
         return SettingListTile(
           label: label,
           resetButtonKey: const Key('DocumentCursorColorResetButton'),
-          onResetRequested: () => context
+          onResetRequested: () {
+            showConfirmDialog(
+              context: context,
+              title:
+                  LocaleKeys.settings_workspacePage_resetCursorColor_title.tr(),
+              description: LocaleKeys
+                  .settings_workspacePage_resetCursorColor_description
+                  .tr(),
+              style: ConfirmPopupStyle.cancelAndOk,
+              confirmLabel: LocaleKeys.settings_common_reset.tr(),
+              onConfirm: () => context
                 ..read<AppearanceSettingsCubit>().resetDocumentCursorColor()
                 ..read<DocumentAppearanceCubit>().syncCursorColor(null),
+            );
+          },
           trailing: [
             DocumentColorSettingButton(
               key: const Key('DocumentCursorColorSettingButton'),
@@ -1202,9 +1215,21 @@ class _DocumentSelectionColorSetting extends StatelessWidget {
         return SettingListTile(
           label: label,
           resetButtonKey: const Key('DocumentSelectionColorResetButton'),
-          onResetRequested: () => context
+          onResetRequested: () {
+            showConfirmDialog(
+              context: context,
+              title: LocaleKeys.settings_workspacePage_resetSelectionColor_title
+                  .tr(),
+              description: LocaleKeys
+                  .settings_workspacePage_resetSelectionColor_description
+                  .tr(),
+              style: ConfirmPopupStyle.cancelAndOk,
+              confirmLabel: LocaleKeys.settings_common_reset.tr(),
+              onConfirm: () => context
                 ..read<AppearanceSettingsCubit>().resetDocumentSelectionColor()
                 ..read<DocumentAppearanceCubit>().syncSelectionColor(null),
+            );
+          },
           trailing: [
             DocumentColorSettingButton(
               currentColor: state.selectionColor ??

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/document_color_setting_button.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/util/color_to_hex_string.dart';
@@ -9,7 +11,6 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
-import 'package:flutter/material.dart';
 
 class DocumentColorSettingButton extends StatefulWidget {
   const DocumentColorSettingButton({
@@ -271,13 +272,13 @@ String? validateOpacityValue(String? value) {
   return null;
 }
 
-const _kColorCircleWidth = 46.0;
-const _kColorCircleHeight = 46.0;
-const _kColorCircleRadius = 23.0;
+const _kColorCircleWidth = 32.0;
+const _kColorCircleHeight = 32.0;
+const _kColorCircleRadius = 20.0;
 const _kColorOpacityThumbRadius = 23.0;
 const _kDialogButtonPaddingHorizontal = 24.0;
 const _kDialogButtonPaddingVertical = 12.0;
-const _kColorsColumnSpacing = 3.0;
+const _kColorsColumnSpacing = 12.0;
 
 class _ColorPicker extends StatelessWidget {
   const _ColorPicker({
@@ -292,8 +293,7 @@ class _ColorPicker extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return SingleChildScrollView(
-      child: ColorPicker(
+    return ColorPicker(
       width: _kColorCircleWidth,
       height: _kColorCircleHeight,
       borderRadius: _kColorCircleRadius,
@@ -301,6 +301,8 @@ class _ColorPicker extends StatelessWidget {
       opacityThumbRadius: _kColorOpacityThumbRadius,
       columnSpacing: _kColorsColumnSpacing,
       enableTooltips: false,
+      hasBorder: true,
+      borderColor: theme.colorScheme.outline,
       pickersEnabled: const {
         ColorPickerType.both: false,
         ColorPickerType.primary: true,
@@ -316,7 +318,6 @@ class _ColorPicker extends StatelessWidget {
         style: theme.textTheme.labelLarge,
       ),
       onColorChanged: onColorChanged,
-      ),
     );
   }
 }
@@ -377,28 +378,37 @@ void _showColorPickerDialog({
   required Color currentColor,
   required void Function(Color) updateColor,
 }) {
-  final style = Theme.of(context);
   Color selectedColor = currentColor;
 
   showDialog(
     context: context,
     barrierColor: const Color.fromARGB(128, 0, 0, 0),
-    builder: (context) {
-      return AlertDialog(
-        icon: const FlowySvg(
-          FlowySvgs.m_aa_color_s,
-        ),
-        title: Text(
+    builder: (context) => FlowyDialog(
+      expandHeight: false,
+      title: Row(
+        children: [
+          const FlowySvg(FlowySvgs.m_aa_color_s),
+          const HSpace(12),
+          FlowyText(
             title ??
                 LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
-          style: style.textTheme.titleLarge,
+            fontSize: 20,
           ),
-        content: _ColorPicker(
+        ],
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _ColorPicker(
             selectedColor: selectedColor,
             onColorChanged: (color) => selectedColor = color,
           ),
-        actionsPadding: const EdgeInsets.all(8),
-        actions: [
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                const HSpace(8),
                 _ColorPickerActions(
                   onReset: () {
                     updateColor(currentColor);
@@ -410,7 +420,10 @@ void _showColorPickerDialog({
                   },
                 ),
               ],
-      );
-    },
+            ),
+          ),
+        ],
+      ),
+    ),
   );
 }

frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/tasks/app_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
@@ -9,7 +11,6 @@ import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
 import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
 import 'package:toastification/toastification.dart';
 
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
@@ -348,6 +349,8 @@ Future<void> showConfirmDialog({
   required String title,
   required String description,
   VoidCallback? onConfirm,
+  String? confirmLabel,
+  ConfirmPopupStyle style = ConfirmPopupStyle.onlyOk,
 }) {
   return showDialog(
     context: context,
@@ -362,7 +365,8 @@ Future<void> showConfirmDialog({
             title: title,
             description: description,
             onConfirm: () => onConfirm?.call(),
-            style: ConfirmPopupStyle.onlyOk,
+            confirmLabel: confirmLabel,
+            style: style,
           ),
         ),
       );

frontend/resources/translations/en.json

@@ -404,6 +404,14 @@
           "dark": "Dark"
         }
       },
+      "resetCursorColor": {
+        "title": "Reset document cursor color",
+        "description": "Are you sure you want to reset the cursor color?"
+      },
+      "resetSelectionColor": {
+        "title": "Reset document selection color",
+        "description": "Are you sure you want to reset the selection color?"
+      },
       "theme": {
         "title": "Theme",
         "description": "Select a preset theme, or upload your own custom theme.",