TF-3410 Update color and icon size of mailbox view

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -193,7 +193,7 @@ class MailboxView extends BaseMailboxView {
                   child: Text(
                     AppLocalizations.of(context).folders,
                     style: const TextStyle(
-                      fontSize: 17,
+                      fontSize: 15,
                       color: Colors.black,
                       fontWeight: FontWeight.bold,
                     ),
@@ -207,14 +207,16 @@ class MailboxView extends BaseMailboxView {
                     TMailButtonWidget.fromIcon(
                       icon: controller.imagePaths.icSearchBar,
                       backgroundColor: Colors.transparent,
-                      iconColor: AppColor.primaryColor,
+                      iconColor: AppColor.steelGrayA540,
+                      iconSize: 20,
                       tooltipMessage: AppLocalizations.of(context).searchForFolders,
                       onTapActionCallback: () => controller.openSearchViewAction(context)
                     ),
                     TMailButtonWidget.fromIcon(
                       icon: controller.imagePaths.icAddNewFolder,
                       backgroundColor: Colors.transparent,
-                      iconColor: AppColor.primaryColor,
+                      iconColor: AppColor.steelGrayA540,
+                      iconSize: 20,
                       tooltipMessage: AppLocalizations.of(context).newFolder,
                       onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
                     ),

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

@@ -354,9 +354,10 @@ mixin MailboxWidgetMixin {
               : DirectionUtils.isDirectionRTLByLanguage(context)
                   ? imagePaths.icArrowLeft
                   : imagePaths.icArrowRight,
-            iconColor: AppColor.primaryColor,
+            iconColor: Colors.black,
+            iconSize: 20,
             backgroundColor: Colors.transparent,
-            padding: EdgeInsets.zero,
+            padding: const EdgeInsets.all(5),
             tooltipMessage: expandMode == ExpandMode.EXPAND
               ? AppLocalizations.of(context).collapse
               : AppLocalizations.of(context).expand,
@@ -368,10 +369,10 @@ mixin MailboxWidgetMixin {
           maxLines: 1,
           overflow: CommonTextStyle.defaultTextOverFlow,
           softWrap: CommonTextStyle.defaultSoftWrap,
-          style: const TextStyle(
-            fontSize: 17,
+          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            fontSize: 14,
             color: Colors.black,
-            fontWeight: FontWeight.bold
+            fontWeight: FontWeight.w400,
           )
         )),
       ])

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

@@ -14,4 +14,5 @@ class LabelMailboxItemWidgetStyles {
   static const FontWeight labelTeamMailboxTextFontWeight = FontWeight.bold;
   static const FontWeight labelFolderTextFontWeight = FontWeight.normal;
   static const FontWeight teamMailboxTextFontWeight = FontWeight.w400;
+  static const FontWeight labelFolderSelectedFontWeight = FontWeight.bold;
 }

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

@@ -1,14 +1,13 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/utils/direction_utils.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 
 class LeadingMailboxItemWidgetStyles {
   static const double expandIconSize = 15;
   static const double expandIconSplashRadius = 12;
-  static const double emptyBoxSize = 32;
 
-  static const Color displayColor = AppColor.primaryColor;
+  static const Color displayColor = Colors.black;
   static const Color normalColor = AppColor.colorIconUnSubscribedMailbox;
 
   static const EdgeInsetsGeometry expandIconPadding = EdgeInsetsDirectional.only(start: 8);

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

@@ -1,6 +1,4 @@
 
-import 'package:core/utils/platform_info.dart';
-
 class MailboxIconWidgetStyles {
-  static double iconSize = PlatformInfo.isWeb ? 24 : 20;
+  static const double iconSize = 20.0;
 }

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

@@ -1,7 +1,6 @@
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
@@ -12,19 +11,21 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mai
 
 class LabelMailboxItemWidget extends StatelessWidget {
 
+  final ResponsiveUtils responsiveUtils;
   final MailboxNode mailboxNode;
   final bool showTrailing;
   final bool isItemHovered;
+  final bool isSelected;
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
   final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
 
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-
-  LabelMailboxItemWidget({
+  const LabelMailboxItemWidget({
     super.key,
     required this.mailboxNode,
+    required this.responsiveUtils,
     this.showTrailing = true,
     this.isItemHovered = false,
+    this.isSelected = false,
     this.onMenuActionClick,
     this.onEmptyMailboxActionCallback,
   });
@@ -47,7 +48,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
                   ),
                 ),
               ),
-              if (_responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
+              if (responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
                 EmptyMailboxPopupDialogWidget(
                   mailboxNode: mailboxNode,
                   onEmptyMailboxActionCallback: (mailboxNode) => onEmptyMailboxActionCallback?.call(mailboxNode),
@@ -89,7 +90,13 @@ class LabelMailboxItemWidget extends StatelessWidget {
     ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextColor
     : LabelMailboxItemWidgetStyles.labelFolderTextColor;
 
-  FontWeight get _mailboxNameTextFontWeight => mailboxNode.item.isTeamMailboxes
-    ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextFontWeight
-    : LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
+  FontWeight get _mailboxNameTextFontWeight {
+    if (isSelected) {
+      return LabelMailboxItemWidgetStyles.labelFolderSelectedFontWeight;
+    } else {
+      return mailboxNode.item.isTeamMailboxes
+        ? LabelMailboxItemWidgetStyles.labelTeamMailboxTextFontWeight
+        : LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
+    }
+  }
 }

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

@@ -3,7 +3,6 @@ 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:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/select_mode.dart';
@@ -15,6 +14,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class LeadingMailboxItemWidget extends StatelessWidget {
 
+  final ImagePaths imagePaths;
   final MailboxNode mailboxNode;
   final SelectMode selectionMode;
   final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
@@ -22,6 +22,7 @@ class LeadingMailboxItemWidget extends StatelessWidget {
 
   const LeadingMailboxItemWidget({
     super.key,
+    required this.imagePaths,
     required this.mailboxNode,
     this.selectionMode = SelectMode.INACTIVE,
     this.onExpandFolderActionClick,
@@ -30,24 +31,23 @@ class LeadingMailboxItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
     return Row(children: [
-      if (mailboxNode.hasChildren())
-        TMailButtonWidget.fromIcon(
+      Visibility.maintain(
+        visible: mailboxNode.hasChildren(),
+        child: TMailButtonWidget.fromIcon(
           icon: _getExpandIcon(context, imagePaths),
           iconColor: _expandIconColor,
-          padding: EdgeInsets.zero,
-          margin: const EdgeInsetsDirectional.only(start: 4),
+          iconSize: 20,
+          padding: const EdgeInsets.all(5),
           backgroundColor: Colors.transparent,
           tooltipMessage: _getExpandTooltipMessage(context),
           onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode)
-        )
-      else
-        const SizedBox(width: LeadingMailboxItemWidgetStyles.emptyBoxSize),
+        ),
+      ),
       Transform(
         transform: LeadingMailboxItemWidgetStyles.mailboxIconTransform(context),
         child: MailboxIconWidget(
+          imagePaths: imagePaths,
           mailboxNode: mailboxNode,
           selectionMode: selectionMode,
           onSelectMailboxFolderClick: onSelectMailboxFolderClick

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

@@ -3,7 +3,6 @@ import 'package:core/presentation/resources/image_paths.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';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
@@ -13,6 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method
 
 class MailboxIconWidget extends StatelessWidget {
 
+  final ImagePaths imagePaths;
   final MailboxNode mailboxNode;
   final SelectMode selectionMode;
   final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
@@ -20,14 +20,13 @@ class MailboxIconWidget extends StatelessWidget {
   const MailboxIconWidget({
     super.key,
     required this.mailboxNode,
+    required this.imagePaths,
     this.selectionMode = SelectMode.INACTIVE,
     this.onSelectMailboxFolderClick,
   });
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
     if (_isSelectionActivatedOnMobile) {
       return InkWell(
         onTap: () => onSelectMailboxFolderClick?.call(mailboxNode),

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

@@ -75,15 +75,15 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                 color: backgroundColorItem
               ),
-              padding: widget.mailboxNode.hasChildren()
-                ? const EdgeInsetsDirectional.symmetric(
-                    horizontal: MailboxItemWidgetStyles.padding,
-                    vertical: MailboxItemWidgetStyles.space
-                  )
-                : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+              padding: const EdgeInsetsDirectional.symmetric(
+                horizontal: MailboxItemWidgetStyles.padding,
+                vertical: MailboxItemWidgetStyles.space,
+              ),
               child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   LeadingMailboxItemWidget(
+                    imagePaths: _imagePaths,
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -92,8 +92,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
+                      responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
                       isItemHovered: _isItemHovered,
+                      isSelected: _isSelected,
                       onMenuActionClick: widget.onMenuActionClick,
                       onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                     )
@@ -116,15 +118,14 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                 color: backgroundColorItem
               ),
-              padding: widget.mailboxNode.hasChildren()
-                ? const EdgeInsetsDirectional.symmetric(
-                    horizontal: MailboxItemWidgetStyles.padding,
-                    vertical: MailboxItemWidgetStyles.space
-                  )
-                : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+              padding: const EdgeInsetsDirectional.symmetric(
+                horizontal: MailboxItemWidgetStyles.padding,
+                vertical: MailboxItemWidgetStyles.space,
+              ),
               child: Row(
                 children: [
                   LeadingMailboxItemWidget(
+                    imagePaths: _imagePaths,
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -133,8 +134,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
+                      responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
                       isItemHovered: _isItemHovered,
+                      isSelected: _isSelected,
                       onMenuActionClick: widget.onMenuActionClick,
                       onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                     )
@@ -157,12 +160,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                   color: backgroundColorItem
                 ),
-                padding: widget.mailboxNode.hasChildren()
-                  ? const EdgeInsetsDirectional.symmetric(
-                      horizontal: MailboxItemWidgetStyles.padding,
-                      vertical: MailboxItemWidgetStyles.space
-                    )
-                  : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+                padding: const EdgeInsetsDirectional.symmetric(
+                  horizontal: MailboxItemWidgetStyles.padding,
+                  vertical: MailboxItemWidgetStyles.space,
+                ),
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   mainAxisAlignment: MainAxisAlignment.center,
@@ -170,6 +171,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     Row(
                       children: [
                         LeadingMailboxItemWidget(
+                          imagePaths: _imagePaths,
                           mailboxNode: widget.mailboxNode,
                           selectionMode: widget.selectionMode,
                           onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -178,8 +180,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         const SizedBox(width: MailboxItemWidgetStyles.padding),
                         Expanded(
                           child: LabelMailboxItemWidget(
+                            responsiveUtils: _responsiveUtils,
                             mailboxNode: widget.mailboxNode,
                             isItemHovered: _isItemHovered,
+                            isSelected: _isSelected,
                             onMenuActionClick: widget.onMenuActionClick,
                             onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
                         )
@@ -213,18 +217,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
                 hoverColor: AppColor.colorMailboxHovered,
                 child: Container(
-                  padding: widget.mailboxNode.hasChildren()
-                    ? const EdgeInsetsDirectional.symmetric(
-                        horizontal: MailboxItemWidgetStyles.padding,
-                        vertical: MailboxItemWidgetStyles.space
-                      )
-                    : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+                  padding: const EdgeInsetsDirectional.symmetric(
+                    horizontal: MailboxItemWidgetStyles.padding,
+                    vertical: MailboxItemWidgetStyles.space,
+                  ),
                   color: widget.mailboxNode.isSelected
                       ? AppColor.colorItemSelected
                       : Colors.transparent,
                   child: Row(
                     children: [
                       LeadingMailboxItemWidget(
+                        imagePaths: _imagePaths,
                         mailboxNode: widget.mailboxNode,
                         selectionMode: widget.selectionMode,
                         onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -233,8 +236,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                       const SizedBox(width: MailboxItemWidgetStyles.padding),
                       Expanded(
                         child: LabelMailboxItemWidget(
+                          responsiveUtils: _responsiveUtils,
                           mailboxNode: widget.mailboxNode,
                           showTrailing: false,
+                          isSelected: _isSelected,
                           isItemHovered: _isItemHovered,
                           onMenuActionClick: widget.onMenuActionClick,
                           onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
@@ -259,12 +264,15 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
     }
   }
 
+  bool get _isSelected =>
+      widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id;
+
   Color get backgroundColorItem {
     if (widget.mailboxDisplayed == MailboxDisplayed.destinationPicker) {
       return Colors.white;
     } else {
-      if (widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id || _isItemHovered) {
-        return AppColor.colorBgMailboxSelected;
+      if (_isSelected || _isItemHovered) {
+        return AppColor.blue100;
       } else {
         return Colors.transparent;
       }