TF-3410 Sync changes between web and mobile

Signed-off-by: dab246 <tdvu@linagora.com>
2025-01-09 03:30:08 +07:00
parent 700e8bc479
commit dfd596011b
17 changed files with 167 additions and 126 deletions
@@ -206,7 +206,6 @@ extension AppColor on Color {
  static const colorLineComposer = Color(0xFFF4F4F4);
  static const colorPrefixButtonComposer = Color(0xFF8B9CAF);
  static const colorRichButtonComposer = Color(0xFFAEAEC0);
-  static const colorMobileRichButtonComposer = Color(0xFF8C9CAF);
  static const colorSelected = Color(0xFFE3F1FF);
  static const colorAttachmentBorder = Color(0xFFE5ECF3);
  static const colorProgressLoadingBackground = Color(0xFFE3F1FF);
@@ -125,7 +125,9 @@ class HtmlUtils {
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-      ${useDefaultFont ? '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">' : ''}
+      ${useDefaultFont && PlatformInfo.isMobile
+        ? '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">'
+        : ''}
      <style>
        ${useDefaultFont ? '''
          body {
@@ -46,7 +46,7 @@ class ComposeFloatingButton extends StatelessWidget {
        ),
        onPress: onTap,
        scrollController: scrollController,
-        color: AppColor.primaryColor,
+        color: AppColor.blue700,
        width: 154,
        height: 60,
        animateIcon: false
@@ -14,7 +14,7 @@ class BottomBarComposerWidgetStyle {
  static const Color backgroundColor = Colors.white;
  static const Color iconColor = AppColor.steelGrayA540;
  static const Color sendButtonBackgroundColor = AppColor.blue700;
-  static const Color selectedIconColor = AppColor.blue700;
+  static const Color selectedIconColor = AppColor.steelGrayA540;
  static const Color disabledIconColor = AppColor.colorRichButtonComposer;
  static const Color selectedBackgroundColor = AppColor.colorSelected;

@@ -89,7 +89,9 @@ class EmailViewAppBarWidget extends StatelessWidget {
                    ? _imagePaths.icStar
                    : _imagePaths.icUnStar,
                  iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
-                  iconColor: EmailViewAppBarWidgetStyles.iconColor,
+                  iconColor: presentationEmail.hasStarred
+                    ? null
+                    : EmailViewAppBarWidgetStyles.iconColor,
                  backgroundColor: Colors.transparent,
                  tooltipMessage: presentationEmail.hasStarred
                    ? AppLocalizations.of(context).not_starred
@@ -99,26 +101,21 @@ class EmailViewAppBarWidget extends StatelessWidget {
                    presentationEmail.hasStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred
                  )
                ),
-                Obx(() {
-                  if (PlatformInfo.isWeb && PlatformInfo.isCanvasKit) {
-                    return AbsorbPointer(
-                      absorbing: _singleEmailController.currentEmailLoaded.value == null,
-                      child: TMailButtonWidget.fromIcon(
-                        icon: _imagePaths.icPrinter,
-                        iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
-                        iconColor: EmailViewAppBarWidgetStyles.iconColor,
-                        backgroundColor: Colors.transparent,
-                        tooltipMessage: AppLocalizations.of(context).printAll,
-                        onTapActionCallback: () => onEmailActionClick?.call(
-                          presentationEmail,
-                          EmailActionType.printAll,
-                        ),
+                if (PlatformInfo.isWeb && PlatformInfo.isCanvasKit)
+                  Obx(() => AbsorbPointer(
+                    absorbing: _singleEmailController.currentEmailLoaded.value == null,
+                    child: TMailButtonWidget.fromIcon(
+                      icon: _imagePaths.icPrinter,
+                      iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
+                      iconColor: EmailViewAppBarWidgetStyles.iconColor,
+                      backgroundColor: Colors.transparent,
+                      tooltipMessage: AppLocalizations.of(context).printAll,
+                      onTapActionCallback: () => onEmailActionClick?.call(
+                        presentationEmail,
+                        EmailActionType.printAll,
                      ),
-                    );
-                  } else {
-                    return const SizedBox.shrink();
-                  }
-                }),
+                    ),
+                  )),
                TMailButtonWidget.fromIcon(
                  icon: _imagePaths.icDeleteComposer,
                  iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
@@ -288,31 +288,33 @@ class MailboxView extends BaseMailboxView {
                child: Text(
                  AppLocalizations.of(context).folders,
                  style: const TextStyle(
-                    fontSize: 17,
+                    fontSize: 15,
                    color: Colors.black,
-                    fontWeight: FontWeight.bold
-                  )
+                    fontWeight: FontWeight.bold,
+                  ),
                ),
              ),
              Row(children: [
                TMailButtonWidget.fromIcon(
                  icon: controller.imagePaths.icSearchBar,
-                  iconColor: AppColor.primaryColor,
+                  iconColor: AppColor.steelGrayA540,
+                  iconSize: 20,
                  backgroundColor: Colors.transparent,
                  tooltipMessage: AppLocalizations.of(context).searchForFolders,
                  onTapActionCallback: () => controller.openSearchViewAction(context)
                ),
                TMailButtonWidget.fromIcon(
                  icon: controller.imagePaths.icAddNewFolder,
-                  iconColor: AppColor.primaryColor,
+                  iconColor: AppColor.steelGrayA540,
+                  iconSize: 20,
                  backgroundColor: Colors.transparent,
                  tooltipMessage: AppLocalizations.of(context).newFolder,
                  onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
                ),
              ]),
-            ]),
+            ],
          ),
-        const SizedBox(height: 8),
+        ),
        Obx(() {
          if (controller.personalMailboxIsNotEmpty) {
            return _buildMailboxCategory(
@@ -354,8 +356,9 @@ class MailboxView extends BaseMailboxView {
                  : controller.imagePaths.icArrowRight,
            tooltipMessage: AppLocalizations.of(context).collapse,
            backgroundColor: Colors.transparent,
-            padding: EdgeInsets.zero,
-            iconColor: AppColor.primaryColor,
+            padding: const EdgeInsets.all(5),
+            iconColor: Colors.black,
+            iconSize: 20,
            onTapActionCallback: () => controller.toggleMailboxCategories(categories)
          ),
          Expanded(
@@ -363,10 +366,10 @@ class MailboxView extends BaseMailboxView {
              categories.getTitle(context),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                fontSize: 17,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 14,
                color: Colors.black,
-                fontWeight: FontWeight.bold
+                fontWeight: FontWeight.w400,
              )
            )
          ),
@@ -10,7 +10,7 @@ class MobileAppBarThreadWidgetStyle {
  static const double minHeight = 56;

  static const Color backgroundColor = Colors.white;
-  static const Color backButtonColor = AppColor.primaryColor;
+  static const Color backButtonColor = AppColor.steelGrayA540;

  static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
    if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
@@ -23,8 +23,9 @@ class MobileAppBarThreadWidgetStyle {
  static const EdgeInsetsGeometry titlePadding = EdgeInsets.symmetric(horizontal: 16);

  static const TextStyle emailCounterTitleStyle = TextStyle(
-    fontSize: 17,
-    color: AppColor.primaryColor
+    fontSize: 15,
+    fontWeight: FontWeight.w400,
+    color: AppColor.steelGrayA540,
  );
  static const TextStyle titleTextStyle = TextStyle(
    fontSize: 21,
@@ -6,30 +6,21 @@ import 'package:flutter/material.dart';
 class SelectionWebAppBarThreadWidgetStyle {
  static const double minHeight = 56;
  static const double iconSize = 20;
-  static const double mediumIconSize = 22;
-  static const double closeButtonIconSize = 28;

  static const Color backgroundColor = Colors.white;
-  static const Color cancelButtonColor = AppColor.primaryColor;
+  static const Color iconColor = AppColor.steelGrayA540;

  static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
    if (responsiveUtils.isMobile(context) || responsiveUtils.isTabletLarge(context)) {
-      return const EdgeInsets.symmetric(horizontal: 12, vertical: 8);
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
    } else {
      return const EdgeInsets.symmetric(horizontal: 24, vertical: 8);
    }
  }
-  static const EdgeInsetsGeometry closeButtonPadding = EdgeInsets.all(3);

  static const TextStyle emailCounterStyle = TextStyle(
-    fontSize: 17,
-    fontWeight: FontWeight.w500,
-    color: AppColor.primaryColor
+    fontSize: 15,
+    fontWeight: FontWeight.w400,
+    color: AppColor.steelGrayA540
  );
-
-  static Color getDeleteButtonColor(bool deletePermanentlyValid) {
-    return deletePermanentlyValid
-      ? AppColor.colorDeletePermanentlyButton
-      : AppColor.primaryColor;
-  }
 }
@@ -71,6 +71,8 @@ class ThreadView extends GetWidget<ThreadController>
                        ... [
                          Obx(() {
                            return AppBarThreadWidget(
+                              responsiveUtils: controller.responsiveUtils,
+                              imagePaths: controller.imagePaths,
                              mailboxSelected: controller.selectedMailbox,
                              listEmailSelected: controller.mailboxDashBoardController.emailsInCurrentMailbox.listEmailSelected,
                              selectMode: controller.mailboxDashBoardController.currentSelectMode.value,
@@ -1,4 +1,6 @@

+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/email_action_type.dart';
@@ -16,6 +18,9 @@ typedef OnCancelEditThreadAction = void Function();
 typedef OnEmailSelectionAction = void Function(EmailActionType, List<PresentationEmail>);

 class AppBarThreadWidget extends StatelessWidget {
+
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
  final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
  final OnOpenMailboxMenuActionClick openMailboxAction;
@@ -28,6 +33,8 @@ class AppBarThreadWidget extends StatelessWidget {

  const AppBarThreadWidget({
    Key? key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.mailboxSelected,
    required this.listEmailSelected,
    required this.selectMode,
@@ -44,6 +51,8 @@ class AppBarThreadWidget extends StatelessWidget {
    if (PlatformInfo.isWeb) {
      return WebAppBarThreadWidget(
        key: const Key('web_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        listEmailSelected: listEmailSelected,
        mailboxSelected: mailboxSelected,
        selectMode: selectMode,
@@ -57,6 +66,8 @@ class AppBarThreadWidget extends StatelessWidget {
    } else {
      return MobileAppBarThreadWidget(
        key: const Key('mobile_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        listEmailSelected: listEmailSelected,
        mailboxSelected: mailboxSelected,
        selectMode: selectMode,
@@ -3,7 +3,6 @@ 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/presentation_email.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/mailbox/select_mode.dart';
@@ -14,9 +13,9 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_b
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class DefaultMobileAppBarThreadWidget extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();

+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final List<PresentationEmail> listEmailSelected;
  final SelectMode selectMode;
@@ -26,8 +25,10 @@ class DefaultMobileAppBarThreadWidget extends StatelessWidget {
  final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
  final OnCancelEditThreadAction cancelEditThreadAction;

-  DefaultMobileAppBarThreadWidget({
+  const DefaultMobileAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.listEmailSelected,
    required this.mailboxSelected,
    required this.selectMode,
@@ -43,13 +44,13 @@ class DefaultMobileAppBarThreadWidget extends StatelessWidget {
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
        color: MobileAppBarThreadWidgetStyle.backgroundColor,
-        padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
+        padding: MobileAppBarThreadWidgetStyle.getPadding(context, responsiveUtils),
        constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
        child: Row(
          children: [
            TMailButtonWidget.fromIcon(
              key: const Key('mobile_mailbox_menu_button'),
-              icon: _imagePaths.icMenuDrawer,
+              icon: imagePaths.icMenuDrawer,
              backgroundColor: Colors.transparent,
              padding: MobileAppBarThreadWidgetStyle.mailboxMenuPadding,
              maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
@@ -69,7 +70,7 @@ class DefaultMobileAppBarThreadWidget extends StatelessWidget {
            ),
            TMailButtonWidget.fromIcon(
              key: const Key('mobile_filter_message_button'),
-              icon: _imagePaths.icFilter,
+              icon: imagePaths.icFilter,
              iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
              backgroundColor: Colors.transparent,
              maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
@@ -4,7 +4,6 @@ import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_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/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
@@ -13,17 +12,19 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_b
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class DefaultWebAppBarThreadWidget extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-
+  
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final FilterMessageOption filterOption;
  final OnOpenMailboxMenuActionClick openMailboxAction;
  final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
  final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;

-  DefaultWebAppBarThreadWidget({
+  const DefaultWebAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.mailboxSelected,
    required this.filterOption,
    required this.openMailboxAction,
@@ -36,13 +37,13 @@ class DefaultWebAppBarThreadWidget extends StatelessWidget {
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
        color: DefaultWebAppBarThreadWidgetStyle.backgroundColor,
-        padding: DefaultWebAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
+        padding: DefaultWebAppBarThreadWidgetStyle.getPadding(context, responsiveUtils),
        constraints: const BoxConstraints(minHeight: DefaultWebAppBarThreadWidgetStyle.minHeight),
        child: Row(
          children: [
            TMailButtonWidget.fromIcon(
              key: const Key('mailbox_menu_button'),
-              icon: _imagePaths.icMenuDrawer,
+              icon: imagePaths.icMenuDrawer,
              backgroundColor: Colors.transparent,
              padding: DefaultWebAppBarThreadWidgetStyle.mailboxMenuPadding,
              maxWidth: DefaultWebAppBarThreadWidgetStyle.buttonMaxWidth,
@@ -63,7 +64,7 @@ class DefaultWebAppBarThreadWidget extends StatelessWidget {
            ),
            TMailButtonWidget.fromIcon(
              key: const Key('filter_message_button'),
-              icon: _imagePaths.icFilter,
+              icon: imagePaths.icFilter,
              iconColor: DefaultWebAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
              backgroundColor: Colors.transparent,
              maxWidth: DefaultWebAppBarThreadWidgetStyle.buttonMaxWidth,
@@ -1,3 +1,5 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
@@ -8,6 +10,9 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/defau
 import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/selection_mobile_app_bar_thread_widget.dart';

 class MobileAppBarThreadWidget extends StatelessWidget {
+
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final List<PresentationEmail> listEmailSelected;
  final SelectMode selectMode;
@@ -19,6 +24,8 @@ class MobileAppBarThreadWidget extends StatelessWidget {

  const MobileAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.listEmailSelected,
    required this.mailboxSelected,
    required this.selectMode,
@@ -34,6 +41,8 @@ class MobileAppBarThreadWidget extends StatelessWidget {
    if (selectMode == SelectMode.ACTIVE) {
      return SelectionMobileAppBarThreadWidget(
        key: const Key('selection_mobile_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        listEmailSelected: listEmailSelected,
        mailboxSelected: mailboxSelected,
        selectMode: selectMode,
@@ -45,6 +54,8 @@ class MobileAppBarThreadWidget extends StatelessWidget {
    } else {
      return DefaultMobileAppBarThreadWidget(
        key: const Key('default_mobile_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        listEmailSelected: listEmailSelected,
        mailboxSelected: mailboxSelected,
        selectMode: selectMode,
@@ -3,7 +3,6 @@ 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/presentation_email.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/mailbox/select_mode.dart';
@@ -13,9 +12,9 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_b
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class SelectionMobileAppBarThreadWidget extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();

+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final List<PresentationEmail> listEmailSelected;
  final SelectMode selectMode;
@@ -24,8 +23,10 @@ class SelectionMobileAppBarThreadWidget extends StatelessWidget {
  final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
  final OnCancelEditThreadAction cancelEditThreadAction;

-  SelectionMobileAppBarThreadWidget({
+  const SelectionMobileAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.listEmailSelected,
    required this.mailboxSelected,
    required this.selectMode,
@@ -40,14 +41,14 @@ class SelectionMobileAppBarThreadWidget extends StatelessWidget {
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
        color: MobileAppBarThreadWidgetStyle.backgroundColor,
-        padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
+        padding: MobileAppBarThreadWidgetStyle.getPadding(context, responsiveUtils),
        constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
        child: Row(
          children: [
            TMailButtonWidget(
              key: const Key('mobile_cancel_selection_thread_button'),
-              text: '${listEmailSelected.length}',
-              icon: _imagePaths.icBack,
+              text: AppLocalizations.of(context).count_email_selected(listEmailSelected.length),
+              icon: imagePaths.icCancel,
              iconColor: MobileAppBarThreadWidgetStyle.backButtonColor,
              textStyle: MobileAppBarThreadWidgetStyle.emailCounterTitleStyle,
              backgroundColor: Colors.transparent,
@@ -56,7 +57,7 @@ class SelectionMobileAppBarThreadWidget extends StatelessWidget {
            const Spacer(),
            TMailButtonWidget.fromIcon(
              key: const Key('mobile_filter_message_button'),
-              icon: _imagePaths.icFilter,
+              icon: imagePaths.icFilter,
              iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
              backgroundColor: Colors.transparent,
              maxWidth: MobileAppBarThreadWidgetStyle.buttonMaxWidth,
@@ -4,7 +4,6 @@ import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_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/list_presentation_email_extension.dart';
@@ -16,9 +15,9 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_b
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class SelectionWebAppBarThreadWidget extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();

+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final List<PresentationEmail> listEmailSelected;
  final FilterMessageOption filterOption;
@@ -28,8 +27,10 @@ class SelectionWebAppBarThreadWidget extends StatelessWidget {
  final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
  final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;

-  SelectionWebAppBarThreadWidget({
+  const SelectionWebAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.listEmailSelected,
    required this.mailboxSelected,
    required this.filterOption,
@@ -44,17 +45,17 @@ class SelectionWebAppBarThreadWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(
      color: SelectionWebAppBarThreadWidgetStyle.backgroundColor,
-      padding: SelectionWebAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
+      width: double.infinity,
+      padding: SelectionWebAppBarThreadWidgetStyle.getPadding(context, responsiveUtils),
      constraints: const BoxConstraints(minHeight: SelectionWebAppBarThreadWidgetStyle.minHeight),
      child: Row(
        children: [
          TMailButtonWidget.fromIcon(
            key: const Key('cancel_selection_button'),
-            icon: _imagePaths.icClose,
+            icon: imagePaths.icCancel,
            backgroundColor: Colors.transparent,
-            iconColor: SelectionWebAppBarThreadWidgetStyle.cancelButtonColor,
-            iconSize: SelectionWebAppBarThreadWidgetStyle.closeButtonIconSize,
-            padding: SelectionWebAppBarThreadWidgetStyle.closeButtonPadding,
+            iconColor: SelectionWebAppBarThreadWidgetStyle.iconColor,
+            iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
            tooltipMessage: AppLocalizations.of(context).cancel,
            onTapActionCallback: cancelEditThreadAction,
          ),
@@ -71,46 +72,51 @@ class SelectionWebAppBarThreadWidget extends StatelessWidget {
            TMailButtonWidget.fromIcon(
              key: const Key('mark_as_read_email_selection_button'),
              icon: listEmailSelected.isAllEmailRead
-                ? _imagePaths.icUnread
-                : _imagePaths.icRead,
-              iconSize: SelectionWebAppBarThreadWidgetStyle.mediumIconSize,
+                  ? imagePaths.icUnread
+                  : imagePaths.icRead,
+              iconColor: SelectionWebAppBarThreadWidgetStyle.iconColor,
+              iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
              backgroundColor: Colors.transparent,
              tooltipMessage: listEmailSelected.isAllEmailRead
-                ? AppLocalizations.of(context).unread
-                : AppLocalizations.of(context).read,
+                  ? AppLocalizations.of(context).unread
+                  : AppLocalizations.of(context).read,
              onTapActionCallback: () {
                return emailSelectionAction(
-                  listEmailSelected.isAllEmailRead
-                    ? EmailActionType.markAsUnread
-                    : EmailActionType.markAsRead,
-                  listEmailSelected
+                    listEmailSelected.isAllEmailRead
+                        ? EmailActionType.markAsUnread
+                        : EmailActionType.markAsRead,
+                    listEmailSelected
                );
              },
            ),
          TMailButtonWidget.fromIcon(
            key: const Key('mark_as_star_email_selection_button'),
            icon: listEmailSelected.isAllEmailStarred
-              ? _imagePaths.icUnStar
-              : _imagePaths.icStar,
-            iconSize: SelectionWebAppBarThreadWidgetStyle.mediumIconSize,
+                ? imagePaths.icUnStar
+                : imagePaths.icStar,
+            iconColor: listEmailSelected.isAllEmailStarred
+                ? SelectionWebAppBarThreadWidgetStyle.iconColor
+                : null,
+            iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
            backgroundColor: Colors.transparent,
            tooltipMessage: listEmailSelected.isAllEmailStarred
-              ? AppLocalizations.of(context).not_starred
-              : AppLocalizations.of(context).starred,
+                ? AppLocalizations.of(context).not_starred
+                : AppLocalizations.of(context).starred,
            onTapActionCallback: () {
              return emailSelectionAction(
-                listEmailSelected.isAllEmailStarred
-                  ? EmailActionType.unMarkAsStarred
-                  : EmailActionType.markAsStarred,
-                listEmailSelected
+                  listEmailSelected.isAllEmailStarred
+                      ? EmailActionType.unMarkAsStarred
+                      : EmailActionType.markAsStarred,
+                  listEmailSelected
              );
            },
          ),
          if (mailboxSelected?.isDrafts == false)
            TMailButtonWidget.fromIcon(
              key: const Key('move_email_selection_button'),
-              icon: _imagePaths.icMove,
+              icon: imagePaths.icMoveMailbox,
              iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
+              iconColor: SelectionWebAppBarThreadWidgetStyle.iconColor,
              backgroundColor: Colors.transparent,
              tooltipMessage: AppLocalizations.of(context).move_message,
              onTapActionCallback: () => emailSelectionAction(EmailActionType.moveToMailbox, listEmailSelected),
@@ -119,34 +125,33 @@ class SelectionWebAppBarThreadWidget extends StatelessWidget {
            TMailButtonWidget.fromIcon(
              key: const Key('mark_as_spam_email_selection_button'),
              icon: mailboxSelected?.isSpam == true
-                ? _imagePaths.icNotSpam
-                : _imagePaths.icSpam,
+                  ? imagePaths.icNotSpam
+                  : imagePaths.icSpam,
+              iconColor: SelectionWebAppBarThreadWidgetStyle.iconColor,
              iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
              backgroundColor: Colors.transparent,
              tooltipMessage: mailboxSelected?.isSpam == true
-                ? AppLocalizations.of(context).un_spam
-                : AppLocalizations.of(context).mark_as_spam,
+                  ? AppLocalizations.of(context).un_spam
+                  : AppLocalizations.of(context).mark_as_spam,
              onTapActionCallback: () {
                return mailboxSelected?.isSpam == true
-                  ? emailSelectionAction(EmailActionType.unSpam, listEmailSelected)
-                  : emailSelectionAction(EmailActionType.moveToSpam, listEmailSelected);
+                    ? emailSelectionAction(EmailActionType.unSpam, listEmailSelected)
+                    : emailSelectionAction(EmailActionType.moveToSpam, listEmailSelected);
              },
            ),
          TMailButtonWidget.fromIcon(
            key: const Key('delete_email_selection_button'),
-            icon: _deletePermanentlyValid
-              ? _imagePaths.icDeleteComposer
-              : _imagePaths.icDelete,
+            icon: imagePaths.icDeleteComposer,
+            iconColor: SelectionWebAppBarThreadWidgetStyle.iconColor,
            iconSize: SelectionWebAppBarThreadWidgetStyle.iconSize,
-            iconColor: SelectionWebAppBarThreadWidgetStyle.getDeleteButtonColor(_deletePermanentlyValid),
            backgroundColor: Colors.transparent,
            tooltipMessage: _deletePermanentlyValid
-              ? AppLocalizations.of(context).delete_permanently
-              : AppLocalizations.of(context).move_to_trash,
+                ? AppLocalizations.of(context).delete_permanently
+                : AppLocalizations.of(context).move_to_trash,
            onTapActionCallback: () {
              return _deletePermanentlyValid
-                ? emailSelectionAction(EmailActionType.deletePermanently, listEmailSelected)
-                : emailSelectionAction(EmailActionType.moveToTrash, listEmailSelected);
+                  ? emailSelectionAction(EmailActionType.deletePermanently, listEmailSelected)
+                  : emailSelectionAction(EmailActionType.moveToTrash, listEmailSelected);
            },
          ),
        ]
@@ -1,4 +1,6 @@

+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
@@ -10,6 +12,8 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/selec

 class WebAppBarThreadWidget extends StatelessWidget {

+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
  final PresentationMailbox? mailboxSelected;
  final List<PresentationEmail> listEmailSelected;
  final SelectMode selectMode;
@@ -22,6 +26,8 @@ class WebAppBarThreadWidget extends StatelessWidget {

  const WebAppBarThreadWidget({
    super.key,
+    required this.responsiveUtils,
+    required this.imagePaths,
    required this.listEmailSelected,
    required this.mailboxSelected,
    required this.selectMode,
@@ -38,6 +44,8 @@ class WebAppBarThreadWidget extends StatelessWidget {
    if (selectMode == SelectMode.INACTIVE) {
      return DefaultWebAppBarThreadWidget(
        key: const Key('default_web_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        mailboxSelected: mailboxSelected,
        filterOption: filterOption,
        openMailboxAction: openMailboxAction,
@@ -47,6 +55,8 @@ class WebAppBarThreadWidget extends StatelessWidget {
    } else {
      return SelectionWebAppBarThreadWidget(
        key: const Key('selection_web_app_bar_thread_widget'),
+        imagePaths: imagePaths,
+        responsiveUtils: responsiveUtils,
        listEmailSelected: listEmailSelected,
        mailboxSelected: mailboxSelected,
        filterOption: filterOption,
@@ -53,11 +53,12 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
                  icon: _listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead,
                  borderRadius: 0,
                  iconSize: 20,
+                  iconColor: AppColor.steelGrayA540,
                  flexibleText: true,
                  textAlign: TextAlign.center,
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                  backgroundColor: Colors.transparent,
-                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.steelGrayA540),
                  verticalDirection: _verticalDirection(context),
                  onTapActionCallback: () {
                    onPressEmailSelectionActionClick?.call(
@@ -76,11 +77,14 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
                icon: _listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar,
                borderRadius: 0,
                iconSize: 20,
+                iconColor: _listSelectionEmail.isAllEmailStarred
+                  ? AppColor.steelGrayA540
+                  : null,
                flexibleText: true,
                textAlign: TextAlign.center,
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                backgroundColor: Colors.transparent,
-                textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                textStyle: const TextStyle(fontSize: 12, color: AppColor.steelGrayA540),
                verticalDirection: _verticalDirection(context),
                onTapActionCallback: () {
                  onPressEmailSelectionActionClick?.call(
@@ -95,14 +99,15 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
                child: TMailButtonWidget(
                  key: const Key('move_selected_email_to_mailbox_button'),
                  text: AppLocalizations.of(context).move,
-                  icon: _imagePaths.icMove,
+                  icon: _imagePaths.icMoveMailbox,
                  borderRadius: 0,
                  iconSize: 20,
+                  iconColor: AppColor.steelGrayA540,
                  textAlign: TextAlign.center,
                  flexibleText: true,
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                  backgroundColor: Colors.transparent,
-                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.steelGrayA540),
                  verticalDirection: _verticalDirection(context),
                  onTapActionCallback: () {
                    onPressEmailSelectionActionClick?.call(EmailActionType.moveToMailbox, _listSelectionEmail);
@@ -119,11 +124,12 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
                  icon: _currentMailbox?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam,
                  borderRadius: 0,
                  iconSize: 20,
+                  iconColor: AppColor.steelGrayA540,
                  flexibleText: true,
                  textAlign: TextAlign.center,
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                  backgroundColor: Colors.transparent,
-                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.steelGrayA540),
                  verticalDirection: _verticalDirection(context),
                  onTapActionCallback: () {
                    if (_currentMailbox?.isSpam == true) {
@@ -138,15 +144,15 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
              child: TMailButtonWidget(
                key: const Key('delete_selected_email_button'),
                text: AppLocalizations.of(context).delete,
-                icon: canDeletePermanently ? _imagePaths.icDeleteComposer : _imagePaths.icDelete,
-                iconColor: canDeletePermanently ? AppColor.colorDeletePermanentlyButton : AppColor.primaryColor,
+                icon: _imagePaths.icDeleteComposer,
                borderRadius: 0,
                iconSize: 20,
+                iconColor: AppColor.steelGrayA540,
                flexibleText: true,
                textAlign: TextAlign.center,
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                backgroundColor: Colors.transparent,
-                textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                textStyle: const TextStyle(fontSize: 12, color: AppColor.steelGrayA540),
                verticalDirection: _verticalDirection(context),
                onTapActionCallback: () {
                  if (canDeletePermanently) {