TF-3950 Apply new style for Folder Visibility on mobile

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

lib/features/manage_account/presentation/language_and_region/language_and_region_view.dart

@@ -51,6 +51,7 @@ class LanguageAndRegionView extends GetWidget<LanguageAndRegionController> {
                     bottom: 16,
                   ),
                   isCenter: true,
+                  textAlign: TextAlign.center,
                 ),
               Expanded(
                 child: Padding(

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart

@@ -62,11 +62,12 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
                 padding: EdgeInsetsDirectional.only(
                   start: 16,
                   end: 16,
-                  bottom: 16,
+                  bottom: 8,
                 ),
                 isCenter: true,
+                textAlign: TextAlign.center,
               ),
-            _buildLoadingView(),
+            _buildLoadingView(context),
             Expanded(
               child: _buildListMailbox(context),
             ),
@@ -76,32 +77,39 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
     );
   }
 
-  Widget _buildLoadingView() {
+  Widget _buildLoadingView(BuildContext context) {
+    final isScreenWithShortestSide = controller
+        .responsiveUtils
+        .isScreenWithShortestSide(context);
+
     return Obx(
       () => controller.viewState.value.fold(
-        (failure) => const SizedBox(height: 24),
+        (failure) => isScreenWithShortestSide
-        (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
+            ? const SizedBox.shrink()
+            : const SizedBox(height: 24),
+        (success) => success is LoadingState ||
+                success is LoadingBuildTreeMailboxVisibility
             ? loadingWidget
+            : isScreenWithShortestSide
+                ? const SizedBox.shrink()
                 : const SizedBox(height: 24),
       ),
     );
   }
 
   Widget _buildListMailbox(BuildContext context) {
-    return SingleChildScrollView(
+    Widget bodyListMailbox = Column(
-      controller: controller.mailboxListScrollController,
-      key: const PageStorageKey('mailbox_list'),
-      physics: const ClampingScrollPhysics(),
-      child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-          Obx(() => controller.defaultMailboxIsNotEmpty
+        Obx(
+          () => controller.defaultMailboxIsNotEmpty
               ? _buildMailboxCategory(
                   context,
                   MailboxCategories.exchange,
                   controller.defaultRootNode,
                 )
-              : const SizedBox.shrink()),
+              : const SizedBox.shrink(),
+        ),
         Obx(() {
           return MailboxVisibilityFoldersBarWidget(
             imagePaths: controller.imagePaths,
@@ -109,14 +117,29 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
             onToggleExpandFolder: controller.toggleExpandFolders,
           );
         }),
-          Obx(() => AnimatedContainer(
+        Obx(
+          () => AnimatedContainer(
             duration: const Duration(milliseconds: 400),
             child: controller.foldersExpandMode.value == ExpandMode.EXPAND
                 ? buildFolders(context)
                 : const Offstage(),
-              )),
-        ],
           ),
+        ),
+      ],
+    );
+
+    if (controller.responsiveUtils.isScreenWithShortestSide(context)) {
+      bodyListMailbox = Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: bodyListMailbox,
+      );
+    }
+
+    return SingleChildScrollView(
+      controller: controller.mailboxListScrollController,
+      key: const PageStorageKey('mailbox_list'),
+      physics: const ClampingScrollPhysics(),
+      child: bodyListMailbox,
     );
   }
 

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart

@@ -1,5 +1,6 @@
 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:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
@@ -32,11 +33,13 @@ class MailBoxVisibilityFolderTileBuilder extends StatefulWidget {
 class _MailBoxVisibilityFolderTileBuilderState
     extends State<MailBoxVisibilityFolderTileBuilder> {
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   final GlobalKey _key = GlobalKey();
 
   @override
   Widget build(BuildContext context) {
+    final isScreenWithShortestSide = _responsiveUtils.isScreenWithShortestSide(context);
     final bodyWidget = Material(
       key: _key,
       type: MaterialType.transparency,
@@ -47,8 +50,10 @@ class _MailBoxVisibilityFolderTileBuilderState
         ),
         child: Container(
           padding: const EdgeInsets.symmetric(horizontal: 12),
-          width: 315,
+          width: isScreenWithShortestSide ? double.infinity : 315,
-          height: 40,
+          height: widget.mailboxNode.item.isTeamMailboxes
+              ? MailboxItemWidgetStyles.teamMailboxHeight
+              : 40,
           child: Row(children: [
             if (_isIconDisplayed)
               MailboxIconWidget(
@@ -77,6 +82,9 @@ class _MailBoxVisibilityFolderTileBuilderState
       ),
     );
 
+    if (isScreenWithShortestSide) {
+      return bodyWidget;
+    } else {
       return Row(
         children: [
           Flexible(child: bodyWidget),
@@ -84,6 +92,7 @@ class _MailBoxVisibilityFolderTileBuilderState
         ],
       );
     }
+  }
 
   PresentationMailbox get _mailbox => widget.mailboxNode.item;