Apply new style Language section in Setting on desktop

Signed-off-by: dab246 <tdvu@linagora.com>
2025-07-03 16:54:23 +07:00
parent de596a76d6
commit 8289593247
11 changed files with 319 additions and 312 deletions
@@ -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)],
@@ -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(
-              icon!,
-              width: iconSize,
-              height: iconSize,
-              fit: BoxFit.fill,
-              colorFilter: iconColor?.asFilter()
-            ),
+            iconWidget!,
            SizedBox(height: iconSpace),
-            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 (trailingIcon != null)
-              Padding(
-                padding: EdgeInsetsDirectional.only(top: iconSpace),
-                child: SvgPicture.asset(
-                  trailingIcon!,
-                  width: trailingIconSize,
-                  height: trailingIconSize,
-                  fit: BoxFit.fill,
-                  colorFilter: trailingIconColor?.asFilter()
-                ),
-              ),
+            textWidget!,
+            if (trailingIcon != null) trailingIconWidget!,
          ]
        );
      } else {
@@ -239,51 +257,15 @@ class TMailButtonWidget extends StatelessWidget {
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: mainAxisSize,
            children: [
-              SvgPicture.asset(
-                icon!,
-                width: iconSize,
-                height: iconSize,
-                fit: BoxFit.fill,
-                colorFilter: iconColor?.asFilter()
-              ),
+              iconWidget!,
              SizedBox(width: iconSpace),
              if (flexibleText)
-                Flexible(
-                  child: 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,
-                  ),
-                )
+                Flexible(child: textWidget!)
+              else if (isTextExpanded)
+                Expanded(child: textWidget!)
              else
-                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 (trailingIcon != null)
-                Padding(
-                  padding: EdgeInsetsDirectional.only(start: iconSpace),
-                  child: SvgPicture.asset(
-                    trailingIcon!,
-                    width: trailingIconSize,
-                    height: trailingIconSize,
-                    fit: BoxFit.fill,
-                    colorFilter: trailingIconColor?.asFilter()
-                  ),
-                ),
+                textWidget!,
+              if (trailingIcon != null) trailingIconWidget!,
            ]
          );
        } else {
@@ -292,40 +274,14 @@ class TMailButtonWidget extends StatelessWidget {
            mainAxisSize: mainAxisSize,
            children: [
              if (flexibleText)
-                Flexible(
-                  child: 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,
-                  ),
-                )
+                Flexible(child: textWidget!)
+              else if (isTextExpanded)
+                Expanded(child: textWidget!)
              else
-                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,
-                ),
+                textWidget!,
              SizedBox(width: iconSpace),
              if (!isLoading)
-                SvgPicture.asset(
-                  icon!,
-                  width: iconSize,
-                  height: iconSize,
-                  fit: BoxFit.fill,
-                  colorFilter: iconColor?.asFilter()
-                )
+                iconWidget!
              else 
                SizedBox(
                  width: iconSize,
@@ -340,25 +296,9 @@ class TMailButtonWidget extends StatelessWidget {
        }
      }
    } else if (icon != null) {
-      childWidget = SvgPicture.asset(
-        icon!,
-        width: iconSize,
-        height: iconSize,
-        fit: BoxFit.fill,
-        colorFilter: iconColor?.asFilter()
-      );
+      childWidget = iconWidget!;
    } else {
-      childWidget = 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,
-      );
+      childWidget = textWidget!;
    }

    return TMailContainerWidget(
@@ -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,
+    );
+  }
+}
@@ -22,28 +22,40 @@ class SettingDetailViewBuilder extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils),
-      body: GestureDetector(
-        onTap: onTapGestureDetector,
-        child: Container(
-          width: double.infinity,
-          height: double.infinity,
-          color: SettingsUtils.getContentBackgroundColor(
-            context,
-            responsiveUtils,
-            backgroundColor: backgroundColor,
-          ),
-          decoration: SettingsUtils.getBoxDecorationForContent(
-            context,
-            responsiveUtils,
-            backgroundColor: backgroundColor,
-          ),
-          margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils),
-          padding: padding,
-          child: child,
-        ),
+    Widget containerWidget = Container(
+      width: double.infinity,
+      height: double.infinity,
+      color: SettingsUtils.getContentBackgroundColor(
+        context,
+        responsiveUtils,
+        backgroundColor: backgroundColor,
      ),
+      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,
    );
  }
 }
@@ -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();
-  }
 }
@@ -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(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            if (controller.responsiveUtils.isWebDesktop(context))
-              ...[
-                const SettingHeaderWidget(menuItem: AccountMenuItem.languageAndRegion),
-                const Divider(height: 1, color: AppColor.colorDividerHeaderSetting),
-              ]
-            else
-              const SettingExplanationWidget(menuItem: AccountMenuItem.languageAndRegion),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsetsDirectional.only(
-                  start: 16,
-                  top: 24,
-                  end: 16,
+        child: Container(
+          color: SettingsUtils.getContentBackgroundColor(
+            context,
+            controller.responsiveUtils,
+          ),
+          decoration: SettingsUtils.getBoxDecorationForContent(
+            context,
+            controller.responsiveUtils,
+          ),
+          width: double.infinity,
+          padding: controller.responsiveUtils.isDesktop(context)
+              ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22)
+              : null,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            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(),
              ),
-            ),
-          ],
+            ],
+          ),
        ),
      ),
    );
