Apply new style left menu in Settings

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

core/lib/presentation/extensions/color_extension.dart

@@ -243,6 +243,7 @@ extension AppColor on Color {
   static const steelGray600 = Color(0xFF4E5966);
   static const blue100 = Color(0xFFDFEEFF);
   static const blue400 = Color(0xFF80BDFF);
+  static const blue900 = Color(0xFF0F76E7);
   static const m3Tertiary = Color(0xFF8C9CAF);
   static const m3Neutral70 = Color(0xFFAEAAAE);
   static const m3Neutral90 = Color(0xFFE6E1E5);
@@ -263,6 +264,8 @@ extension AppColor on Color {
   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 mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/utils/theme_utils.dart

@@ -6,12 +6,13 @@ import 'package:flutter/services.dart';
 class ThemeUtils {
   ThemeUtils._();
 
-  static ThemeData get appTheme {
+  static ThemeData buildAppTheme(BuildContext context) {
     return ThemeData(
       scaffoldBackgroundColor: Colors.white,
       fontFamily: ConstantsUI.fontApp,
       appBarTheme: _appBarTheme,
       textTheme: _textTheme,
+      hoverColor: Theme.of(context).colorScheme.outline.withOpacity(0.08),
       textSelectionTheme: _textSelectionTheme,
       dividerTheme: _dividerTheme,
       visualDensity: VisualDensity.adaptivePlatformDensity,

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

@@ -1,5 +1,6 @@
 
 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:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
@@ -23,68 +24,93 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
        backgroundColor: controller.responsiveUtils.isWebDesktop(context)
            ? AppColor.colorBgDesktop
            : Colors.white,
-       body: SafeArea(right: false, bottom: false,
+       body: SafeArea(
+         right: false,
+         bottom: false,
          child: Column(
+           crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              if (!controller.responsiveUtils.isWebDesktop(context))
+               ...[
                  Padding(
-                       padding: const EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 16),
+                   padding: const EdgeInsetsDirectional.only(
-                       child: Row(children: [
+                     top: 16,
+                     bottom: 16,
+                     start: 16,
+                   ),
+                   child: Row(
+                     children: [
                        ApplicationLogoWidthTextWidget(),
                        const ApplicationVersionWidget(
                          padding: EdgeInsets.only(top: 8),
                        ),
-                       ])
+                     ],
+                   ),
+                 ),
+                 const Divider(
+                   color: AppColor.colorDividerMailbox,
+                   height: 1,
+                 ),
+               ],
+             Expanded(
+               child: Padding(
+                 padding: const EdgeInsetsDirectional.only(
+                   start: 9,
+                   end: 8,
+                   top: 16,
+                   bottom: 16,
                  ),
-                 if (!controller.responsiveUtils.isWebDesktop(context))
-                   const Divider(color: AppColor.colorDividerMailbox, height: 1),
-                 Expanded(child: Container(
-                   color: controller.responsiveUtils.isWebDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
-                         padding: const EdgeInsetsDirectional.only(start: 20, top: 24),
+                        padding: const EdgeInsets.all(8),
                         child: TMailButtonWidget(
                           key: const Key('back_to_dashboard_button'),
                           text: AppLocalizations.of(context).back,
                           icon: DirectionUtils.isDirectionRTLByLanguage(context)
                               ? controller.imagePaths.icArrowRight
                               : controller.imagePaths.icBack,
-                           borderRadius: 10,
+                          borderRadius: 8,
-                           backgroundColor: AppColor.colorBgMailboxSelected,
+                          mainAxisSize: MainAxisSize.min,
-                           iconColor: AppColor.colorTextButton,
+                          backgroundColor: AppColor.lightGrayEAEDF2,
-                           maxWidth: 100,
+                          iconColor: AppColor.primaryLinShare,
-                           padding: DirectionUtils.isDirectionRTLByLanguage(context)
+                          minWidth: 79,
-                             ? const EdgeInsets.symmetric(vertical: 5)
+                          iconSize:
-                             : const EdgeInsets.symmetric(vertical: 10),
+                              DirectionUtils.isDirectionRTLByLanguage(context)
-                           iconSize: DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16,
+                                  ? null
-                           textStyle: const TextStyle(
+                                  : 9,
-                             fontSize: 15,
+                          padding: const EdgeInsetsDirectional.only(
-                             color: AppColor.colorTextButton,
+                            start: 19,
-                             fontWeight: FontWeight.normal
+                            end: 12,
+                            top: 8,
+                            bottom: 8,
                           ),
-                           onTapActionCallback: () => controller.backToMailboxDashBoard(context),
+                          textStyle:
+                              Theme.of(context).textTheme.bodySmall?.copyWith(
+                                    color: AppColor.blue900,
+                                  ),
+                          onTapActionCallback: () =>
+                              controller.backToMailboxDashBoard(context),
                         ),
                       ),
                       Padding(
-                         padding: const EdgeInsetsDirectional.only(start: 32, top: 20),
+                       padding: const EdgeInsets.all(8),
                        child: Text(
                          AppLocalizations.of(context).manage_account,
-                           style: const TextStyle(
+                         style: ThemeUtils.textStyleHeadingHeadingSmall(
-                             color: Colors.black,
                            fontWeight: FontWeight.bold,
-                             fontSize: 17
+                         ),
-                           )
                        )
                      ),
-                       const SizedBox(height: 12),
                      Flexible(
                        child: Obx(() {
                          if (controller.listAccountMenuItem.isNotEmpty) {
                            return ListView.builder(
                              key: const Key('list_manage_account_menu_item'),
-                               padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
+                            padding: const EdgeInsetsDirectional.symmetric(
+                              horizontal: 8,
+                            ),
                             shrinkWrap: true,
                              itemCount: controller.listAccountMenuItem.length,
                              itemBuilder: (context, index) => Obx(() {
@@ -104,8 +130,9 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                        }),
                      ),
                      const Padding(
-                           padding: EdgeInsets.symmetric(vertical: 16),
+                       padding: EdgeInsets.only(top: 20, bottom: 12),
-                           child: Divider()),
+                       child: Divider(color: Colors.black12),
+                     ),
                      Obx(() {
                        final accountId = controller
                          .dashBoardController
@@ -125,7 +152,9 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                          imagePaths: controller.imagePaths,
                          responsiveUtils: controller.responsiveUtils,
                          menuItem: AccountMenuItem.contactSupport,
-                           padding: const EdgeInsetsDirectional.only(start: 16, end: 8, bottom: 6),
+                         padding: const EdgeInsetsDirectional.symmetric(
+                           horizontal: 8,
+                         ),
                          onSelectAccountMenuItemAction: (_) {
                            controller.onGetHelpOrReportBug(
                              contactSupportCapability!,
@@ -138,7 +167,11 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                        imagePaths: controller.imagePaths,
                        responsiveUtils: controller.responsiveUtils,
                        menuItem: AccountMenuItem.signOut,
-                         padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
+                       padding: const EdgeInsetsDirectional.only(
+                         start: 8,
+                         end: 8,
+                         top: 4,
+                       ),
                        onSelectAccountMenuItemAction: (_) {
                          controller.dashBoardController.logout(
                            context,
@@ -149,7 +182,8 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                      ),
                    ]
                  ),
-                 )),
+               ),
+             ),
              Container(
                color: AppColor.colorBgDesktop,
                width: double.infinity,
@@ -161,8 +195,8 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                  title: '${AppLocalizations.of(context).version.toLowerCase()} ',
                ),
              ),
-               ]
+           ],
-           )
+         ),
        ),
      );
   }

lib/features/manage_account/presentation/menu/widgets/account_menu_item_tile_builder.dart

@@ -32,36 +32,54 @@ class AccountMenuItemTileBuilder extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       key: Key('${menuItem.getAliasBrowser()}_account_menu_item_tile'),
-      padding: padding ?? const EdgeInsets.only(top: 6),
+      padding: padding ?? const EdgeInsets.only(top: 4),
       child: Material(
         color: Colors.transparent,
         child: InkWell(
           onTap: () => onSelectAccountMenuItemAction.call(menuItem),
-          borderRadius: const BorderRadius.all(Radius.circular(10)),
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
           child: Container(
             decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(10)),
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
-              color: menuItemSelected == menuItem
+              color: _isSelected
-                ? AppColor.colorBgMailboxSelected
+                ? AppColor.lightGrayEAEDF2
                 : Colors.transparent,
             ),
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+            padding: const EdgeInsets.all(8),
-            child: Column(children: [
+            height: 36,
-              Row(children: [
+            child: Row(children: [
               SvgPicture.asset(
                 menuItem.getIcon(imagePaths),
                 width: 20,
                 height: 20,
-                  fit: BoxFit.fill),
+                fit: BoxFit.fill,
-                const SizedBox(width: 12),
+                colorFilter: AppColor.primaryLinShare.asFilter(),
+              ),
+              const SizedBox(width: 8),
               Expanded(child: Text(
                 menuItem.getName(AppLocalizations.of(context)),
-                  style: ThemeUtils.textStyleBodyBody3(color: Colors.black)
+                maxLines: 1,
-                ))
+                overflow: TextOverflow.ellipsis,
-              ]),
+                style: _titleStyle,
+              )),
             ])
           )),
       ),
     );
   }
+
+  bool get _isSelected => menuItemSelected == menuItem;
+
+  TextStyle get _titleStyle {
+    if (_isSelected) {
+      return ThemeUtils.textStyleInter600().copyWith(
+        fontSize: 15,
+        height: 20 / 15,
+        letterSpacing: 0.0,
+        color: Colors.black,
+      );
+    } else {
+      return ThemeUtils.textStyleBodyBody2(color: Colors.black);
+    }
+  }
 }

lib/main.dart

@@ -71,7 +71,7 @@ class _TMailAppState extends State<TMailApp> {
   Widget build(BuildContext context) {
     return GetMaterialApp(
       debugShowCheckedModeBanner: false,
-      theme: ThemeUtils.appTheme,
+      theme: ThemeUtils.buildAppTheme(context),
       supportedLocales: LocalizationService.supportedLocales,
       localizationsDelegates: const [
         AppLocalizationsDelegate(),