Apply new style Preferences part in Settings

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/manage_account/presentation/preferences/preferences_view.dart

@@ -3,9 +3,11 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/setting_option_type.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/preferences/preferences_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/preferences/widgets/setting_option_item.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart';
 
 class PreferencesView extends GetWidget<PreferencesController> with AppLoaderMixin {
   const PreferencesView({super.key});
@@ -41,30 +43,39 @@ class PreferencesView extends GetWidget<PreferencesController> with AppLoaderMix
                 controller.responsiveUtils,
               ),
               width: double.infinity,
-              padding: SettingsUtils.getPreferencesSettingPadding(
+              padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 22),
-                context,
+              child: Column(
-                controller.responsiveUtils,
+                crossAxisAlignment: CrossAxisAlignment.start,
-              ),
+                children: [
-              child: Obx(() {
+                  if (controller.responsiveUtils.isWebDesktop(context))
-                final settingOption = controller.settingOption.value;
+                    const SettingHeaderWidget(
+                      menuItem: AccountMenuItem.preferences,
+                      padding: EdgeInsets.only(bottom: 21),
+                    ),
+                  Obx(() {
+                    final settingOption = controller.settingOption.value;
 
-                if (settingOption == null) return const SizedBox.shrink();
+                    if (settingOption == null) return const SizedBox.shrink();
 
-                final settingOptionList = SettingOptionType.values.toList();
+                    final settingOptionList = SettingOptionType.values.toList();
 
-                return ListView.separated(
+                    return Expanded(
-                  itemCount: settingOptionList.length,
+                      child: ListView.separated(
-                  itemBuilder: (context, index) {
+                        itemCount: settingOptionList.length,
-                    return SettingOptionItem(
+                        itemBuilder: (context, index) {
-                      imagePaths: controller.imagePaths,
+                          return SettingOptionItem(
-                      settingOption: settingOption,
+                            imagePaths: controller.imagePaths,
-                      optionType: settingOptionList[index],
+                            settingOption: settingOption,
-                      onTapSettingOptionAction: controller.updateStateSettingOption,
+                            optionType: settingOptionList[index],
+                            onTapSettingOptionAction: controller.updateStateSettingOption,
+                          );
+                        },
+                        separatorBuilder: (_, __) => const SizedBox(height: 60),
+                      ),
                     );
-                  },
+                  }),
-                  separatorBuilder: (_, __) => const SizedBox(height: 60),
+                ],
-                );
+              ),
-              }),
             ),
           ),
         ),

lib/features/manage_account/presentation/preferences/widgets/setting_option_item.dart

@@ -1,6 +1,6 @@
-
+import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/constants/constants_ui.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:server_settings/server_settings/tmail_server_settings.dart';
@@ -34,20 +34,22 @@ class SettingOptionItem extends StatelessWidget {
       children: [
         Text(
           optionType.getTitle(appLocalizations),
-          style: const TextStyle(
+          style: ThemeUtils.textStyleInter600().copyWith(
-            fontFamily: ConstantsUI.fontApp,
+            fontSize: 14,
-            fontSize: 15,
+            height: 20 / 14,
-            height: 20 / 15,
+            letterSpacing: 0.25,
-            fontWeight: FontWeight.bold,
+            color: AppColor.gray424244,
-            color: Colors.black,
           ),
         ),
         Padding(
-          padding: const EdgeInsets.symmetric(vertical: 24),
+          padding: const EdgeInsets.symmetric(vertical: 8),
           child: Text(
             optionType.getExplanation(appLocalizations),
-            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+            style: ThemeUtils.textStyleInter400.copyWith(
-              color: Colors.black,
+              fontSize: 14,
+              height: 21.01 / 14,
+              letterSpacing: -0.15,
+              color: AppColor.gray424244.withOpacity(0.64),
             ),
           ),
         ),
@@ -71,7 +73,7 @@ class SettingOptionItem extends StatelessWidget {
             Expanded(
               child: Text(
                 optionType.getToggleDescription(appLocalizations),
-                style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                style: ThemeUtils.textStyleBodyBody2().copyWith(
                   color: Colors.black,
                 ),
               ),

lib/features/manage_account/presentation/widgets/setting_header_widget.dart

@@ -17,22 +17,34 @@ class SettingHeaderWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final appLocalizations = AppLocalizations.of(context);
-    return Padding(
+
-      padding: padding ?? const EdgeInsets.all(16),
+    final children = [
-      child: Column(
+      Text(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        menuItem.getName(appLocalizations),
-        children: [
+        style: ThemeUtils.textStyleInter600().copyWith(
-          Text(
+          color: Colors.black,
-            menuItem.getName(appLocalizations),
+        ),
-            style: ThemeUtils.textStyleHeadingH6(color: Colors.black),
+      ),
-          ),
+      if (menuItem.getExplanation(appLocalizations).isNotEmpty)
-          const SizedBox(height: 8),
+        Padding(
-          Text(
+          padding: const EdgeInsets.only(top: 8),
+          child: Text(
             menuItem.getExplanation(appLocalizations),
             style: ThemeUtils.textStyleBodyBody1(color: AppColor.steelGray400),
           ),
-        ],
+        ),
-      ),
+    ];
+
+    final child = children.length == 1
+        ? children.first
+        : Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: children,
+          );
+
+    return Padding(
+      padding: padding ?? const EdgeInsets.all(16),
+      child: child,
     );
   }
-}
+}