fix: settings ui improvements (AppFlowy-IO#5590)

* fix: settings ui improvements

* fix: replace placeholder + fix open folder

* fix: collapse sidebar button on windows

* test: fix tests after changes

* test: missed type cast

frontend/appflowy_flutter/integration_test/desktop/settings/notifications_settings_test.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
-import 'package:flutter/material.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -17,25 +17,25 @@ void main() {
       await tester.openSettingsPage(SettingsPage.notifications);
       await tester.pumpAndSettle();
 
-      final switchFinder = find.byType(Switch).first;
+      final toggleFinder = find.byType(Toggle).first;
 
       // Defaults to enabled
-      Switch switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, true);
+      Toggle toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, true);
 
       // Disable
-      await tester.tap(switchFinder);
+      await tester.tap(toggleFinder);
       await tester.pumpAndSettle();
 
-      switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, false);
+      toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, false);
 
       // Enable again
-      await tester.tap(switchFinder);
+      await tester.tap(toggleFinder);
       await tester.pumpAndSettle();
 
-      switchWidget = tester.widget(switchFinder);
-      expect(switchWidget.value, true);
+      toggleWidget = tester.widget(toggleFinder);
+      expect(toggleWidget.value, true);
     });
   });
 }

frontend/appflowy_flutter/lib/core/frameless_window.dart

@@ -1,15 +1,16 @@
 import 'dart:io';
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/shared/window_title_bar.dart';
 import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/application/home/home_setting_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class CocoaWindowChannel {
@@ -122,15 +123,21 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
 
     return FlowyTooltip(
       richMessage: textSpan,
-      child: FlowyIconButton(
-        hoverColor: Colors.transparent,
-        onPressed: () => context
+      child: Listener(
+        behavior: HitTestBehavior.translucent,
+        onPointerDown: (_) => context
             .read<HomeSettingBloc>()
             .add(const HomeSettingEvent.collapseMenu()),
-        iconPadding: const EdgeInsets.all(4.0),
-        icon: context.read<HomeSettingBloc>().state.isMenuCollapsed
-            ? const FlowySvg(FlowySvgs.show_menu_s)
-            : const FlowySvg(FlowySvgs.hide_menu_m),
+        child: FlowyHover(
+          child: Container(
+            width: 24,
+            padding: const EdgeInsets.all(4),
+            child: const RotatedBox(
+              quarterTurns: 2,
+              child: FlowySvg(FlowySvgs.hide_menu_s),
+            ),
+          ),
+        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/toolbar/calendar_layout_setting.dart

@@ -1,16 +1,16 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/setting/property_bloc.dart';
 import 'package:appflowy/plugins/database/calendar/application/calendar_setting_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.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/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 /// Widget that displays a list of settings that alters the appearance of the
@@ -325,7 +325,6 @@ Widget _toggleItem({
           Toggle(
             value: value,
             onChanged: (value) => onToggle(!value),
-            style: ToggleStyle.big,
             padding: EdgeInsets.zero,
           ),
         ],

frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart

@@ -1,5 +1,7 @@
 import 'dart:typed_data';
 
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
@@ -11,12 +13,10 @@ import 'package:appflowy/plugins/database/grid/presentation/widgets/common/type_
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy/workspace/presentation/widgets/dialogs.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/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'field_type_list.dart';
@@ -258,7 +258,6 @@ enum FieldAction {
         onChanged: (_) => context
             .read<FieldEditorBloc>()
             .add(const FieldEditorEvent.toggleWrapCellContent()),
-        style: ToggleStyle.big,
         padding: EdgeInsets.zero,
       );
     }

frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/date/date_time_format.dart

@@ -1,12 +1,12 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.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/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 
 class DateFormatButton extends StatelessWidget {
   const DateFormatButton({
@@ -248,7 +248,6 @@ class IncludeTimeButton extends StatelessWidget {
             Toggle(
               value: value,
               onChanged: onChanged,
-              style: ToggleStyle.big,
               padding: EdgeInsets.zero,
             ),
           ],

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

@@ -9,7 +9,6 @@ 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/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/protobuf.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -74,7 +73,6 @@ class DatabaseGroupList extends StatelessWidget {
                         value: !state.layoutSettings.hideUngroupedColumn,
                         onChanged: (value) =>
                             _updateLayoutSettings(state.layoutSettings, value),
-                        style: ToggleStyle.big,
                         padding: EdgeInsets.zero,
                       ),
                     ],

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

@@ -22,7 +22,6 @@ import 'package:appflowy/workspace/presentation/settings/widgets/files/settings_
 import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:dotted_border/dotted_border.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:flowy_infra/theme_extension.dart';
@@ -288,65 +287,22 @@ class _ImportDataFieldState extends State<_ImportDataField> {
           (_) => _showToast(LocaleKeys.settings_menu_importFailed.tr()),
         ),
         builder: (context, state) {
-          return DottedBorder(
-            radius: const Radius.circular(8),
-            dashPattern: const [2, 2],
-            borderType: BorderType.RRect,
-            color: Theme.of(context).colorScheme.primary,
-            child: Padding(
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                children: [
-                  // When dragging files are enabled
-                  // FlowyText.regular('Drag file here or'),
-                  // const VSpace(8),
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      SizedBox(
-                        height: 42,
-                        child: FlowyTextButton(
-                          LocaleKeys.settings_manageDataPage_importData_action
-                              .tr(),
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: 24,
-                            vertical: 12,
-                          ),
-                          fontWeight: FontWeight.w600,
-                          radius: BorderRadius.circular(12),
-                          fillColor: Theme.of(context).colorScheme.primary,
-                          hoverColor: const Color(0xFF005483),
-                          fontHoverColor: Colors.white,
-                          onPressed: () async {
-                            final path = await getIt<FilePickerService>()
-                                .getDirectoryPath();
-                            if (path == null || !context.mounted) {
-                              return;
-                            }
-
-                            context.read<SettingFileImportBloc>().add(
-                                  SettingFileImportEvent
-                                      .importAppFlowyDataFolder(
-                                    path,
-                                  ),
-                                );
-                          },
-                        ),
-                      ),
-                    ],
-                  ),
-                  const VSpace(8),
-                  FlowyText.regular(
-                    LocaleKeys.settings_manageDataPage_importData_description
-                        .tr(),
-                    // 'Supported filetypes:\nCSV, Notion, Text, and Markdown',
-                    maxLines: 3,
-                    lineHeight: 1.5,
-                    textAlign: TextAlign.center,
-                  ),
-                ],
-              ),
-            ),
+          return SingleSettingAction(
+            label:
+                LocaleKeys.settings_manageDataPage_importData_description.tr(),
+            labelMaxLines: 2,
+            buttonLabel:
+                LocaleKeys.settings_manageDataPage_importData_action.tr(),
+            onPressed: () async {
+              final path = await getIt<FilePickerService>().getDirectoryPath();
+              if (path == null || !context.mounted) {
+                return;
+              }
+
+              context
+                  .read<SettingFileImportBloc>()
+                  .add(SettingFileImportEvent.importAppFlowyDataFolder(path));
+            },
           );
         },
       ),
@@ -496,7 +452,7 @@ class _DataPathActions extends StatelessWidget {
           label:
               LocaleKeys.settings_manageDataPage_dataStorage_actions_open.tr(),
           icon: const FlowySvg(FlowySvgs.folder_m, size: Size.square(20)),
-          onPressed: () => afLaunchUrlString('file://$currentPath'),
+          onPressed: () => afLaunchUrl(Uri.file(currentPath)),
         ),
       ],
     );