TF-3410 Synchronize all color for app

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

core/lib/presentation/extensions/color_extension.dart

@@ -242,7 +242,6 @@ extension AppColor on Color {
   static const blue700 = Color(0xFF208BFF);
   static const steelGray400 = Color(0xFF818C99);
   static const steelGray600 = Color(0xFF4E5966);
-  static const blue700 = Color(0xFF208BFF);
   static const blue100 = Color(0xFFDFEEFF);
   static const blue400 = Color(0xFF80BDFF);
   static const m3Tertiary = Color(0xFF8C9CAF);

lib/features/email/presentation/controller/single_email_controller.dart

@@ -2447,4 +2447,12 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
         AppLocalizations.of(currentContext!).thisHtmlAttachmentCannotBePreviewed);
     }
   }
+
+  String getOwnEmailAddress() {
+    try {
+      return session?.getOwnEmailAddress() ?? '';
+    } catch (e) {
+      return '';
+    }
+  }
 }

lib/features/email/presentation/email_view.dart

@@ -234,11 +234,21 @@ class EmailView extends GetWidget<SingleEmailController> {
                       });
                     }),
                   ),
-                  EmailViewBottomBarWidget(
+                  Obx(() {
-                    key: const Key('email_view_button_bar'),
+                    final emailLoaded = controller.currentEmailLoaded.value;
-                    presentationEmail: currentEmail,
+
-                    emailActionCallback: controller.pressEmailAction
+                    if (emailLoaded == null) return const SizedBox.shrink();
-                  ),
+
+                    return EmailViewBottomBarWidget(
+                      key: const Key('email_view_button_bar'),
+                      imagePaths: controller.imagePaths,
+                      responsiveUtils: controller.responsiveUtils,
+                      emailLoaded: emailLoaded,
+                      presentationEmail: currentEmail,
+                      userName: controller.getOwnEmailAddress(),
+                      emailActionCallback: controller.pressEmailAction,
+                    );
+                  }),
                 ]);
               } else {
                 return const EmailViewEmptyWidget();

lib/features/email/presentation/widgets/email_view_bottom_bar_widget.dart

@@ -2,12 +2,11 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:model/email/email_action_type.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:model/extensions/email_extension.dart';
 import 'package:model/extensions/presentation_email_extension.dart';
-import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
+import 'package:tmail_ui_user/features/email/presentation/model/email_loaded.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/email_view_bottom_bar_widget_styles.dart';
 import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -16,21 +15,30 @@ typedef OnEmailActionCallback = void Function(EmailActionType, PresentationEmail
 
 class EmailViewBottomBarWidget extends StatelessWidget {
 
-  final _imagePaths = Get.find<ImagePaths>();
+  final ImagePaths imagePaths;
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final ResponsiveUtils responsiveUtils;
-  final _singleEmailController = Get.find<SingleEmailController>();
-
   final PresentationEmail presentationEmail;
+  final EmailLoaded emailLoaded;
+  final String userName;
   final OnEmailActionCallback emailActionCallback;
 
-  EmailViewBottomBarWidget({
+  const EmailViewBottomBarWidget({
     Key? key,
+    required this.imagePaths,
+    required this.responsiveUtils,
     required this.presentationEmail,
-    required this.emailActionCallback
+    required this.emailLoaded,
+    required this.userName,
+    required this.emailActionCallback,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final countMailAddress = presentationEmail.getCountMailAddressWithoutMe(userName);
+    final isReplyToListEnabled = EmailUtils.isReplyToListEnabled(
+      emailLoaded.emailCurrent?.listPost ?? '',
+    );
+
     return Container(
       decoration: const BoxDecoration(
         border: Border(
@@ -49,116 +57,59 @@ class EmailViewBottomBarWidget extends StatelessWidget {
       child: IntrinsicHeight(
         child: Row(
           children: [
-            Obx(() {
+            if (countMailAddress > 1)
-              final emailLoader = _singleEmailController.currentEmailLoaded.value;
+              Expanded(
-              final countMailAddress = presentationEmail.getCountMailAddressWithoutMe(
+                child: TMailButtonWidget(
-                _singleEmailController.userName?.value ?? '',
+                  key: const Key('reply_all_emails_button'),
-              );
+                  text: AppLocalizations.of(context).reply_all,
-              if (emailLoader != null && countMailAddress > 1) {
+                  icon: imagePaths.icReplyAll,
-                return Expanded(
+                  borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
-                  child: TMailButtonWidget(
+                  iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
-                    key: const Key('reply_all_emails_button'),
+                  iconColor: EmailViewBottomBarWidgetStyles.iconColor,
-                    text: AppLocalizations.of(context).reply_all,
+                  textAlign: TextAlign.center,
-                    icon: _imagePaths.icReplyAll,
+                  flexibleText: true,
-                    borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                  padding: EmailViewBottomBarWidgetStyles.buttonPadding,
-                    iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                  backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
+                  textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(
-                    textAlign: TextAlign.center,
+                    context,
-                    flexibleText: true,
+                    responsiveUtils,
-                    padding: EmailViewBottomBarWidgetStyles.buttonPadding,
-                    backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
-                    verticalDirection: _responsiveUtils.isPortraitMobile(context),
-                    onTapActionCallback: () => emailActionCallback.call(EmailActionType.replyAll, presentationEmail),
                   ),
-                );
+                  verticalDirection: responsiveUtils.isPortraitMobile(context),
-              } else {
+                  onTapActionCallback: () => emailActionCallback.call(
-                return const SizedBox.shrink();
+                    EmailActionType.replyAll,
-              }
+                    presentationEmail,
-            }),
-            Obx(() {
-              final currentEmailLoaded = _singleEmailController.currentEmailLoaded.value;
-              final isReplyToListEnabled = EmailUtils.isReplyToListEnabled(
-                currentEmailLoaded?.emailCurrent?.listPost ?? '',
-              );
-              if (currentEmailLoaded != null && isReplyToListEnabled) {
-                return Expanded(
-                  child: TMailButtonWidget(
-                    key: const Key('reply_to_list_email_button'),
-                    text: AppLocalizations.of(context).replyToList,
-                    icon: _imagePaths.icReply,
-                    borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
-                    iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
-                    textAlign: TextAlign.center,
-                    flexibleText: true,
-                    padding: EmailViewBottomBarWidgetStyles.buttonPadding,
-                    backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(
-                      context,
-                      _responsiveUtils,
-                    ),
-                    verticalDirection: _responsiveUtils.isPortraitMobile(context),
-                    onTapActionCallback: () => emailActionCallback.call(
-                      EmailActionType.replyToList,
-                      presentationEmail,
-                    ),
                   ),
-                );
+                ),
-              } else {
+              ),
-                return const SizedBox.shrink();
+            if (isReplyToListEnabled)
-              }
+              Expanded(
-            }),
+                child: TMailButtonWidget(
-            Obx(() {
+                  key: const Key('reply_to_list_email_button'),
-              if (_singleEmailController.currentEmailLoaded.value != null) {
+                  text: AppLocalizations.of(context).replyToList,
-                return Expanded(
+                  icon: imagePaths.icReply,
-                  child: TMailButtonWidget(
+                  borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
-                    key: const Key('reply_email_button'),
+                  iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
-                    text: AppLocalizations.of(context).reply,
+                  iconColor: EmailViewBottomBarWidgetStyles.iconColor,
-                    icon: _imagePaths.icReply,
+                  textAlign: TextAlign.center,
-                    borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                  flexibleText: true,
-                    iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                  padding: EmailViewBottomBarWidgetStyles.buttonPadding,
-                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
+                  backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    textAlign: TextAlign.center,
+                  textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(
-                    flexibleText: true,
+                    context,
-                    padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                    responsiveUtils,
-                    backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
-                    verticalDirection: _responsiveUtils.isPortraitMobile(context),
-                    onTapActionCallback: () => emailActionCallback.call(EmailActionType.reply, presentationEmail),
                   ),
-                );
+                  verticalDirection: responsiveUtils.isPortraitMobile(context),
-              } else {
+                  onTapActionCallback: () => emailActionCallback.call(
-                return const SizedBox.shrink();
+                    EmailActionType.replyToList,
-              }
+                    presentationEmail,
-            }),
-            Obx(() {
-              if (_singleEmailController.currentEmailLoaded.value != null) {
-                return Expanded(
-                  child: TMailButtonWidget(
-                    key: const Key('forward_email_button'),
-                    text: AppLocalizations.of(context).forward,
-                    icon: _imagePaths.icForward,
-                    borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
-                    iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
-                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
-                    textAlign: TextAlign.center,
-                    flexibleText: true,
-                    padding: EmailViewBottomBarWidgetStyles.buttonPadding,
-                    backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                    textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
-                    verticalDirection: _responsiveUtils.isPortraitMobile(context),
-                    onTapActionCallback: () => emailActionCallback.call(EmailActionType.forward, presentationEmail),
                   ),
-                );
+                ),
-              } else {
+              ),
-                return const SizedBox.shrink();
-              }
-            }),
             Expanded(
               child: TMailButtonWidget(
-                key: const Key('compose_new_email_button'),
+                key: const Key('reply_email_button'),
-                text: AppLocalizations.of(context).new_message,
+                text: AppLocalizations.of(context).reply,
-                icon: _imagePaths.icNewMessage,
+                icon: imagePaths.icReply,
                 borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
                 iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
                 iconColor: EmailViewBottomBarWidgetStyles.iconColor,
@@ -166,9 +117,38 @@ class EmailViewBottomBarWidget extends StatelessWidget {
                 flexibleText: true,
                 padding: EmailViewBottomBarWidgetStyles.buttonPadding,
                 backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
-                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
+                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(
-                verticalDirection: _responsiveUtils.isPortraitMobile(context),
+                  context,
-                onTapActionCallback: () => emailActionCallback.call(EmailActionType.compose, presentationEmail),
+                  responsiveUtils,
+                ),
+                verticalDirection: responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => emailActionCallback.call(
+                  EmailActionType.reply,
+                  presentationEmail,
+                ),
+              ),
+            ),
+            Expanded(
+              child: TMailButtonWidget(
+                key: const Key('forward_email_button'),
+                text: AppLocalizations.of(context).forward,
+                icon: imagePaths.icForward,
+                borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                iconColor: EmailViewBottomBarWidgetStyles.iconColor,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
+                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(
+                  context,
+                  responsiveUtils,
+                ),
+                verticalDirection: responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => emailActionCallback.call(
+                  EmailActionType.forward,
+                  presentationEmail,
+                ),
               ),
             ),
           ]

lib/features/mailbox/presentation/mailbox_view.dart

@@ -133,7 +133,6 @@ class MailboxView extends BaseMailboxView {
                         Obx(() {
                           if (!controller.isSelectionEnabled() && controller.responsiveUtils.isPortraitMobile(context)) {
                             return Container(
-                              color: AppColor.colorBgMailbox,
                               width: double.infinity,
                               padding: const EdgeInsets.all(16),
                               child: SafeArea(
@@ -142,9 +141,10 @@ class MailboxView extends BaseMailboxView {
                                   padding: EdgeInsets.zero,
                                   title: '${AppLocalizations.of(context).version} ',
                                   textStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
-                                    fontSize: 16,
+                                    fontSize: 13,
-                                    color: AppColor.colorContentEmail,
+                                    height: 16 / 13,
-                                    fontWeight: FontWeight.w500
+                                    color: AppColor.steelGray400,
+                                    fontWeight: FontWeight.w400,
                                   ),
                                 ),
                               ),

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -111,7 +111,6 @@ class MailboxView extends BaseMailboxView {
                 ],
               ),
             Container(
-              color: AppColor.colorBgMailbox,
               width: double.infinity,
               alignment: controller.responsiveUtils.isDesktop(context)
                 ? AlignmentDirectional.centerStart
@@ -122,8 +121,9 @@ class MailboxView extends BaseMailboxView {
                 title: '${AppLocalizations.of(context).version.toLowerCase()} ',
                 textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
                   fontSize: 13,
-                  color: AppColor.colorTextBody,
+                  height: 16 / 13,
-                  fontWeight: FontWeight.normal
+                  color: AppColor.steelGray400,
+                  fontWeight: FontWeight.w400,
                 ),
               ),
             ),

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -371,6 +371,7 @@ mixin MailboxWidgetMixin {
           softWrap: CommonTextStyle.defaultSoftWrap,
           style: Theme.of(context).textTheme.bodyMedium?.copyWith(
             fontSize: 14,
+            height: 18 / 14,
             color: Colors.black,
             fontWeight: FontWeight.w400,
           )

lib/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart

@@ -3,16 +3,11 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 
 class LabelMailboxItemWidgetStyles {
-  static const double labelTeamMailboxTextSize = 16;
+  static const double labelFolderTextSize = 14;
-  static const double labelFolderTextSize = 15;
-  static const double teamMailboxTextSize = 15;
 
-  static const Color labelTeamMailboxTextColor = Colors.black;
+  static const Color labelFolderTextColor = Colors.black;
-  static const Color labelFolderTextColor = AppColor.colorNameEmail;
+  static const Color teamMailboxEmailTextColor = AppColor.steelGray400;
-  static const Color teamMailboxTextColor = AppColor.colorEmailAddressFull;
 
-  static const FontWeight labelTeamMailboxTextFontWeight = FontWeight.bold;
+  static const FontWeight labelFolderTextFontWeight = FontWeight.w400;
-  static const FontWeight labelFolderTextFontWeight = FontWeight.normal;
-  static const FontWeight teamMailboxTextFontWeight = FontWeight.w400;
   static const FontWeight labelFolderSelectedFontWeight = FontWeight.bold;
 }

lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart

@@ -34,6 +34,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
       children: [
         if (showTrailing)
           Row(
@@ -41,9 +42,9 @@ class LabelMailboxItemWidget extends StatelessWidget {
               Expanded(
                 child: TextOverflowBuilder(
                   mailboxNode.item.getDisplayName(context),
-                  style: TextStyle(
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    fontSize: _mailboxNameTextSize,
+                    fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
-                    color: _mailboxNameTextColor,
+                    color: LabelMailboxItemWidgetStyles.labelFolderTextColor,
                     fontWeight: _mailboxNameTextFontWeight
                   ),
                 ),
@@ -63,40 +64,30 @@ class LabelMailboxItemWidget extends StatelessWidget {
         else
           TextOverflowBuilder(
             mailboxNode.item.getDisplayName(context),
-            style: TextStyle(
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-              fontSize: _mailboxNameTextSize,
+              fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
-              color: _mailboxNameTextColor,
+              color: LabelMailboxItemWidgetStyles.labelFolderTextColor,
               fontWeight: _mailboxNameTextFontWeight
             ),
           ),
         if (mailboxNode.item.isTeamMailboxes)
           TextOverflowBuilder(
             mailboxNode.item.emailTeamMailBoxes,
-            style: const TextStyle(
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-              fontSize: LabelMailboxItemWidgetStyles.teamMailboxTextSize,
+              fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
-              color: LabelMailboxItemWidgetStyles.teamMailboxTextColor,
+              color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
-              fontWeight: LabelMailboxItemWidgetStyles.teamMailboxTextFontWeight
+              fontWeight: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight
             ),
           )
       ],
     );
   }
 
-  double get _mailboxNameTextSize => mailboxNode.item.isTeamMailboxes
-    ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextSize
-    : LabelMailboxItemWidgetStyles.labelFolderTextSize;
-
-  Color get _mailboxNameTextColor => mailboxNode.item.isTeamMailboxes
-    ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextColor
-    : LabelMailboxItemWidgetStyles.labelFolderTextColor;
-
   FontWeight get _mailboxNameTextFontWeight {
-    if (isSelected) {
+    if (isSelected || mailboxNode.item.isTeamMailboxes) {
       return LabelMailboxItemWidgetStyles.labelFolderSelectedFontWeight;
     } else {
-      return mailboxNode.item.isTeamMailboxes
+      return LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
-        ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextFontWeight
-        : LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
     }
   }
 }

lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart

@@ -7,6 +7,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/email/presentation_email.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
@@ -81,6 +82,9 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
               ),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: widget.mailboxNode.item.isTeamMailboxes
+                  ? CrossAxisAlignment.start
+                  : CrossAxisAlignment.center,
                 children: [
                   LeadingMailboxItemWidget(
                     imagePaths: _imagePaths,

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -23,6 +23,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/filter_message_button_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/mailbox_dashboard_view_web_style.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/compose_button_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/mark_mailbox_as_read_loading_banner.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart';
@@ -82,7 +83,11 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                     }),
                     Expanded(child: Row(children: [
                       Column(children: [
-                        _buildComposerButton(context),
+                        ComposeButtonWidget(
+                          imagePaths: controller.imagePaths,
+                          onTapAction: () =>
+                            controller.goToComposer(ComposerArguments()),
+                        ),
                         Expanded(child: SizedBox(
                           width: ResponsiveUtils.defaultSizeMenu,
                           child: Obx(() {
@@ -697,33 +702,4 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
       )
     );
   }
-
-  Widget _buildComposerButton(BuildContext context) {
-    return Container(
-      padding: const EdgeInsetsDirectional.only(
-        start: 16,
-        end: 16,
-        top: 16,
-        bottom: 8
-      ),
-      width: ResponsiveUtils.defaultSizeMenu,
-      alignment: Alignment.centerLeft,
-      child: TMailButtonWidget(
-        key: const Key('compose_email_button'),
-        text: AppLocalizations.of(context).compose,
-        icon: controller.imagePaths.icComposeWeb,
-        borderRadius: 10,
-        iconSize: 24,
-        iconColor: Colors.white,
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
-        backgroundColor: AppColor.blue700,
-        textStyle: const TextStyle(
-          fontSize: 15,
-          color: Colors.white,
-          fontWeight: FontWeight.w500
-        ),
-        onTapActionCallback: () => controller.goToComposer(ComposerArguments()),
-      ),
-    );
-  }
 }

lib/features/mailbox_dashboard/presentation/widgets/compose_button_widget.dart

@@ -0,0 +1,49 @@
+
+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/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class ComposeButtonWidget extends StatelessWidget {
+
+  final ImagePaths imagePaths;
+  final VoidCallback onTapAction;
+
+  const ComposeButtonWidget({
+    super.key,
+    required this.imagePaths,
+    required this.onTapAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsetsDirectional.only(
+        start: 16,
+        end: 16,
+        top: 16,
+        bottom: 8,
+      ),
+      width: ResponsiveUtils.defaultSizeMenu,
+      alignment: Alignment.centerLeft,
+      child: TMailButtonWidget(
+        key: const Key('compose_email_button'),
+        text: AppLocalizations.of(context).compose,
+        icon: imagePaths.icComposeWeb,
+        borderRadius: 10,
+        iconSize: 24,
+        iconColor: Colors.white,
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
+        backgroundColor: AppColor.blue700,
+        textStyle: const TextStyle(
+          fontSize: 15,
+          color: Colors.white,
+          fontWeight: FontWeight.w500,
+        ),
+        onTapActionCallback: onTapAction,
+      ),
+    );
+  }
+}

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

@@ -25,8 +25,7 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
            child: Column(
                children: [
                  if (!controller.responsiveUtils.isWebDesktop(context))
-                   Container(
+                   Padding(
-                       color: Colors.white,
                        padding: const EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 16),
                        child: Row(children: [
                          ApplicationLogoWidthTextWidget(),
@@ -146,7 +145,6 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                    ),
                  )),
                  Container(
-                   color: AppColor.colorBgMailbox,
                    width: double.infinity,
                    alignment: controller.responsiveUtils.isDesktop(context)
                      ? AlignmentDirectional.centerStart
@@ -157,8 +155,9 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                      title: '${AppLocalizations.of(context).version.toLowerCase()} ',
                      textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
                        fontSize: 13,
-                       color: AppColor.colorTextBody,
+                       height: 16 / 13,
-                       fontWeight: FontWeight.normal
+                       color: AppColor.steelGray400,
+                       fontWeight: FontWeight.w400,
                      ),
                    ),
                  ),

lib/features/quotas/domain/extensions/quota_extensions.dart

@@ -55,7 +55,7 @@ extension QuotasExtensions on Quota {
     if (isHardLimitReached) {
       return AppColor.colorQuotaError;
     } else {
-      return AppColor.colorLabelQuotas;
+      return AppColor.steelGray400;
     }
   }
 

lib/features/quotas/presentation/styles/quotas_banner_styles.dart

@@ -12,7 +12,7 @@ class QuotasBannerStyles {
   static const double space = 4;
   static const double borderRadius = 12;
 
-  static const Color messageTextColor = AppColor.colorLabelQuotas;
+  static const Color messageTextColor = AppColor.steelGray400;
 
   static const FontWeight titleFontWeight = FontWeight.w700;
   static const FontWeight messageFontWeight = FontWeight.w400;

lib/features/quotas/presentation/styles/quotas_view_styles.dart

@@ -15,7 +15,7 @@ class QuotasViewStyles {
   static const double progressStateTextSize = 13;
   static const double topLineSize = 1;
 
-  static const Color labelTextColor = AppColor.colorLabelQuotas;
+  static const Color labelTextColor = AppColor.steelGray400;
   static const Color webBackgroundColor = AppColor.colorBgDesktop;
   static const Color mobileBackgroundColor = Colors.white;
   static const Color progressBarBackgroundColor = AppColor.colorDivider;

lib/features/thread/presentation/mixin/base_email_item_tile.dart

@@ -63,7 +63,7 @@ mixin BaseEmailItemTile {
       !email.hasRead ? FontWeight.w600 : FontWeight.normal;
 
   Color buildTextColorForReadEmail(PresentationEmail email) =>
-      email.hasRead ? AppColor.colorContentEmail : AppColor.colorNameEmail;
+      email.hasRead ? AppColor.steelGray400 : Colors.black;
 
   bool hasMailboxLabel(bool isSearchEmailRunning, PresentationEmail email) {
     return isSearchEmailRunning && email.mailboxContain != null;
@@ -161,12 +161,12 @@ mixin BaseEmailItemTile {
         ensureHighlightVisible: true,
         styleOrigin: const TextStyle(
           fontSize: 13,
-          color: AppColor.colorContentEmail,
+          color: AppColor.steelGray400,
           fontWeight: FontWeight.normal
         ),
         styleWord: TextStyle(
           fontSize: 13,
-          color: AppColor.colorContentEmail,
+          color: AppColor.steelGray400,
           backgroundColor: Colors.amberAccent[200],
         )
       );
@@ -175,7 +175,7 @@ mixin BaseEmailItemTile {
         email.getPartialContent(),
         style: const TextStyle(
           fontSize: 13,
-          color: AppColor.colorContentEmail,
+          color: AppColor.steelGray400,
           fontWeight: FontWeight.normal)
       );
     }
@@ -349,8 +349,8 @@ mixin BaseEmailItemTile {
         height: 20,
         fit: BoxFit.fill,
         colorFilter: presentationEmail.hasRead
-          ? AppColor.colorCalendarEventRead.asFilter()
+          ? AppColor.steelGray400.asFilter()
-          : AppColor.colorCalendarEventUnread.asFilter(),
+          : Colors.black.asFilter(),
       ),
     );
   }

lib/features/thread/presentation/widgets/email_tile_web_builder.dart

@@ -65,6 +65,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
             EmailActionType.selection,
             widget.presentationEmail
           ),
+          hoverColor: Theme.of(context).colorScheme.outline.withOpacity(0.08),
           child: Container(
             padding: widget.padding ?? _getPaddingItem(context),
             decoration: _getDecorationItem(),
@@ -189,6 +190,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
             EmailActionType.preview,
             widget.presentationEmail
           ),
+          hoverColor: Theme.of(context).colorScheme.outline.withOpacity(0.08),
           onHover: (value) => _hoverNotifier.value = value,
           child: Container(
             padding: widget.padding ?? _getPaddingItem(context),
@@ -337,7 +339,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
               widget.presentationEmail
             ),
             onHover: (value) => _hoverNotifier.value = value,
-            hoverColor: AppColor.colorEmailTileHoverWeb,
+            hoverColor: Theme.of(context).colorScheme.outline.withOpacity(0.08),
             borderRadius: const BorderRadius.all(Radius.circular(14)),
             child: Container(
               padding: widget.padding ?? _getPaddingItem(context),
@@ -489,9 +491,10 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
     ) {
       return const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(8)),
-        color: AppColor.colorEmailTileHoverWeb);
+        color: AppColor.blue100,
+      );
     } else if (widget.isShowingEmailContent && responsiveUtils.isTabletLarge(context)) {
-      return const BoxDecoration(color: AppColor.colorItemEmailSelectedDesktop);
+      return const BoxDecoration(color: AppColor.blue100);
     } else {
       return null;
     }