Apply new style Language section in Setting on desktop

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

core/lib/presentation/extensions/color_extension.dart

@@ -260,12 +260,14 @@ extension AppColor on Color {
   static const gray424244 = Color(0xFF424244);
   static const redFF3347 = Color(0xFFFF3347);
   static const gray686E76 = Color(0xFF686E76);
+  static const lightGrayEBEDF0 = Color(0xFFEBEDF0);
   static const textSecondary = Color(0xFF1C1B1F);
   static const profileMenuDivider = Color(0xFF1D192B);
   static const popupMenuItemHovered = Color(0xFFF8F8F8);
   static const secondaryContrastText = Color(0xFFFFFFFF);
   static const primaryLinShare = Color(0xFF007AFF);
   static const lightGrayEAEDF2 = Color(0xFFEAEDF2);
+  static const lightIconTertiary = Color(0xFFB8C1CC);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/views/button/tmail_button_widget.dart

@@ -44,6 +44,7 @@ class TMailButtonWidget extends StatelessWidget {
   final Color? hoverColor;
   final TextOverflow? textOverflow;
   final Alignment? alignment;
+  final bool isTextExpanded;
 
   const TMailButtonWidget({
     super.key,
@@ -81,6 +82,7 @@ class TMailButtonWidget extends StatelessWidget {
     this.hoverColor,
     this.textOverflow,
     this.alignment,
+    this.isTextExpanded = false,
   });
 
   factory TMailButtonWidget.fromIcon({
@@ -163,6 +165,7 @@ class TMailButtonWidget extends StatelessWidget {
     Color? hoverColor,
     TextOverflow? textOverflow,
     Alignment? alignment,
+    bool isTextExpanded = false,
   }) {
     return TMailButtonWidget(
       key: key,
@@ -189,48 +192,63 @@ class TMailButtonWidget extends StatelessWidget {
       hoverColor: hoverColor,
       textOverflow: textOverflow,
       alignment: alignment,
+      isTextExpanded: isTextExpanded,
     );
   }
 
   @override
   Widget build(BuildContext context) {
     Widget childWidget;
+    Widget? textWidget;
+    Widget? iconWidget;
+    Widget? trailingIconWidget;
 
+    if (text.isNotEmpty) {
+      textWidget = Text(
+        text,
+        textAlign: textAlign,
+        style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
+          fontSize: 12,
+          color: AppColor.colorTextButtonHeaderThread,
+        ),
+        maxLines: maxLines,
+        overflow: textOverflow ??
+            (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
+        softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
+      );
+    }
+
+    if (icon != null) {
+      iconWidget = SvgPicture.asset(
+        icon!,
+        width: iconSize,
+        height: iconSize,
+        fit: BoxFit.fill,
+        colorFilter: iconColor?.asFilter(),
+      );
+    }
+
+    if (trailingIcon != null) {
+      trailingIconWidget = Padding(
+        padding: EdgeInsetsDirectional.only(top: iconSpace),
+        child: SvgPicture.asset(
+          trailingIcon!,
+          width: trailingIconSize,
+          height: trailingIconSize,
+          fit: BoxFit.fill,
+          colorFilter: trailingIconColor?.asFilter(),
+        ),
+      );
+    }
     if (icon != null && text.isNotEmpty) {
       if (verticalDirection) {
         childWidget = Column(
           mainAxisSize: mainAxisSize,
           children: [
-            SvgPicture.asset(
+            iconWidget!,
-              icon!,
-              width: iconSize,
-              height: iconSize,
-              fit: BoxFit.fill,
-              colorFilter: iconColor?.asFilter()
-            ),
             SizedBox(height: iconSpace),
-            Text(
+            textWidget!,
-              text,
+            if (trailingIcon != null) trailingIconWidget!,
-              textAlign: textAlign,
-              style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-                fontSize: 12,
-                color: AppColor.colorTextButtonHeaderThread
-              ),
-              maxLines: maxLines,
-              overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-              softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-            ),
-            if (trailingIcon != null)
-              Padding(
-                padding: EdgeInsetsDirectional.only(top: iconSpace),
-                child: SvgPicture.asset(
-                  trailingIcon!,
-                  width: trailingIconSize,
-                  height: trailingIconSize,
-                  fit: BoxFit.fill,
-                  colorFilter: trailingIconColor?.asFilter()
-                ),
-              ),
           ]
         );
       } else {
@@ -239,51 +257,15 @@ class TMailButtonWidget extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.center,
             mainAxisSize: mainAxisSize,
             children: [
-              SvgPicture.asset(
+              iconWidget!,
-                icon!,
-                width: iconSize,
-                height: iconSize,
-                fit: BoxFit.fill,
-                colorFilter: iconColor?.asFilter()
-              ),
               SizedBox(width: iconSpace),
               if (flexibleText)
-                Flexible(
+                Flexible(child: textWidget!)
-                  child: Text(
+              else if (isTextExpanded)
-                    text,
+                Expanded(child: textWidget!)
-                    textAlign: textAlign,
-                    style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-                      fontSize: 12,
-                      color: AppColor.colorTextButtonHeaderThread
-                    ),
-                    maxLines: maxLines,
-                    overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-                    softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-                  ),
-                )
               else
-                Text(
+                textWidget!,
-                  text,
+              if (trailingIcon != null) trailingIconWidget!,
-                  textAlign: textAlign,
-                  style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-                    fontSize: 12,
-                    color: AppColor.colorTextButtonHeaderThread
-                  ),
-                  maxLines: maxLines,
-                  overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-                  softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-                ),
-              if (trailingIcon != null)
-                Padding(
-                  padding: EdgeInsetsDirectional.only(start: iconSpace),
-                  child: SvgPicture.asset(
-                    trailingIcon!,
-                    width: trailingIconSize,
-                    height: trailingIconSize,
-                    fit: BoxFit.fill,
-                    colorFilter: trailingIconColor?.asFilter()
-                  ),
-                ),
             ]
           );
         } else {
@@ -292,40 +274,14 @@ class TMailButtonWidget extends StatelessWidget {
             mainAxisSize: mainAxisSize,
             children: [
               if (flexibleText)
-                Flexible(
+                Flexible(child: textWidget!)
-                  child: Text(
+              else if (isTextExpanded)
-                    text,
+                Expanded(child: textWidget!)
-                    textAlign: textAlign,
-                    style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-                      fontSize: 12,
-                      color: AppColor.colorTextButtonHeaderThread
-                    ),
-                    maxLines: maxLines,
-                    overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-                    softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-                  ),
-                )
               else
-                Text(
+                textWidget!,
-                  text,
-                  textAlign: textAlign,
-                  style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-                    fontSize: 12,
-                    color: AppColor.colorTextButtonHeaderThread
-                  ),
-                  maxLines: maxLines,
-                  overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-                  softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-                ),
               SizedBox(width: iconSpace),
               if (!isLoading)
-                SvgPicture.asset(
+                iconWidget!
-                  icon!,
-                  width: iconSize,
-                  height: iconSize,
-                  fit: BoxFit.fill,
-                  colorFilter: iconColor?.asFilter()
-                )
               else 
                 SizedBox(
                   width: iconSize,
@@ -340,25 +296,9 @@ class TMailButtonWidget extends StatelessWidget {
         }
       }
     } else if (icon != null) {
-      childWidget = SvgPicture.asset(
+      childWidget = iconWidget!;
-        icon!,
-        width: iconSize,
-        height: iconSize,
-        fit: BoxFit.fill,
-        colorFilter: iconColor?.asFilter()
-      );
     } else {
-      childWidget = Text(
+      childWidget = textWidget!;
-        text,
-        textAlign: textAlign,
-        style: textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
-          fontSize: 12,
-          color: AppColor.colorTextButtonHeaderThread
-        ),
-        maxLines: maxLines,
-        overflow: textOverflow ?? (maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null),
-        softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
-      );
     }
 
     return TMailContainerWidget(

lib/features/base/widget/tmail_drop_down_widget.dart

@@ -0,0 +1,47 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+
+class TMailDropDownWidget extends StatelessWidget {
+
+  final String text;
+  final String dropDownIcon;
+  final VoidCallback onTap;
+  final double? width;
+  final Color? backgroundColor;
+
+  const TMailDropDownWidget({
+    super.key,
+    required this.text,
+    required this.dropDownIcon,
+    required this.onTap,
+    this.width,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TMailButtonWidget(
+      text: text,
+      icon: dropDownIcon,
+      iconAlignment: TextDirection.rtl,
+      width: width,
+      height: 40,
+      borderRadius: 10,
+      backgroundColor: backgroundColor ?? Colors.transparent,
+      iconSize: 20,
+      iconColor: AppColor.lightIconTertiary,
+      padding: const EdgeInsetsDirectional.only(
+        start: 12,
+        end: 8,
+        top: 8,
+        bottom: 8,
+      ),
+      textStyle: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+      border: Border.all(width: 1, color: AppColor.m3Neutral90),
+      isTextExpanded: true,
+      onTapActionCallback: onTap,
+    );
+  }
+}

lib/features/manage_account/presentation/base/setting_detail_view_builder.dart

@@ -22,28 +22,40 @@ class SettingDetailViewBuilder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    Widget containerWidget = Container(
-      backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils),
+      width: double.infinity,
-      body: GestureDetector(
+      height: double.infinity,
-        onTap: onTapGestureDetector,
+      color: SettingsUtils.getContentBackgroundColor(
-        child: Container(
+        context,
-          width: double.infinity,
+        responsiveUtils,
-          height: double.infinity,
+        backgroundColor: backgroundColor,
-          color: SettingsUtils.getContentBackgroundColor(
-            context,
-            responsiveUtils,
-            backgroundColor: backgroundColor,
-          ),
-          decoration: SettingsUtils.getBoxDecorationForContent(
-            context,
-            responsiveUtils,
-            backgroundColor: backgroundColor,
-          ),
-          margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils),
-          padding: padding,
-          child: child,
-        ),
       ),
+      decoration: SettingsUtils.getBoxDecorationForContent(
+        context,
+        responsiveUtils,
+        backgroundColor: backgroundColor,
+      ),
+      margin: SettingsUtils.getMarginSettingDetailsView(
+        context,
+        responsiveUtils,
+      ),
+      padding: padding,
+      child: child,
+    );
+
+    if (onTapGestureDetector != null) {
+      containerWidget = GestureDetector(
+        onTap: onTapGestureDetector,
+        child: containerWidget,
+      );
+    }
+
+    return Scaffold(
+      backgroundColor: SettingsUtils.getBackgroundColor(
+        context,
+        responsiveUtils,
+      ),
+      body: containerWidget,
     );
   }
 }

lib/features/manage_account/presentation/language_and_region/language_and_region_controller.dart

@@ -21,7 +21,6 @@ class LanguageAndRegionController extends BaseController {
 
   final listSupportedLanguages = <Locale>[].obs;
   final languageSelected = LocalizationService.defaultLocale.obs;
-  final isLanguageMenuOverlayOpen = RxBool(false);
 
   final manageAccountDashBoardController = Get.find<ManageAccountDashBoardController>();
 
@@ -57,7 +56,6 @@ class LanguageAndRegionController extends BaseController {
   }
 
   void selectLanguage(Locale? selectedLocale) {
-    isLanguageMenuOverlayOpen.value = false;
     languageSelected.value = selectedLocale ?? LocalizationService.defaultLocale;
     _saveLanguage(languageSelected.value);
   }
@@ -77,8 +75,4 @@ class LanguageAndRegionController extends BaseController {
       localeCurrent,
     ));
   }