@@ -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) {
-      return ResponsiveWidget(
-        responsiveUtils: _responsiveUtils,
-        mobile: Scaffold(
-          body: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              _buildTitleLanguageWidget(context),
-              const SizedBox(height: 8),
-              _buildLanguageMenu(context, constraints.maxWidth)
-            ]
-          )
-        ),
-        desktop: Column(
+    if (_responsiveUtils.isDesktop(context)) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _buildTitleLanguageWidget(context),
+          const SizedBox(height: 15),
+          SizedBox(
+            width: 385,
+            child: _buildLanguageMenu(context, 385),
+          ),
+        ],
+      );
+    } else {
+      return Scaffold(
+        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildTitleLanguageWidget(context),
            const SizedBox(height: 8),
-            SizedBox(
-              width: constraints.maxWidth / 2,
-              child: _buildLanguageMenu(context, constraints.maxWidth / 2)
-            ),
-          ]
-        )
+            _buildLanguageMenu(context, double.infinity),
+          ],
+        ),
      );
-    });
+    }
  }

  Widget _buildTitleLanguageWidget(BuildContext context) {
    return Text(
      AppLocalizations.of(context).language,
-      style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+      style: ThemeUtils.textStyleInter400.copyWith(
        fontSize: 14,
-        fontWeight: FontWeight.normal,
-        color: AppColor.colorContentEmail
-      )
+        height: 21.01 / 14,
+        letterSpacing: -0.15,
+        color: AppColor.gray424244.withOpacity(0.64),
+      ),
    );
  }

  Widget _buildLanguageMenu(BuildContext context, double maxWidth) {
-    return Obx(() => PortalTarget(
-      visible: _controller.isLanguageMenuOverlayOpen.isTrue,
-      portalFollower: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: () => _controller.toggleLanguageMenuOverlay()
-      ),
-      child: PortalTarget(
-        anchor: const Aligned(
-          follower: Alignment.topRight,
-          target: Alignment.bottomRight,
-          widthFactor: 1,
-          backup: Aligned(
-            follower: Alignment.topRight,
-            target: Alignment.bottomRight,
-            widthFactor: 1,
+    return ValueListenableBuilder<bool>(
+      valueListenable: _languageMenuIsVisibleNotifier,
+      builder: (context, isVisible, child) {
+        return PortalTarget(
+          visible: isVisible,
+          portalFollower: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: () => _toggleLanguageMenuOverlay(false),
          ),
-        ),
-        portalFollower: Obx(() => LanguageRegionOverlay(
-          listSupportedLanguages: _controller.listSupportedLanguages,
-          localeSelected: _controller.languageSelected.value,
-          maxWidth: maxWidth,
-          onSelectLanguageAction: _controller.selectLanguage,
-        )),
-        visible: _controller.isLanguageMenuOverlayOpen.isTrue,
-        child: _buildDropDownMenuButton(context, maxWidth)
-      )
-    ));
-  }
-
-  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
+          child: PortalTarget(
+            anchor: const Aligned(
+              follower: Alignment.topRight,
+              target: Alignment.bottomRight,
+              widthFactor: 1,
+              backup: Aligned(
+                follower: Alignment.topRight,
+                target: Alignment.bottomRight,
+                widthFactor: 1,
              ),
-              maxLines: 1,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-              overflow: CommonTextStyle.defaultTextOverFlow,
+            ),
+            portalFollower: Obx(() => LanguageRegionOverlay(
+              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();
+  }
 }
@@ -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/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>();
-
-  LanguageRegionOverlay({
+  const 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),
-        boxShadow: const [
+        borderRadius: const BorderRadius.all(Radius.circular(16)),
+        boxShadow: [
          BoxShadow(
-            color: AppColor.colorShadowBgContentEmail,
-            blurRadius: 24,
-            offset: Offset(0, 8)),
-          BoxShadow(
-            color: AppColor.colorShadowBgContentEmail,
+            color: Colors.black.withOpacity(0.3),
            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;
  }
@@ -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(
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
+        hoverColor: AppColor.lightGrayEBEDF0.withOpacity(0.6),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 17),
+          height: 51,
          child: Row(children: [
-            Expanded(child: Row(
-              children: [
-                Text(
-                  localeCurrent.getLanguageNameByCurrentLocale(context),
-                  style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                    fontSize: 17,
-                    fontWeight: FontWeight.normal,
-                    color: Colors.black
-                  ),
-                  maxLines: 1,
-                  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,
-                )
-              ]
+            Expanded(child: Text(
+              '${localeCurrent.getLanguageNameByCurrentLocale(context)} - ${localeCurrent.getSourceLanguageName()}',
+              style: ThemeUtils.textStyleInter400.copyWith(
+                letterSpacing: -0.15,
+                fontSize: 16,
+                height: 21.01 / 16,
+                color: AppColor.gray424244.withOpacity(0.9),
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
            )),
            if (localeCurrent == localeSelected)
              SvgPicture.asset(
                imagePaths.icChecked,
                width: 20,
                height: 20,
-                fit: BoxFit.fill
+                fit: BoxFit.fill,
              )
          ]),
        ),
@@ -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 {
@@ -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),
+            ),
          ),
        ),
    ];