Fix Team Mailbox name and email address are showing up incorrectly

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

lib/features/mailbox/presentation/mailbox_view.dart

@@ -133,6 +133,7 @@ class MailboxView extends BaseMailboxView {
                           if (!controller.isSelectionEnabled() && controller.responsiveUtils.isPortraitMobile(context)) {
                             return Container(
                               width: double.infinity,
+                              color: Colors.white,
                               padding: const EdgeInsets.all(16),
                               child: SafeArea(
                                 top: false,

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -116,6 +116,9 @@ class MailboxView extends BaseMailboxView {
                 ? AlignmentDirectional.centerStart
                 : AlignmentDirectional.center,
               padding: const EdgeInsets.all(16),
+              color: controller.responsiveUtils.isWebDesktop(context)
+                  ? AppColor.colorBgDesktop
+                  : Colors.white,
               child: ApplicationVersionWidget(
                 padding: EdgeInsets.zero,
                 title: '${AppLocalizations.of(context).version.toLowerCase()} ',

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

@@ -4,5 +4,7 @@ class MailboxItemWidgetStyles {
   static const double itemPadding = 10;
   static const double borderRadius = 8;
   static const double height = 36;
+  static const double teamMailboxHeight = 52;
   static const double labelIconSpace = 16;
+  static const double teamMailboxLabelSpace = 3;
 }

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

@@ -1,33 +0,0 @@
-
-import 'package:core/presentation/resources/image_paths.dart';
-import 'package:flutter/material.dart';
-import 'package:model/mailbox/select_mode.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
-
-class LeadingMailboxItemWidget extends StatelessWidget {
-
-  final ImagePaths imagePaths;
-  final MailboxNode mailboxNode;
-  final SelectMode selectionMode;
-  final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
-
-  const LeadingMailboxItemWidget({
-    super.key,
-    required this.imagePaths,
-    required this.mailboxNode,
-    this.selectionMode = SelectMode.INACTIVE,
-    this.onSelectMailboxFolderClick,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return MailboxIconWidget(
-      imagePaths: imagePaths,
-      mailboxNode: mailboxNode,
-      selectionMode: selectionMode,
-      onSelectMailboxFolderClick: onSelectMailboxFolderClick
-    );
-  }
-}

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

@@ -16,38 +16,47 @@ class MailboxIconWidget extends StatelessWidget {
   final MailboxNode mailboxNode;
   final SelectMode selectionMode;
   final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
+  final EdgeInsetsGeometry? padding;
 
   const MailboxIconWidget({
     super.key,
     required this.mailboxNode,
     required this.imagePaths,
     this.selectionMode = SelectMode.INACTIVE,
+    this.padding,
     this.onSelectMailboxFolderClick,
   });
 
   @override
   Widget build(BuildContext context) {
+    Widget? item;
+
     if (_isSelectionActivatedOnMobile) {
-      return InkWell(
+      item = InkWell(
         onTap: () => onSelectMailboxFolderClick?.call(mailboxNode),
         child: SvgPicture.asset(
           _getSelectionIcon(imagePaths),
           width: MailboxIconWidgetStyles.iconSize,
           height: MailboxIconWidgetStyles.iconSize,
-          fit: BoxFit.fill
+          fit: BoxFit.fill,
         )
       );
+    } else if (mailboxNode.item.isPersonal || mailboxNode.item.hasParentId()) {
+      item = SvgPicture.asset(
+        mailboxNode.item.getMailboxIcon(imagePaths),
+        width: MailboxIconWidgetStyles.iconSize,
+        height: MailboxIconWidgetStyles.iconSize,
+        fit: BoxFit.fill,
+      );
+    }
+
+    if (padding != null) {
+      return Padding(
+        padding: padding!,
+        child: item ?? const SizedBox.shrink(),
+      );
     } else {
-      if (mailboxNode.item.isPersonal || mailboxNode.item.hasParentId()) {
+      return item ?? const SizedBox.shrink();
-        return SvgPicture.asset(
-          mailboxNode.item.getMailboxIcon(imagePaths),
-          width: MailboxIconWidgetStyles.iconSize,
-          height: MailboxIconWidgetStyles.iconSize,
-          fit: BoxFit.fill
-        );
-      } else {
-        return const SizedBox();
-      }
     }
   }
 

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

@@ -16,7 +16,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.d
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/widgets/leading_mailbox_item_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
 
 class MailboxItemWidget extends StatefulWidget {
 
@@ -81,20 +81,26 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
               padding: const EdgeInsetsDirectional.symmetric(
                 horizontal: MailboxItemWidgetStyles.itemPadding,
               ),
-              height: MailboxItemWidgetStyles.height,
+              height: widget.mailboxNode.item.isTeamMailboxes
+                  ? MailboxItemWidgetStyles.teamMailboxHeight
+                  : MailboxItemWidgetStyles.height,
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: widget.mailboxNode.item.isTeamMailboxes
                   ? CrossAxisAlignment.start
                   : CrossAxisAlignment.center,
                 children: [
-                  LeadingMailboxItemWidget(
+                  MailboxIconWidget(
                     imagePaths: _imagePaths,
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
+                    padding: EdgeInsetsDirectional.only(
+                      end: widget.mailboxNode.item.isTeamMailboxes
+                          ? MailboxItemWidgetStyles.teamMailboxLabelSpace
+                          : MailboxItemWidgetStyles.labelIconSpace,
+                    ),
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
                   ),
-                  const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
                   Expanded(
                     child: LabelMailboxItemWidget(
                       itemKey: _key,
@@ -130,16 +136,22 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
               padding: const EdgeInsetsDirectional.symmetric(
                 horizontal: MailboxItemWidgetStyles.itemPadding,
               ),
-              height: MailboxItemWidgetStyles.height,
+              height: widget.mailboxNode.item.isTeamMailboxes
+                  ? MailboxItemWidgetStyles.teamMailboxHeight
+                  : MailboxItemWidgetStyles.height,
               child: Row(
                 children: [
-                  LeadingMailboxItemWidget(
+                  MailboxIconWidget(
                     imagePaths: _imagePaths,
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
+                    padding: EdgeInsetsDirectional.only(
+                      end: widget.mailboxNode.item.isTeamMailboxes
+                          ? MailboxItemWidgetStyles.teamMailboxLabelSpace
+                          : MailboxItemWidgetStyles.labelIconSpace,
+                    ),
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
                   ),
-                  const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
                   Expanded(
                     child: LabelMailboxItemWidget(
                       itemKey: _key,
@@ -175,16 +187,22 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 padding: const EdgeInsetsDirectional.symmetric(
                   horizontal: MailboxItemWidgetStyles.itemPadding,
                 ),
-                height: MailboxItemWidgetStyles.height,
+                height: widget.mailboxNode.item.isTeamMailboxes
+                    ? MailboxItemWidgetStyles.teamMailboxHeight
+                    : MailboxItemWidgetStyles.height,
                 child: Row(
                   children: [
-                    LeadingMailboxItemWidget(
+                    MailboxIconWidget(
                       imagePaths: _imagePaths,
                       mailboxNode: widget.mailboxNode,
                       selectionMode: widget.selectionMode,
+                      padding: EdgeInsetsDirectional.only(
+                        end: widget.mailboxNode.item.isTeamMailboxes
+                            ? MailboxItemWidgetStyles.teamMailboxLabelSpace
+                            : MailboxItemWidgetStyles.labelIconSpace,
+                      ),
                       onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
                     ),
-                    const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
                     Expanded(
                       child: LabelMailboxItemWidget(
                         itemKey: _key,
@@ -229,19 +247,25 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   padding: const EdgeInsetsDirectional.symmetric(
                     horizontal: MailboxItemWidgetStyles.itemPadding,
                   ),
-                  height: MailboxItemWidgetStyles.height,
+                  height: widget.mailboxNode.item.isTeamMailboxes
+                      ? MailboxItemWidgetStyles.teamMailboxHeight
+                      : MailboxItemWidgetStyles.height,
                   color: widget.mailboxNode.isSelected
                       ? AppColor.colorItemSelected
                       : Colors.transparent,
                   child: Row(
                     children: [
-                      LeadingMailboxItemWidget(
+                      MailboxIconWidget(
                         imagePaths: _imagePaths,
                         mailboxNode: widget.mailboxNode,
                         selectionMode: widget.selectionMode,
+                        padding: EdgeInsetsDirectional.only(
+                          end: widget.mailboxNode.item.isTeamMailboxes
+                              ? MailboxItemWidgetStyles.teamMailboxLabelSpace
+                              : MailboxItemWidgetStyles.labelIconSpace,
+                        ),
                         onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
                       ),
-                      const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
                       Expanded(
                         child: LabelMailboxItemWidget(
                           itemKey: _key,