-
-  void toggleLanguageMenuOverlay() {
-    isLanguageMenuOverlayOpen.toggle();
-  }
 }

lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart

@@ -1,10 +1,11 @@
-import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_portal/flutter_portal.dart';
 import 'package:get/get.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/language_and_region/language_and_region_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.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/widgets/setting_explanation_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart';
@@ -17,27 +18,42 @@ class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
     return Portal(
       child: SettingDetailViewBuilder(
         responsiveUtils: controller.responsiveUtils,
-        child: Column(
+        child: Container(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          color: SettingsUtils.getContentBackgroundColor(
-          children: [
+            context,
-            if (controller.responsiveUtils.isWebDesktop(context))
+            controller.responsiveUtils,
-              ...[
+          ),
-                const SettingHeaderWidget(menuItem: AccountMenuItem.languageAndRegion),
+          decoration: SettingsUtils.getBoxDecorationForContent(
-                const Divider(height: 1, color: AppColor.colorDividerHeaderSetting),
+            context,
-              ]
+            controller.responsiveUtils,
-            else
+          ),
-              const SettingExplanationWidget(menuItem: AccountMenuItem.languageAndRegion),
+          width: double.infinity,
-            Expanded(
+          padding: controller.responsiveUtils.isDesktop(context)
-              child: Padding(
+              ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22)
-                padding: const EdgeInsetsDirectional.only(
+              : null,
-                  start: 16,
+          child: Column(
-                  top: 24,
+            crossAxisAlignment: CrossAxisAlignment.start,
-                  end: 16,
+            children: [
+              if (controller.responsiveUtils.isWebDesktop(context))
+                SettingHeaderWidget(
+                  menuItem: AccountMenuItem.languageAndRegion,
+                  textStyle: ThemeUtils.textStyleInter600().copyWith(
+                    color: Colors.black.withOpacity(0.9),
+                  ),
+                  padding: EdgeInsets.zero,
+                )
+              else
+                const SettingExplanationWidget(
+                  menuItem: AccountMenuItem.languageAndRegion,
+                ),
+              const Expanded(
+                child: Padding(
+                  padding: EdgeInsets.only(top: 39),
+                  child: ChangeLanguageButtonWidget(),
                 ),
-                child: ChangeLanguageButtonWidget(),
               ),
-            ),
+            ],
-          ],
+          ),
         ),
       ),
     );

lib/features/manage_account/presentation/language_and_region/widgets/change_language_button_widget.dart

@@ -2,131 +2,130 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/presentation/views/responsive/responsive_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_portal/flutter_portal.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/tmail_drop_down_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class ChangeLanguageButtonWidget extends StatelessWidget {
+class ChangeLanguageButtonWidget extends StatefulWidget {
 
-  final _controller = Get.find<LanguageAndRegionController>();
+  const ChangeLanguageButtonWidget({Key? key}) : super(key: key);
+
+  @override
+  State<ChangeLanguageButtonWidget> createState() => _ChangeLanguageButtonWidgetState();
+}
+
+class _ChangeLanguageButtonWidgetState extends State<ChangeLanguageButtonWidget> {
+
+  final _languageAndRegionController = Get.find<LanguageAndRegionController>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
   final _imagePaths = Get.find<ImagePaths>();
 
-  ChangeLanguageButtonWidget({Key? key}) : super(key: key);
+  final ValueNotifier<bool> _languageMenuIsVisibleNotifier =
+    ValueNotifier<bool>(false);
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(builder: (context, constraints) {
+    if (_responsiveUtils.isDesktop(context)) {
-      return ResponsiveWidget(
+      return Column(
-        responsiveUtils: _responsiveUtils,
+        crossAxisAlignment: CrossAxisAlignment.start,
-        mobile: Scaffold(
+        children: [
-          body: Column(
+          _buildTitleLanguageWidget(context),
-            crossAxisAlignment: CrossAxisAlignment.start,
+          const SizedBox(height: 15),
-            children: [
+          SizedBox(
-              _buildTitleLanguageWidget(context),
+            width: 385,
-              const SizedBox(height: 8),
+            child: _buildLanguageMenu(context, 385),
-              _buildLanguageMenu(context, constraints.maxWidth)
+          ),
-            ]
+        ],
-          )
+      );
-        ),
+    } else {
-        desktop: Column(
+      return Scaffold(
+        body: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             _buildTitleLanguageWidget(context),
             const SizedBox(height: 8),
-            SizedBox(
+            _buildLanguageMenu(context, double.infinity),
-              width: constraints.maxWidth / 2,
+          ],
-              child: _buildLanguageMenu(context, constraints.maxWidth / 2)
+        ),
-            ),
-          ]
-        )
       );
-    });
+    }
   }
 
   Widget _buildTitleLanguageWidget(BuildContext context) {
     return Text(
       AppLocalizations.of(context).language,
-      style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+      style: ThemeUtils.textStyleInter400.copyWith(
         fontSize: 14,
-        fontWeight: FontWeight.normal,
+        height: 21.01 / 14,
-        color: AppColor.colorContentEmail
+        letterSpacing: -0.15,
-      )
+        color: AppColor.gray424244.withOpacity(0.64),
+      ),
     );
   }
 
   Widget _buildLanguageMenu(BuildContext context, double maxWidth) {
-    return Obx(() => PortalTarget(
+    return ValueListenableBuilder<bool>(
-      visible: _controller.isLanguageMenuOverlayOpen.isTrue,
+      valueListenable: _languageMenuIsVisibleNotifier,
-      portalFollower: GestureDetector(
+      builder: (context, isVisible, child) {
-        behavior: HitTestBehavior.opaque,
+        return PortalTarget(
-        onTap: () => _controller.toggleLanguageMenuOverlay()
+          visible: isVisible,
-      ),
+          portalFollower: GestureDetector(
-      child: PortalTarget(
+            behavior: HitTestBehavior.opaque,
-        anchor: const Aligned(
+            onTap: () => _toggleLanguageMenuOverlay(false),
-          follower: Alignment.topRight,
-          target: Alignment.bottomRight,
-          widthFactor: 1,
-          backup: Aligned(
-            follower: Alignment.topRight,
-            target: Alignment.bottomRight,
-            widthFactor: 1,
           ),
-        ),
+          child: PortalTarget(
-        portalFollower: Obx(() => LanguageRegionOverlay(
+            anchor: const Aligned(
-          listSupportedLanguages: _controller.listSupportedLanguages,
+              follower: Alignment.topRight,
-          localeSelected: _controller.languageSelected.value,
+              target: Alignment.bottomRight,
-          maxWidth: maxWidth,
+              widthFactor: 1,
-          onSelectLanguageAction: _controller.selectLanguage,
+              backup: Aligned(
-        )),
+                follower: Alignment.topRight,
-        visible: _controller.isLanguageMenuOverlayOpen.isTrue,
+                target: Alignment.bottomRight,
-        child: _buildDropDownMenuButton(context, maxWidth)
+                widthFactor: 1,
-      )
-    ));
-  }
-
-  Widget _buildDropDownMenuButton(BuildContext context, double maxWidth) {
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        onTap: () => _controller.toggleLanguageMenuOverlay(),
-        borderRadius: const BorderRadius.all(Radius.circular(10)),
-        child: Container(
-          height: 44,
-          width: maxWidth,
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(10),
-            border: Border.all(
-              color: AppColor.colorInputBorderCreateMailbox,
-              width: 0.5,
-            ),
-            color: AppColor.colorItemSelected,
-          ),
-          padding: const EdgeInsetsDirectional.only(start: 12, end: 10),
-          child: Row(children: [
-            Expanded(child: Text(
-              _controller.languageSelected.value.getLanguageNameByCurrentLocale(context),
-              style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                fontSize: 16,
-                fontWeight: FontWeight.normal,
-                color: Colors.black
               ),
-              maxLines: 1,
+            ),
-              softWrap: CommonTextStyle.defaultSoftWrap,
+            portalFollower: Obx(() => LanguageRegionOverlay(
-              overflow: CommonTextStyle.defaultTextOverFlow,
+              imagePaths: _imagePaths,
+              responsiveUtils: _responsiveUtils,
+              listSupportedLanguages: _languageAndRegionController.listSupportedLanguages,
+              localeSelected: _languageAndRegionController.languageSelected.value,
+              maxWidth: maxWidth,
+              onSelectLanguageAction: (language) {
+                _toggleLanguageMenuOverlay(false);
+                _languageAndRegionController.selectLanguage(language);
+              },
             )),
-            SvgPicture.asset(_imagePaths.icDropDown)
+            visible: isVisible,
-          ]),
+            child: TMailDropDownWidget(
-        ),
+              text: _languageAndRegionController
-      ),
+                .languageSelected
+                .value
+                .getLanguageNameByCurrentLocale(context),
+              dropDownIcon: _imagePaths.icDropDown,
+              backgroundColor: isVisible
+                ? AppColor.lightGrayEBEDF0.withOpacity(0.6)
+                : null,
+              onTap: () => _toggleLanguageMenuOverlay(true),
+            )
+          )
+        );
+      }
     );
   }
+
+  void _toggleLanguageMenuOverlay(bool visible) {
+    _languageMenuIsVisibleNotifier.value = visible;
+  }
+
+  @override
+  void dispose() {
+    _languageMenuIsVisibleNotifier.dispose();
+    super.dispose();
+  }
 }

