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,47 +77,69 @@ 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),
-        (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
-            ? loadingWidget
+        (failure) => isScreenWithShortestSide
+            ? 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(
-      controller: controller.mailboxListScrollController,
-      key: const PageStorageKey('mailbox_list'),
-      physics: const ClampingScrollPhysics(),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Obx(() => controller.defaultMailboxIsNotEmpty
+    Widget bodyListMailbox = Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Obx(
+          () => controller.defaultMailboxIsNotEmpty
               ? _buildMailboxCategory(
                   context,
                   MailboxCategories.exchange,
                   controller.defaultRootNode,
                 )
-              : const SizedBox.shrink()),
-          Obx(() {
-            return MailboxVisibilityFoldersBarWidget(
-              imagePaths: controller.imagePaths,
-              expandMode: controller.foldersExpandMode.value,
-              onToggleExpandFolder: controller.toggleExpandFolders,
-            );
-          }),
-          Obx(() => AnimatedContainer(
-                duration: const Duration(milliseconds: 400),
-                child: controller.foldersExpandMode.value == ExpandMode.EXPAND
-                    ? buildFolders(context)
-                    : const Offstage(),
-              )),
-        ],
-      ),
+              : const SizedBox.shrink(),
+        ),
+        Obx(() {
+          return MailboxVisibilityFoldersBarWidget(
+            imagePaths: controller.imagePaths,
+            expandMode: controller.foldersExpandMode.value,
+            onToggleExpandFolder: controller.toggleExpandFolders,
+          );
+        }),
+        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,
-          height: 40,
+          width: isScreenWithShortestSide ? double.infinity : 315,
+          height: widget.mailboxNode.item.isTeamMailboxes
+              ? MailboxItemWidgetStyles.teamMailboxHeight
+              : 40,
           child: Row(children: [
             if (_isIconDisplayed)
               MailboxIconWidget(
@@ -77,12 +82,16 @@ class _MailBoxVisibilityFolderTileBuilderState
       ),
     );
 
-    return Row(
-      children: [
-        Flexible(child: bodyWidget),
-        const Spacer(),
-      ],
-    );
+    if (isScreenWithShortestSide) {
+      return bodyWidget;
+    } else {
+      return Row(
+        children: [
+          Flexible(child: bodyWidget),
+          const Spacer(),
+        ],
+      );
+    }
   }
 
   PresentationMailbox get _mailbox => widget.mailboxNode.item;