TF-3758 Update text style for folder item

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

core/lib/presentation/extensions/color_extension.dart

@@ -254,6 +254,8 @@ extension AppColor on Color {
   static const blackAlpha40 = Color.fromRGBO(0, 0, 0, 0.4);
   static const blackAlpha20 = Color.fromRGBO(0, 0, 0, 0.2);
   static const textPrimary = Color(0xFF424244);
+  static const iconFolder = Color(0xFF297EF2);
+  static const folderDivider = Color(0xFFE4E8EC);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/utils/theme_utils.dart

@@ -222,7 +222,25 @@ class ThemeUtils {
     letterSpacing: 0.0,
     fontSize: fontSize ?? 15,
     height: 20 / (fontSize ?? 15),
-    color: color,
+    color: color ?? Colors.black,
+  );
+
+  static TextStyle textStyleInter500() => const TextStyle(
+    fontFamily: ConstantsUI.fontApp,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.0,
+    fontSize: 14,
+    height: 18 / 14,
+    color: Colors.black,
+  );
+
+  static TextStyle textStyleInter400() => const TextStyle(
+    fontFamily: ConstantsUI.fontApp,
+    fontWeight: FontWeight.normal,
+    letterSpacing: 0.01,
+    fontSize: 13,
+    height: 16 / 13,
+    color: Colors.black,
   );
 
   static TextStyle textStyleM3LabelLarge({Color? color}) => TextStyle(

lib/features/mailbox/presentation/mailbox_view.dart

@@ -7,6 +7,7 @@ import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions
 import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
@@ -38,7 +39,6 @@ class MailboxView extends BaseMailboxView {
                 child: _buildListMailbox(context),
               ),
             ),
-            const Divider(color: AppColor.colorDividerHorizontal),
             const QuotasView(),
             Container(
               width: double.infinity,
@@ -75,9 +75,10 @@ class MailboxView extends BaseMailboxView {
           }
         }),
         Obx(() {
-          if (controller.mailboxDashBoardController.listSendingEmails.isNotEmpty &&
+          if (controller.mailboxDashBoardController.listSendingEmails.isNotEmpty) {
-              PlatformInfo.isMobile) {
             return SendingQueueMailboxWidget(
+              imagePaths: controller.imagePaths,
+              responsiveUtils: controller.responsiveUtils,
               listSendingEmails: controller.mailboxDashBoardController.listSendingEmails,
               onOpenSendingQueueAction: () => controller.openSendingQueueViewAction(context),
               isSelected: controller.mailboxDashBoardController.dashboardRoute.value == DashboardRoutes.sendingQueue,
@@ -86,13 +87,25 @@ class MailboxView extends BaseMailboxView {
             return const SizedBox.shrink();
           }
         }),
-        const SizedBox(height: 8),
+        Obx(() {
-        const Divider(color: AppColor.colorDividerMailbox, height: 1),
+          if (controller.defaultMailboxIsNotEmpty ||
+              controller.mailboxDashBoardController.listSendingEmails.isNotEmpty) {
+            return const Padding(
+              padding: EdgeInsets.only(top: 8),
+              child: Divider(color: AppColor.folderDivider, height: 1),
+            );
+          } else {
+            return const SizedBox.shrink();
+          }
+        }),
         FoldersBarWidget(
           onOpenSearchFolder: () => controller.openSearchViewAction(context),
           onAddNewFolder:  () => controller.goToCreateNewMailboxView(context),
           imagePaths: controller.imagePaths,
           responsiveUtils: controller.responsiveUtils,
+          height: 40,
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          labelStyle: ThemeUtils.textStyleInter500(),
         ),
         Obx(() {
           if (controller.personalMailboxIsNotEmpty) {
@@ -105,7 +118,6 @@ class MailboxView extends BaseMailboxView {
             return const SizedBox.shrink();
           }
         }),
-        const SizedBox(height: 8),
         Obx(() {
           if (controller.teamMailboxesIsNotEmpty) {
             return _buildMailboxCategory(
@@ -137,9 +149,10 @@ class MailboxView extends BaseMailboxView {
           return Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              const SizedBox(height: 8),
+              const Padding(
-              const Divider(color: AppColor.colorDividerMailbox, height: 1),
+                padding: EdgeInsets.only(top: 8),
-              const SizedBox(height: 8),
+                child: Divider(color: AppColor.folderDivider, height: 1),
+              ),
               FolderWidget(
                 icon: controller.imagePaths.icHelp,
                 label: AppLocalizations.of(context).support,
@@ -147,7 +160,13 @@ class MailboxView extends BaseMailboxView {
                     .mailboxDashBoardController
                     .onGetHelpOrReportBug(contactSupportCapability!),
                 tooltip: AppLocalizations.of(context).getHelpOrReportABug,
-                padding: const EdgeInsets.symmetric(horizontal: 16)
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                itemPadding: const EdgeInsets.symmetric(
+                  horizontal: MailboxItemWidgetStyles.mobileItemPadding,
+                ),
+                borderRadius: MailboxItemWidgetStyles.mobileBorderRadius,
+                height: MailboxItemWidgetStyles.mobileHeight,
+                labelTextStyle: ThemeUtils.textStyleInter500(),
               ),
             ],
           );
@@ -189,7 +208,7 @@ class MailboxView extends BaseMailboxView {
         context: context,
         categories: categories,
         mailboxNode: mailboxNode,
-        padding: const EdgeInsets.symmetric(horizontal: 16),
+        padding: const EdgeInsets.symmetric(horizontal: 12),
       );
     }
     return Column(children: [
@@ -206,10 +225,10 @@ class MailboxView extends BaseMailboxView {
             ),
         isArrangeLTR: false,
         showIcon: true,
-        padding: const EdgeInsetsDirectional.only(
+        padding: const EdgeInsets.symmetric(horizontal: 24),
-          start: 26,
+        height: 40,
-          end: 16,
+        iconSpace: MailboxItemWidgetStyles.mobileLabelIconSpace,
-        ),
+        labelTextStyle: ThemeUtils.textStyleInter500(),
       )),
       AnimatedContainer(
         duration: const Duration(milliseconds: 400),
@@ -219,8 +238,8 @@ class MailboxView extends BaseMailboxView {
                 categories: categories,
                 mailboxNode: mailboxNode,
                 padding: const EdgeInsetsDirectional.only(
-                  start: 30,
+                  start: 24,
-                  end: 16,
+                  end: 12,
                 ),
               )
             : const Offstage())
@@ -235,7 +254,7 @@ class MailboxView extends BaseMailboxView {
               context,
               key: const Key('children_tree_mailbox_child'),
               isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-              paddingChild: const EdgeInsetsDirectional.only(start: 14),
+              paddingChild: const EdgeInsetsDirectional.only(start: 12),
               parent: Obx(() => MailboxItemWidget(
                 mailboxNode: mailboxNode,
                 mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value,

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

@@ -2,8 +2,12 @@
 class MailboxItemWidgetStyles {
   static const double selectionIconSize = 20;
   static const double itemPadding = 10;
+  static const double mobileItemPadding = 12;
   static const double borderRadius = 8;
+  static const double mobileBorderRadius = 10;
   static const double height = 36;
+  static const double mobileHeight = 40;
   static const double teamMailboxHeight = 52;
   static const double labelIconSpace = 16;
+  static const double mobileLabelIconSpace = 8;
 }

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

@@ -7,6 +7,8 @@ class TrailingMailboxItemWidgetStyles {
   static const Color menuIconBackgroundColor = Colors.transparent;
 
   static const EdgeInsetsGeometry countEmailsPadding = EdgeInsetsDirectional.only(start: 5);
+  static const EdgeInsetsGeometry mobileCountEmailsPadding =
+      EdgeInsetsDirectional.only(start: 8);
   static const EdgeInsetsGeometry menuIconMargin = EdgeInsetsDirectional.only(start: 5);
   static const EdgeInsetsGeometry menuIconPadding = EdgeInsetsDirectional.all(2);
 }

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

@@ -1,5 +1,6 @@
 
-import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 
 class CountOfEmailsWidget extends StatelessWidget {
@@ -13,11 +14,12 @@ class CountOfEmailsWidget extends StatelessWidget {
     return Text(
       value,
       maxLines: 1,
-      overflow: CommonTextStyle.defaultTextOverFlow,
+      overflow: TextOverflow.ellipsis,
-      softWrap: CommonTextStyle.defaultSoftWrap,
+      style: PlatformInfo.isMobile
-      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+        ? ThemeUtils.textStyleInter400()
-        color: Colors.black,
+        : Theme.of(context).textTheme.bodyMedium?.copyWith(
-      ),
+            color: Colors.black,
+          ),
     );
   }
 }

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

@@ -2,9 +2,8 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
 
 class FolderWidget extends StatelessWidget {
   final String icon;
@@ -12,6 +11,10 @@ class FolderWidget extends StatelessWidget {
   final VoidCallback onOpenFolderAction;
   final String? tooltip;
   final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? itemPadding;
+  final double? borderRadius;
+  final double? height;
+  final TextStyle? labelTextStyle;
 
   const FolderWidget({
     super.key,
@@ -20,35 +23,36 @@ class FolderWidget extends StatelessWidget {
     required this.onOpenFolderAction,
     this.tooltip,
     this.padding,
+    this.itemPadding,
+    this.borderRadius,
+    this.height,
+    this.labelTextStyle,
   });
 
   @override
   Widget build(BuildContext context) {
     Widget item = Container(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
         borderRadius: BorderRadius.all(
-          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+          Radius.circular(borderRadius ?? MailboxItemWidgetStyles.borderRadius),
         ),
       ),
-      padding: const EdgeInsets.symmetric(
+      padding: itemPadding ?? const EdgeInsets.symmetric(
         horizontal: MailboxItemWidgetStyles.itemPadding,
       ),
-      height: MailboxItemWidgetStyles.height,
+      height: height ?? MailboxItemWidgetStyles.height,
       child: Row(children: [
-        SvgPicture.asset(
+        MailboxIconWidget(
-          icon,
+          icon: icon,
-          width: MailboxIconWidgetStyles.iconSize,
+          padding: const EdgeInsetsDirectional.only(
-          height: MailboxIconWidgetStyles.iconSize,
+            end: MailboxItemWidgetStyles.mobileLabelIconSpace,
-          fit: BoxFit.fill,
+          ),
+          color: AppColor.iconFolder,
         ),
-        const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
         Expanded(
-          child: Padding(
+          child: TextOverflowBuilder(
-            padding: const EdgeInsets.symmetric(vertical: 3),
+            label,
-            child: TextOverflowBuilder(
+            style: labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black),
-              label,
-              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
-            ),
           ),
         )
       ]),
@@ -65,8 +69,8 @@ class FolderWidget extends StatelessWidget {
       color: Colors.transparent,
       child: InkWell(
         onTap: onOpenFolderAction,
-        borderRadius: const BorderRadius.all(
+        borderRadius: BorderRadius.all(
-          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+          Radius.circular(borderRadius ?? MailboxItemWidgetStyles.borderRadius),
         ),
         hoverColor: AppColor.blue100,
         child: item,

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

@@ -11,6 +11,9 @@ class FoldersBarWidget extends StatelessWidget {
   final VoidCallback onAddNewFolder;
   final ImagePaths imagePaths;
   final ResponsiveUtils responsiveUtils;
+  final double? height;
+  final EdgeInsetsGeometry? padding;
+  final TextStyle? labelStyle;
 
   const FoldersBarWidget({
     super.key,
@@ -18,6 +21,9 @@ class FoldersBarWidget extends StatelessWidget {
     required this.onAddNewFolder,
     required this.imagePaths,
     required this.responsiveUtils,
+    this.height,
+    this.padding,
+    this.labelStyle,
   });
 
   @override
@@ -56,17 +62,19 @@ class FoldersBarWidget extends StatelessWidget {
     }
 
     return Container(
-      padding: EdgeInsetsDirectional.only(
+      padding: padding ?? EdgeInsetsDirectional.only(
         start: responsiveUtils.isWebDesktop(context) ? 10 : 26,
         end: responsiveUtils.isWebDesktop(context) ? 0 : 8,
       ),
-      height: 48,
+      height: height ?? 48,
       child: Row(
         children: [
           Expanded(
             child: Text(
               AppLocalizations.of(context).folders,
-              style: ThemeUtils.textStyleInter700(color: Colors.black),
+              style: labelStyle ?? ThemeUtils.textStyleInter700(),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
             ),
           ),
           Row(children: [searchBarIcon, newFolderIcon]),

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

@@ -1,7 +1,9 @@
+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/theme_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
@@ -51,9 +53,7 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
   Widget build(BuildContext context) {
     final displayNameWidget = TextOverflowBuilder(
       widget.mailboxNode.item.getDisplayName(context),
-      style: widget.isSelected
+      style: _displayNameTextStyle,
-        ? ThemeUtils.textStyleInter700(color: Colors.black, fontSize: 14)
-        : ThemeUtils.textStyleBodyBody3(color: Colors.black),
     );
 
     final nameWithExpandIcon = Row(
@@ -159,4 +159,17 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
     return widget.responsiveUtils.isWebDesktop(context) &&
         widget.mailboxNode.item.allowedHasEmptyAction;
   }
+
+  TextStyle get _displayNameTextStyle {
+    if (isSelected) {
+      return ThemeUtils.textStyleInter700(
+        color: PlatformInfo.isMobile ? AppColor.iconFolder : null,
+        fontSize: 14,
+      );
+    } else {
+      return PlatformInfo.isMobile
+        ? ThemeUtils.textStyleInter500()
+        : ThemeUtils.textStyleBodyBody3(color: Colors.black);
+    }
+  }
 }

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

@@ -2,6 +2,7 @@ import 'package:core/presentation/resources/image_paths.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:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -21,6 +22,9 @@ class MailboxCategoryWidget extends StatefulWidget {
   final bool isArrangeLTR;
   final bool showIcon;
   final EdgeInsetsGeometry? padding;
+  final double? height;
+  final double? iconSpace;
+  final TextStyle? labelTextStyle;
 
   const MailboxCategoryWidget({
     super.key,
@@ -30,6 +34,9 @@ class MailboxCategoryWidget extends StatefulWidget {
     this.isArrangeLTR = true,
     this.showIcon = false,
     this.padding,
+    this.height,
+    this.iconSpace,
+    this.labelTextStyle,
   });
 
   @override
@@ -55,7 +62,7 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               height: MailboxIconWidgetStyles.iconSize,
               fit: BoxFit.fill,
             ),
-            const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+            SizedBox(width: widget.iconSpace ?? MailboxItemWidgetStyles.labelIconSpace),
           ],
         if (!widget.isArrangeLTR)
           Flexible(
@@ -63,7 +70,7 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               widget.categories.getTitle(context),
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+              style: widget.labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black),
             ),
           ),
         TMailButtonWidget.fromIcon(
@@ -72,9 +79,12 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               DirectionUtils.isDirectionRTLByLanguage(context),
             ),
             iconColor: Colors.black,
-            iconSize: 20,
+            iconSize: PlatformInfo.isMobile ? 17 : 20,
             backgroundColor: Colors.transparent,
-            padding: const EdgeInsets.all(5),
+            margin: PlatformInfo.isMobile
+              ? const EdgeInsetsDirectional.only(start: 8)
+              : null,
+            padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
             tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)),
             onTapActionCallback: () =>
                 widget.onToggleMailboxCategories(widget.categories, _key)),
@@ -84,13 +94,19 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               widget.categories.getTitle(context),
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+              style: widget.labelTextStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black),
             ),
           ),
       ],
     );
 
-    if (widget.padding != null) {
+    if (widget.padding != null && widget.height != null) {
+      return Container(
+        padding: widget.padding!,
+        height: widget.height!,
+        child: item,
+      );
+    } else if (widget.padding != null) {
       return Padding(padding: widget.padding!, child: item);
     } else {
       return item;

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

@@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
@@ -31,8 +32,11 @@ class MailboxExpandButton extends StatelessWidget {
         DirectionUtils.isDirectionRTLByLanguage(context),
       ),
       iconColor: _expandIconColor,
-      iconSize: 20,
+      iconSize: PlatformInfo.isMobile ? 17 : 20,
-      padding: const EdgeInsets.all(5),
+      margin: PlatformInfo.isMobile
+        ? const EdgeInsetsDirectional.only(start: 8)
+        : null,
+      padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
       backgroundColor: Colors.transparent,
       tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
       onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey),

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

@@ -1,3 +1,4 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
@@ -5,19 +6,27 @@ import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_
 
 class MailboxIconWidget extends StatelessWidget {
   final String icon;
+  final EdgeInsetsGeometry? padding;
+  final Color? color;
 
-  const MailboxIconWidget({super.key, required this.icon});
+  const MailboxIconWidget({
+    super.key,
+    required this.icon,
+    this.padding,
+    this.color,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsetsDirectional.only(
+      padding: padding ?? const EdgeInsetsDirectional.only(
         end: MailboxItemWidgetStyles.labelIconSpace,
       ),
       child: SvgPicture.asset(
         icon,
         width: MailboxIconWidgetStyles.iconSize,
         height: MailboxIconWidgetStyles.iconSize,
+        colorFilter: color?.asFilter(),
         fit: BoxFit.fill,
       ),
     );

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

@@ -156,22 +156,32 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
             child: InkWell(
               onLongPress: () => widget.onLongPressMailboxNodeAction?.call(widget.mailboxNode),
               onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
-              borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
+              borderRadius: const BorderRadius.all(
+                Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius),
+              ),
               child: Container(
                 decoration: BoxDecoration(
-                  borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
+                  borderRadius: const BorderRadius.all(
+                    Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius),
+                  ),
                   color: backgroundColorItem
                 ),
                 padding: const EdgeInsetsDirectional.symmetric(
-                  horizontal: MailboxItemWidgetStyles.itemPadding,
+                  horizontal: MailboxItemWidgetStyles.mobileItemPadding,
                 ),
                 height: widget.mailboxNode.item.isTeamMailboxes
                     ? MailboxItemWidgetStyles.teamMailboxHeight
-                    : MailboxItemWidgetStyles.height,
+                    : MailboxItemWidgetStyles.mobileHeight,
                 child: Row(
                   children: [
                     if (_isIconDisplayed)
-                      MailboxIconWidget(icon: _iconMailbox),
+                      MailboxIconWidget(
+                        icon: _iconMailbox,
+                        padding: const EdgeInsetsDirectional.only(
+                          end: MailboxItemWidgetStyles.mobileLabelIconSpace,
+                        ),
+                        color: AppColor.iconFolder,
+                      ),
                     Expanded(
                       child: LabelMailboxItemWidget(
                         itemKey: _key,
@@ -183,15 +193,8 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         onMenuActionClick: widget.onMenuActionClick,
                         onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
                         onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
-                    )
+                      ),
                     ),
-                    if (_isSelectActionNoValid)
-                      SvgPicture.asset(
-                        _imagePaths.icSelectedSB,
-                        width: MailboxItemWidgetStyles.selectionIconSize,
-                        height: MailboxItemWidgetStyles.selectionIconSize,
-                        fit: BoxFit.fill
-                      )
                   ]
                 ),
               ),

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

@@ -1,11 +1,13 @@
 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/theme_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
-import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/count_of_emails_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
 import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -13,73 +15,59 @@ class SendingQueueMailboxWidget extends StatelessWidget {
 
   final List<SendingEmail> listSendingEmails;
   final bool isSelected;
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
   final VoidCallback? onOpenSendingQueueAction;
 
   const SendingQueueMailboxWidget({
     super.key,
     required this.listSendingEmails,
+    required this.imagePaths,
+    required this.responsiveUtils,
     this.isSelected = false,
     this.onOpenSendingQueueAction
   });
 
   @override
   Widget build(BuildContext context) {
-    final imagePath = Get.find<ImagePaths>();
-    final responsiveUtils = Get.find<ResponsiveUtils>();
-
     return Padding(
-      padding: const EdgeInsets.only(left: 20, right: 16),
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
       child: Material(
         color: Colors.transparent,
         child: InkWell(
           onTap: onOpenSendingQueueAction,
-          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          borderRadius: const BorderRadius.all(
+            Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius),
+          ),
           child: Container(
             decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(8),
+              borderRadius: const BorderRadius.all(
-              color: isSelected ? AppColor.colorBgMailboxSelected : Colors.transparent),
+                Radius.circular(MailboxItemWidgetStyles.mobileBorderRadius),
-            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+              ),
-            child: Column(
+              color: backgroundColorItem,
-              mainAxisSize: MainAxisSize.min,
+            ),
-              mainAxisAlignment: MainAxisAlignment.center,
+            padding: const EdgeInsetsDirectional.symmetric(
+              horizontal: MailboxItemWidgetStyles.mobileItemPadding,
+            ),
+            height: MailboxItemWidgetStyles.mobileHeight,
+            child: Row(
               children: [
-                Row(
+                MailboxIconWidget(
-                  crossAxisAlignment: CrossAxisAlignment.center,
+                  icon: imagePaths.icMailboxSendingQueue,
-                  children: [
+                  padding: const EdgeInsetsDirectional.only(
-                    SizedBox(width: responsiveUtils.isLandscapeMobile(context) ? 20 : 28),
+                    end: MailboxItemWidgetStyles.mobileLabelIconSpace,
-                    SvgPicture.asset(
+                  ),
-                      imagePath.icMailboxSendingQueue,
+                  color: AppColor.iconFolder,
-                      width: PlatformInfo.isWeb ? 20 : 24,
+                ),
-                      height: PlatformInfo.isWeb ? 20 : 24,
+                Expanded(
-                      colorFilter: AppColor.primaryColor.asFilter(),
+                  child: TextOverflowBuilder(
-                      fit: BoxFit.fill),
+                    AppLocalizations.of(context).sendingQueue,
-                    const SizedBox(width: 12),
+                    style: _displayNameTextStyle,
-                    Expanded(child: Row(
+                  ),
-                      crossAxisAlignment: CrossAxisAlignment.end,
+                ),
-                      children: [
+                Padding(
-                        Expanded(
+                  padding: TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding,
-                          child: TextOverflowBuilder(
+                  child: CountOfEmailsWidget(value: _getCountSendingEmails()),
-                            AppLocalizations.of(context).sendingQueue,
-                            style: const TextStyle(
-                              fontSize: 15,
-                              color: AppColor.colorNameEmail,
-                              fontWeight: FontWeight.normal),
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsetsDirectional.only(start: 12),
-                          child: TextOverflowBuilder(
-                            _getCountSendingEmails(),
-                            style: const TextStyle(
-                              fontSize: 13,
-                              color: Colors.black,
-                              fontWeight: FontWeight.normal
-                            )
-                          ),
-                        )
-                      ],
-                    ))
-                  ]
                 ),
               ]
             ),
@@ -89,10 +77,29 @@ class SendingQueueMailboxWidget extends StatelessWidget {
     );
   }
 
+  Color get backgroundColorItem {
+    if (isSelected) {
+      return AppColor.blue100;
+    } else {
+      return Colors.transparent;
+    }
+  }
+
   String _getCountSendingEmails() {
     if (listSendingEmails.isEmpty) {
       return '';
     }
     return listSendingEmails.length <= 999 ? '${listSendingEmails.length}' : '999+';
   }
+
+  TextStyle get _displayNameTextStyle {
+    if (isSelected) {
+      return ThemeUtils.textStyleInter700(
+        color: AppColor.iconFolder,
+        fontSize: 14,
+      );
+    } else {
+      return ThemeUtils.textStyleInter500();
+    }
+  }
 }

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

@@ -45,12 +45,16 @@ class TrailingMailboxItemWidget extends StatelessWidget {
         return const SizedBox();
       } else if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
         return Padding(
-          padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
+          padding: PlatformInfo.isMobile
+            ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding
+            : TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
         );
       } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
         return Padding(
-          padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
+          padding: PlatformInfo.isMobile
+            ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding
+            : TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),
         );
       } else {
@@ -59,12 +63,16 @@ class TrailingMailboxItemWidget extends StatelessWidget {
     } else {
       if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
         return Padding(
-          padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
+          padding: PlatformInfo.isMobile
+            ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding
+            : TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countUnReadEmailsAsString),
         );
       } else if (mailboxNode.item.allowedToDisplayCountOfTotalEmails) {
         return Padding(
-          padding: TrailingMailboxItemWidgetStyles.countEmailsPadding,
+          padding: PlatformInfo.isMobile
+            ? TrailingMailboxItemWidgetStyles.mobileCountEmailsPadding
+            : TrailingMailboxItemWidgetStyles.countEmailsPadding,
           child: CountOfEmailsWidget(value: mailboxNode.item.countTotalEmailsAsString),
         );
       } else {