refactor: ui improvement in appearance (#3553)

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/brightness_setting.dart

@@ -17,36 +17,37 @@ class BrightnessSetting extends StatelessWidget {
   const BrightnessSetting({required this.currentThemeMode, super.key});
 
   @override
-  Widget build(BuildContext context) => FlowyTooltip.delayed(
-        richMessage: themeModeTooltipTextSpan(
-          context,
-          LocaleKeys.settings_appearance_themeMode_label.tr(),
-        ),
-        child: ThemeSettingEntryTemplateWidget(
-          label: LocaleKeys.settings_appearance_themeMode_label.tr(),
-          onResetRequested:
-              context.read<AppearanceSettingsCubit>().resetThemeMode,
-          trailing: [
-            ThemeValueDropDown(
-              currentValue: _themeModeLabelText(currentThemeMode),
-              popupBuilder: (context) => Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  _themeModeItemButton(context, ThemeMode.light),
-                  _themeModeItemButton(context, ThemeMode.dark),
-                  _themeModeItemButton(context, ThemeMode.system),
-                ],
-              ),
+  Widget build(BuildContext context) {
+    return FlowyTooltip.delayed(
+      margin: const EdgeInsets.only(left: 180),
+      richMessage: themeModeTooltipTextSpan(
+        LocaleKeys.settings_appearance_themeMode_label.tr(),
+      ),
+      child: ThemeSettingEntryTemplateWidget(
+        label: LocaleKeys.settings_appearance_themeMode_label.tr(),
+        onResetRequested:
+            context.read<AppearanceSettingsCubit>().resetThemeMode,
+        trailing: [
+          ThemeValueDropDown(
+            currentValue: _themeModeLabelText(currentThemeMode),
+            popupBuilder: (context) => Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _themeModeItemButton(context, ThemeMode.light),
+                _themeModeItemButton(context, ThemeMode.dark),
+                _themeModeItemButton(context, ThemeMode.system),
+              ],
             ),
-          ],
-        ),
-      );
+          ),
+        ],
+      ),
+    );
+  }
 
-  TextSpan themeModeTooltipTextSpan(BuildContext context, String hintText) =>
-      TextSpan(
+  TextSpan themeModeTooltipTextSpan(String hintText) => TextSpan(
         children: [
           TextSpan(
-            text: "$hintText\n",
+            text: "${LocaleKeys.settings_files_change.tr()} $hintText\n",
           ),
           TextSpan(
             text: Platform.isMacOS ? "⌘+Shift+L" : "Ctrl+Shift+L",

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -25,17 +25,27 @@ class SettingsAppearanceView extends StatelessWidget {
                   currentTheme: state.appTheme.themeName,
                   bloc: context.read<DynamicPluginBloc>(),
                 ),
-                BrightnessSetting(currentThemeMode: state.themeMode),
+                BrightnessSetting(
+                  currentThemeMode: state.themeMode,
+                ),
                 const Divider(),
-                ThemeFontFamilySetting(currentFontFamily: state.font),
+                ThemeFontFamilySetting(
+                  currentFontFamily: state.font,
+                ),
                 const Divider(),
                 LayoutDirectionSetting(
                   currentLayoutDirection: state.layoutDirection,
                 ),
-                TextDirectionSetting(currentTextDirection: state.textDirection),
+                TextDirectionSetting(
+                  currentTextDirection: state.textDirection,
+                ),
                 const Divider(),
-                DateFormatSetting(currentFormat: state.dateFormat),
-                TimeFormatSetting(currentFormat: state.timeFormat),
+                DateFormatSetting(
+                  currentFormat: state.dateFormat,
+                ),
+                TimeFormatSetting(
+                  currentFormat: state.timeFormat,
+                ),
                 const Divider(),
                 CreateFileSettings(),
               ],

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart

@@ -19,6 +19,9 @@ class SettingsMenu extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final bool showSyncSetting = isCloudEnabled &&
+        context.read<SettingsDialogBloc>().state.userProfile.authType !=
+            AuthTypePB.Local;
     return Column(
       children: [
         SettingsMenuElement(
@@ -58,11 +61,12 @@ class SettingsMenu extends StatelessWidget {
           icon: Icons.account_box_outlined,
           changeSelectedPage: changeSelectedPage,
         ),
-
+        if (showSyncSetting)
+          const SizedBox(
+            height: 10,
+          ),
         // Only show supabase setting if supabase is enabled and the current auth type is not local
-        if (isCloudEnabled &&
-            context.read<SettingsDialogBloc>().state.userProfile.authType !=
-                AuthTypePB.Local)
+        if (showSyncSetting)
           SettingsMenuElement(
             page: SettingsPage.syncSetting,
             selectedPage: currentPage,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart

@@ -9,8 +9,10 @@ class FlowyTooltip {
     bool? preferBelow,
     Duration? showDuration,
     Widget? child,
+    EdgeInsetsGeometry? margin,
   }) {
     return Tooltip(
+      margin: margin,
       waitDuration: _tooltipWaitDuration,
       message: message,
       richMessage: richMessage,