TF-3758 Update mailbox view on mobile web responsive

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

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

@@ -17,7 +17,7 @@ class CountOfEmailsWidget extends StatelessWidget {
       overflow: TextOverflow.ellipsis,
       style: PlatformInfo.isMobile
         ? ThemeUtils.textStyleInter400()
-        : Theme.of(context).textTheme.bodyMedium?.copyWith(
+        : Theme.of(context).textTheme.bodySmall?.copyWith(
             color: Colors.black,
           ),
     );

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

@@ -72,7 +72,6 @@ class FolderWidget extends StatelessWidget {
         borderRadius: BorderRadius.all(
           Radius.circular(borderRadius ?? MailboxItemWidgetStyles.borderRadius),
         ),
-        hoverColor: AppColor.blue100,
         child: item,
       ),
     );

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

@@ -4,7 +4,6 @@ import 'package:core/presentation/utils/responsive_utils.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:model/mailbox/expand_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
@@ -36,6 +35,8 @@ class FoldersBarWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isDesktop = responsiveUtils.isDesktop(context);
+
     Widget searchBarIcon = TMailButtonWidget.fromIcon(
       icon: imagePaths.icSearchBar,
       backgroundColor: Colors.transparent,
@@ -45,7 +46,7 @@ class FoldersBarWidget extends StatelessWidget {
       onTapActionCallback: onOpenSearchFolder,
     );
 
-    if (responsiveUtils.isWebDesktop(context)) {
+    if (isDesktop) {
       searchBarIcon = Transform(
         transform: Matrix4.translationValues(8, 0, 0),
         child: searchBarIcon,
@@ -62,7 +63,7 @@ class FoldersBarWidget extends StatelessWidget {
       onTapActionCallback: onAddNewFolder,
     );
 
-    if (responsiveUtils.isWebDesktop(context)) {
+    if (isDesktop) {
       newFolderIcon = Transform(
         transform: Matrix4.translationValues(8, 0, 0),
         child: newFolderIcon,
@@ -78,8 +79,8 @@ class FoldersBarWidget extends StatelessWidget {
 
     return Container(
       padding: padding ?? EdgeInsetsDirectional.only(
-        start: responsiveUtils.isWebDesktop(context) ? 10 : 26,
-        end: responsiveUtils.isWebDesktop(context) ? 0 : 8,
+        start: isDesktop ? 10 : 26,
+        end: isDesktop ? 0 : 8,
       ),
       height: height ?? 48,
       child: Row(
@@ -94,9 +95,12 @@ class FoldersBarWidget extends StatelessWidget {
                     DirectionUtils.isDirectionRTLByLanguage(context),
                   ),
                   iconColor: Colors.black,
-                  iconSize: PlatformInfo.isMobile ? 17 : 20,
+                  iconSize: 17,
+                  margin: isDesktop
+                    ? const EdgeInsetsDirectional.only(start: 8)
+                    : null,
                   backgroundColor: Colors.transparent,
-                  padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
+                  padding: const EdgeInsets.all(3),
                   tooltipMessage: expandMode!.getTooltipMessage(AppLocalizations.of(context)),
                   onTapActionCallback: () => onToggleExpandFolder?.call(),
                 )

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

@@ -3,7 +3,6 @@ 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';
@@ -72,7 +71,8 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
             itemKey: widget.itemKey,
             mailboxNode: widget.mailboxNode,
             imagePaths: widget.imagePaths,
-            onExpandFolderActionClick: widget.onClickExpandMailboxNodeAction,
+            responsiveUtils: widget.responsiveUtils,
+            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
           ),
       ],
     );
@@ -163,13 +163,13 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
   TextStyle get _displayNameTextStyle {
     if (isSelected) {
       return ThemeUtils.textStyleInter700(
-        color: PlatformInfo.isMobile ? AppColor.iconFolder : null,
+        color: responsiveUtils.isDesktop(context) ? null : AppColor.iconFolder,
         fontSize: 14,
       );
     } else {
-      return PlatformInfo.isMobile
-        ? ThemeUtils.textStyleInter500()
-        : ThemeUtils.textStyleBodyBody3(color: Colors.black);
+      return responsiveUtils.isWebDesktop(context)
+        ? ThemeUtils.textStyleBodyBody3(color: Colors.black)
+        : ThemeUtils.textStyleInter500();
     }
   }
 }

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

@@ -2,7 +2,6 @@ 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';
@@ -79,12 +78,10 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               DirectionUtils.isDirectionRTLByLanguage(context),
             ),
             iconColor: Colors.black,
-            iconSize: PlatformInfo.isMobile ? 17 : 20,
+            iconSize: 17,
             backgroundColor: Colors.transparent,
-            margin: PlatformInfo.isMobile
-              ? const EdgeInsetsDirectional.only(start: 8)
-              : null,
-            padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
+            margin: const EdgeInsetsDirectional.only(start: 8),
+            padding: const EdgeInsets.all(3),
             tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)),
             onTapActionCallback: () =>
                 widget.onToggleMailboxCategories(widget.categories, _key)),

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

@@ -1,8 +1,8 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package: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';
@@ -14,6 +14,7 @@ class MailboxExpandButton extends StatelessWidget {
   final GlobalKey itemKey;
   final MailboxNode mailboxNode;
   final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
   final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
 
   const MailboxExpandButton({
@@ -21,6 +22,7 @@ class MailboxExpandButton extends StatelessWidget {
     required this.itemKey,
     required this.mailboxNode,
     required this.imagePaths,
+    required this.responsiveUtils,
     required this.onExpandFolderActionClick,
   });
 
@@ -32,11 +34,9 @@ class MailboxExpandButton extends StatelessWidget {
         DirectionUtils.isDirectionRTLByLanguage(context),
       ),
       iconColor: _expandIconColor,
-      iconSize: PlatformInfo.isMobile ? 17 : 20,
-      margin: PlatformInfo.isMobile
-        ? const EdgeInsetsDirectional.only(start: 8)
-        : null,
-      padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
+      iconSize: 17,
+      margin: const EdgeInsetsDirectional.only(start: 8),
+      padding: const EdgeInsets.all(3),
       backgroundColor: Colors.transparent,
       tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
       onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey),

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

@@ -142,11 +142,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 ),
                 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,

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

@@ -36,8 +36,12 @@ class TrailingMailboxItemWidget extends StatelessWidget {
             ? EdgeInsets.zero
             : TrailingMailboxItemWidgetStyles.menuIconMargin,
           icon: imagePaths.icMoreVertical,
-          iconSize: TrailingMailboxItemWidgetStyles.menuIconSize,
-          padding: TrailingMailboxItemWidgetStyles.menuIconPadding,
+          iconSize: mailboxNode.item.isTeamMailboxes
+            ? 17
+            : TrailingMailboxItemWidgetStyles.menuIconSize,
+          padding:  mailboxNode.item.isTeamMailboxes
+            ? const EdgeInsets.all(3)
+            : TrailingMailboxItemWidgetStyles.menuIconPadding,
           backgroundColor: TrailingMailboxItemWidgetStyles.menuIconBackgroundColor,
           onTapActionAtPositionCallback: (position) => onMenuActionClick?.call(position, mailboxNode),
         );