lib/features/manage_account/presentation/language_and_region/widgets/language_menu_overlay.dart

@@ -1,22 +1,22 @@
-
+import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart';
 
 class LanguageRegionOverlay extends StatelessWidget {
 
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
   final List<Locale> listSupportedLanguages;
   final Locale localeSelected;
   final double? maxWidth;
   final OnSelectLanguageAction onSelectLanguageAction;
 
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  const LanguageRegionOverlay({
-
-  LanguageRegionOverlay({
     Key? key,
+    required this.imagePaths,
     required this.listSupportedLanguages,
+    required this.responsiveUtils,
     required this.localeSelected,
     required this.onSelectLanguageAction,
     this.maxWidth,
@@ -31,22 +31,27 @@ class LanguageRegionOverlay extends StatelessWidget {
       padding: const EdgeInsets.all(8),
       decoration: BoxDecoration(
         color: Colors.white,
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: const BorderRadius.all(Radius.circular(16)),
-        boxShadow: const [
+        boxShadow: [
           BoxShadow(
-            color: AppColor.colorShadowBgContentEmail,
+            color: Colors.black.withOpacity(0.3),
-            blurRadius: 24,
-            offset: Offset(0, 8)),
-          BoxShadow(
-            color: AppColor.colorShadowBgContentEmail,
             blurRadius: 2,
-            offset: Offset.zero),
+            offset: const Offset(0, 1),
-          ]
+          ),
+          BoxShadow(
+            color: Colors.black.withOpacity(0.15),
+            blurRadius: 6,
+            spreadRadius: 2,
+            offset: const Offset(0, 2),
+          ),
+        ],
       ),
       child: ListView.builder(
         shrinkWrap: true,
         itemCount: listSupportedLanguages.length,
-        itemBuilder: (context, index) => LanguageItemWidget(
+        padding: const EdgeInsets.all(7),
+        itemBuilder: (_, index) => LanguageItemWidget(
+          imagePaths: imagePaths,
           localeSelected: localeSelected,
           localeCurrent: listSupportedLanguages[index],
           onSelectLanguageAction: onSelectLanguageAction
@@ -59,7 +64,7 @@ class LanguageRegionOverlay extends StatelessWidget {
     const double maxHeightTopBar = 80;
     const double maxHeightTitleLanguage = 200;
     const double paddingBottom = 16;
-    final currentHeight = _responsiveUtils.getSizeScreenHeight(context);
+    final currentHeight = responsiveUtils.getSizeScreenHeight(context);
     double maxHeightForm = currentHeight - maxHeightTopBar - maxHeightTitleLanguage - paddingBottom;
     return maxHeightForm;
   }

lib/features/manage_account/presentation/language_and_region/widgets/lanuage_item_widget.dart

@@ -1,22 +1,22 @@
-
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/extensions/locale_extension.dart';
 
 typedef OnSelectLanguageAction = Function(Locale? localeSelected);
 
 class LanguageItemWidget extends StatelessWidget {
 
+  final ImagePaths imagePaths;
   final Locale localeSelected;
   final Locale localeCurrent;
   final OnSelectLanguageAction onSelectLanguageAction;
 
   const LanguageItemWidget({
     super.key,
+    required this.imagePaths,
     required this.localeCurrent,
     required this.localeSelected,
     required this.onSelectLanguageAction,
@@ -24,48 +24,33 @@ class LanguageItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
     return Material(
       color: Colors.transparent,
       child: InkWell(
         onTap: () => onSelectLanguageAction.call(localeCurrent),
         borderRadius: const BorderRadius.all(Radius.circular(8)),
-        child: Padding(
+        hoverColor: AppColor.lightGrayEBEDF0.withOpacity(0.6),
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 17),
+          height: 51,
           child: Row(children: [
-            Expanded(child: Row(
+            Expanded(child: Text(
-              children: [
+              '${localeCurrent.getLanguageNameByCurrentLocale(context)} - ${localeCurrent.getSourceLanguageName()}',
-                Text(
+              style: ThemeUtils.textStyleInter400.copyWith(
-                  localeCurrent.getLanguageNameByCurrentLocale(context),
+                letterSpacing: -0.15,
-                  style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+                fontSize: 16,
-                    fontSize: 17,
+                height: 21.01 / 16,
-                    fontWeight: FontWeight.normal,
+                color: AppColor.gray424244.withOpacity(0.9),
-                    color: Colors.black
+              ),
-                  ),
+              maxLines: 1,
-                  maxLines: 1,
+              overflow: TextOverflow.ellipsis,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
-                  overflow: CommonTextStyle.defaultTextOverFlow,
-                ),
-                Text(
-                  ' - ${localeCurrent.getSourceLanguageName()}',
-                  style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                    fontSize: 17,
-                    fontWeight: FontWeight.w500,
-                    color: Colors.black
-                  ),
-                  maxLines: 1,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
-                  overflow: CommonTextStyle.defaultTextOverFlow,
-                )
-              ]
             )),
             if (localeCurrent == localeSelected)
               SvgPicture.asset(
                 imagePaths.icChecked,
                 width: 20,
                 height: 20,
-                fit: BoxFit.fill
+                fit: BoxFit.fill,
               )
           ]),
         ),

lib/features/manage_account/presentation/menu/settings_utils.dart

@@ -64,7 +64,7 @@ class SettingsUtils {
   ) {
     if (responsiveUtils.isWebDesktop(context)) {
       return BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(16)),
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
         color: backgroundColor,
       );
     } else {

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

@@ -7,11 +7,13 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 class SettingHeaderWidget extends StatelessWidget {
   final AccountMenuItem menuItem;
   final EdgeInsetsGeometry? padding;
+  final TextStyle? textStyle;
 
   const SettingHeaderWidget({
     Key? key,
     required this.menuItem,
     this.padding,
+    this.textStyle,
   }) : super(key: key);
 
   @override
@@ -21,16 +23,21 @@ class SettingHeaderWidget extends StatelessWidget {
     final children = [
       Text(
         menuItem.getName(appLocalizations),
-        style: ThemeUtils.textStyleInter600().copyWith(
+        style: textStyle ?? ThemeUtils.textStyleInter600().copyWith(
           color: Colors.black,
         ),
       ),
       if (menuItem.getExplanation(appLocalizations).isNotEmpty)
         Padding(
-          padding: const EdgeInsets.only(top: 8),
+          padding: const EdgeInsets.only(top: 13),
           child: Text(
             menuItem.getExplanation(appLocalizations),
-            style: ThemeUtils.textStyleBodyBody1(color: AppColor.steelGray400),
+            style: ThemeUtils.textStyleInter400.copyWith(
+              fontSize: 16,
+              height: 21.01 / 16,
+              letterSpacing: -0.15,
+              color: AppColor.gray424244.withOpacity(0.64),
+            ),
           ),
         ),
     ];