TF-984 Apply new design for destination picker view

2022-10-10 17:58:15 +07:00
parent c212a8c8f9
commit 1c6e5002f8
6 changed files with 230 additions and 452 deletions
@@ -148,6 +148,8 @@ extension AppColor on Color {
  static const colorCloseButton = Color(0xFF818C99);
  static const colorDropShadow = Color(0x0F000000);
  static const colorBackgroundKeyboard = Color(0xFFD2D5DC);
+  static const colorShadowLayerBottom = Color(0x29000000);
+  static const colorShadowLayerTop = Color(0x1F000000);

  static const mapGradientColor = [
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -8,8 +8,7 @@ import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
-import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart';
-import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart';
+import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
@@ -22,6 +21,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 class DestinationPickerView extends GetWidget<DestinationPickerController>
    with AppLoaderMixin {

+  final _maxHeight = 656.0;
  final _imagePaths = Get.find<ImagePaths>();
  final _responsiveUtils = Get.find<ResponsiveUtils>();

@@ -37,236 +37,74 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      mailboxIdSelected = arguments.mailboxIdSelected;
    }

-    if (BuildUtils.isWeb) {
-      return PointerInterceptor(
+    return PointerInterceptor(
+      child: Card(
+        margin: EdgeInsets.zero,
+        borderOnForeground: false,
+        color: Colors.transparent,
        child: GestureDetector(
          onTap: () => controller.closeDestinationPicker(),
-          child: Scaffold(
-            backgroundColor: AppColor.colorShadowDestinationPicker,
-            body: Align(
-              alignment: Alignment.center,
-              child: Card(
-                color: Colors.white,
-                margin: _getMarginDestinationPicker(context),
-                elevation: 16,
-                shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.all(Radius.circular(14))),
+          child: SafeArea(
+            top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
+            bottom: false,
+            left: false,
+            right: false,
+            child: Center(
                child: Container(
-                    decoration: const BoxDecoration(
+                    margin: _getMarginDestinationPicker(context),
+                    decoration: BoxDecoration(
                        color: Colors.white,
-                        borderRadius: BorderRadius.all(Radius.circular(14))),
+                        borderRadius: _getRadiusDestinationPicker(context),
+                        boxShadow: const [
+                          BoxShadow(
+                              color: AppColor.colorShadowLayerBottom,
+                              blurRadius: 96,
+                              spreadRadius: 96,
+                              offset: Offset.zero),
+                          BoxShadow(
+                              color: AppColor.colorShadowLayerTop,
+                              blurRadius: 2,
+                              spreadRadius: 2,
+                              offset: Offset.zero),
+                        ]),
                    width: _getWidthDestinationPicker(context),
+                    height: _getHeightDestinationPicker(context),
                    child: ClipRRect(
-                        borderRadius: const BorderRadius.all(Radius.circular(14)),
+                        borderRadius: _getRadiusDestinationPicker(context),
                        child: GestureDetector(
                            onTap: () => {},
-                            child: _buildDestinationPickerWebWidget(context, actions, mailboxIdSelected))
+                            child: SafeArea(
+                              top: false,
+                              bottom: false,
+                              left: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                              right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                              child: Column(children: [
+                                Obx(() => TopBarDestinationPickerBuilder(
+                                    controller.mailboxAction.value,
+                                    onCloseAction: () => controller.closeDestinationPicker())),
+                                Obx(() => controller.isSearchActive()
+                                    ? _buildInputSearchFormWidget(context)
+                                    : const SizedBox.shrink()),
+                                Expanded(child: Container(
+                                    color: actions?.getBackgroundColor(),
+                                    child: RefreshIndicator(
+                                        color: AppColor.primaryColor,
+                                        onRefresh: () async => controller.getAllMailboxAction(),
+                                        child: Obx(() => controller.isSearchActive()
+                                            ? _buildListMailboxSearched(context, actions, mailboxIdSelected)
+                                            : _buildListMailbox(context, actions, mailboxIdSelected)))
+                                ))
+                              ]),
+                            ))
                    )
                )
-              )
-            )
+            ),
          ),
        ),
-      );
-    }
-
-    final bodyMailboxLocation = _buildBodyMailboxLocation(
-        context,
-        actions,
-        mailboxIdSelected);
-
-    if (actions == MailboxActions.create) {
-      return PointerInterceptor(child: Card(
-          margin: EdgeInsets.zero,
-          borderOnForeground: false,
-          color: Colors.transparent,
-          child: GestureDetector(
-            onTap: () => controller.closeDestinationPicker(),
-            child: ResponsiveWidget(
-                responsiveUtils: _responsiveUtils,
-                mobile: SizedBox(
-                    child: bodyMailboxLocation,
-                    width: double.infinity),
-                landscapeMobile: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tablet: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeDrawer),
-                ]),
-                landscapeTablet: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeLeftMenuMobile),
-                ]),
-                tabletLarge: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeLeftMenuMobile),
-                ]),
-            ),
-          )
-      ));
-    } else {
-      return PointerInterceptor(child: Card(
-          margin: EdgeInsets.zero,
-          borderOnForeground: false,
-          color: Colors.transparent,
-          child: GestureDetector(
-            onTap: () => controller.closeDestinationPicker(),
-            child: ResponsiveWidget(
-                responsiveUtils: _responsiveUtils,
-                mobile: SizedBox(
-                    child: bodyMailboxLocation,
-                    width: double.infinity),
-                landscapeMobile: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tablet: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                landscapeTablet: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tabletLarge: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-            ),
-          )
-      ));
-    }
-  }
-
-  Widget _buildDestinationPickerWebWidget(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return Column(children: [
-      Obx(() => TopBarDestinationPickerWebBuilder(
-          controller.mailboxAction.value,
-          onCloseAction: () => controller.closeDestinationPicker())),
-      Obx(() => controller.isSearchActive()
-          ? _buildInputSearchFormWidget(context)
-          : const SizedBox.shrink()),
-      Expanded(child: Container(
-          color: actions?.getBackgroundColor(),
-          child: _buildBodyDestinationPicker(context, actions, mailboxIdSelected)))
-    ]);
-  }
-
-  Widget _buildBodyMailboxLocation(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return SafeArea(
-        top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
-        bottom: false,
-        left: false,
-        right: false,
-        child: GestureDetector(
-          onTap: () => {},
-          child: ClipRRect(
-              borderRadius: BorderRadius.only(
-                  topRight: Radius.circular(!BuildUtils.isWeb &&
-                      _responsiveUtils.isPortraitMobile(context)
-                          ? 14
-                          : 0),
-                  topLeft: Radius.circular(!BuildUtils.isWeb &&
-                      _responsiveUtils.isPortraitMobile(context)
-                          ? 14
-                          : 0)),
-              child: Container(
-                  color: Colors.white,
-                  child: Column(children: [
-                      SafeArea(
-                          left: !BuildUtils.isWeb &&
-                              _responsiveUtils.isLandscapeMobile(context),
-                          right: false,
-                          bottom: false,
-                          child: _buildAppBar(context)),
-                      const Divider(
-                          color: AppColor.colorDividerMailbox,
-                          height: 0.5,
-                          thickness: 0.2),
-                      Obx(() => controller.isSearchActive()
-                          ? SafeArea(
-                              bottom: false,
-                              top: false,
-                              right: false,
-                              child: _buildInputSearchFormWidget(context))
-                          : const SizedBox.shrink()),
-                      Expanded(child: Container(
-                          color: actions?.getBackgroundColor(),
-                          child: SafeArea(
-                              top: false,
-                              bottom: false,
-                              left: !BuildUtils.isWeb &&
-                                  _responsiveUtils.isLandscapeMobile(context),
-                              right: false,
-                              child: _buildBodyDestinationPicker(context, actions, mailboxIdSelected))))
-                  ])
-              )
-          ),
-        )
+      ),
    );
  }

-  Widget _buildAppBar(BuildContext context) {
-    return Obx(() => AppBarDestinationPickerBuilder(
-        controller.mailboxAction.value,
-        onCloseAction: () => controller.closeDestinationPicker()));
-  }
-
-  Widget _buildSearchBarWidget(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(
-            top: !BuildUtils.isWeb ? 12 : 0,
-            left: _responsiveUtils.isLandscapeMobile(context) &&
-                !BuildUtils.isWeb ? 0 : 16,
-            right: 16),
-        child: SearchBarView(
-            _imagePaths,
-            hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-            onOpenSearchViewAction: controller.enableSearch));
-  }
-
-  Widget _buildBodyDestinationPicker(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return RefreshIndicator(
-      color: AppColor.primaryColor,
-      onRefresh: () async => controller.getAllMailboxAction(),
-      child: Obx(() => controller.isSearchActive()
-        ? _buildListMailboxSearched(context, actions, mailboxIdSelected)
-        : _buildListMailbox(context, actions, mailboxIdSelected)));
-  }
-
  Widget _buildLoadingView() {
    return Obx(() => controller.viewState.value.fold(
      (failure) => const SizedBox.shrink(),
@@ -285,34 +123,15 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    return SingleChildScrollView(
        physics: const ClampingScrollPhysics(),
        child: Column(children: [
-          if (actions?.hasSearchActive() == true)
-            _buildSearchBarWidget(context),
+          if (actions?.canSearch() == true)
+            SearchBarView(
+                _imagePaths,
+                margin: const EdgeInsets.all(12),
+                hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
+                onOpenSearchViewAction: controller.enableSearch),
          _buildLoadingView(),
-          if (actions == MailboxActions.create && !BuildUtils.isWeb)
-            const SizedBox(height: 12),
          if (actions?.hasAllMailboxDefault() == true)
-            ...[
-              _buildUnifiedMailbox(context, actions, mailboxIdSelected),
-              const SizedBox(height: 12),
-              if (actions != MailboxActions.create &&
-                  (
-                    _responsiveUtils.isLandscapeMobile(context) ||
-                    _responsiveUtils.isPortraitMobile(context) ||
-                    _responsiveUtils.isTablet(context) ||
-                    _responsiveUtils.isLandscapeTablet(context) ||
-                    _responsiveUtils.isTabletLarge(context)
-                  )
-                && !BuildUtils.isWeb
-              )
-                 Padding(
-                    padding: EdgeInsets.only(
-                        left: _responsiveUtils.isLandscapeMobile(context) ? 40 : 55,
-                        right: 20),
-                    child: const Divider(
-                        color: AppColor.lineItemListColor,
-                        height: 0.5,
-                        thickness: 0.2)),
-            ],
+            _buildAllMailboxes(context, actions, mailboxIdSelected),
          Obx(() => controller.defaultMailboxHasChild
              ? _buildMailboxCategory(
                    context,
@@ -321,11 +140,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                    actions,
                    mailboxIdSelected)
              : const SizedBox.shrink()),
-          if (actions == MailboxActions.create) const SizedBox(height: 12),
-          if (actions != MailboxActions.create && !BuildUtils.isWeb)
-            const Padding(
-                padding: EdgeInsets.only(left: 55, right: 20),
-                child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
          Obx(() => controller.folderMailboxHasChild
              ? _buildMailboxCategory(
                    context,
@@ -346,100 +160,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      MailboxActions? actions,
      MailboxId? mailboxIdSelected
  ) {
-    if (actions?.canCollapseMailboxGroup() == false) {
-      return _buildBodyMailboxCategory(
-          context,
-          categories,
-          mailboxNode,
-          actions,
-          mailboxIdSelected);
-    }
-    return Column(children: [
-      _buildHeaderMailboxCategory(context, categories),
-      AnimatedContainer(
-          duration: const Duration(milliseconds: 400),
-          child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-              ? _buildBodyMailboxCategory(
-                    context,
-                    categories,
-                    mailboxNode,
-                    actions,
-                    mailboxIdSelected)
-              : const Offstage())
-    ]);
-  }
-
-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
-    return Padding(
-        padding: EdgeInsets.only(
-            left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
-            right: 16),
-        child: Row(children: [
-          Expanded(child: Text(categories.getTitle(context),
-              maxLines: 1,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-              overflow: CommonTextStyle.defaultTextOverFlow,
-              style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
-          buildIconWeb(
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                  color: AppColor.primaryColor, fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories))
-        ]));
-  }
-
-  Widget _buildBodyMailboxCategory(
-      BuildContext context,
-      MailboxCategories categories,
-      MailboxNode mailboxNode,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    final lastNode = mailboxNode.childrenItems?.last;
-
    return Container(
-        decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
-        margin: _marginMailboxList(context, actions),
-        padding: _paddingMailboxList(context, actions),
+        color: Colors.white,
        child: TreeView(
            key: Key('${categories.keyValue}_mailbox_list'),
            children: _buildListChildTileWidget(
                context,
                mailboxNode,
                mailboxIdSelected,
-                lastNode: lastNode,
+                lastNode: mailboxNode.childrenItems?.last,
                actions: actions)));
  }

-  EdgeInsets _marginMailboxList(BuildContext context, MailboxActions? actions) {
-    if (BuildUtils.isWeb) {
-      return EdgeInsets.only(
-          left: actions?.canCollapseMailboxGroup() == false ? 0 : 16,
-          right: actions?.canCollapseMailboxGroup() == false ? 0 : 16);
-    } else {
-      return EdgeInsets.only(
-          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
-          right: actions == MailboxActions.create
-              ? 16
-              : _responsiveUtils.isLandscapeMobile(context) ? 0 : 8);
-    }
-  }
-
-  EdgeInsets _paddingMailboxList(BuildContext context, MailboxActions? actions) {
-    if (BuildUtils.isWeb) {
-      return EdgeInsets.only(
-          left: actions == MailboxActions.create ? 0 : 8,
-          right: actions == MailboxActions.create ? 8 : 16);
-    } else {
-      return EdgeInsets.only(
-          left: actions == MailboxActions.create ? 16 : 8,
-          right: 0);
-    }
-  }
-
  List<Widget> _buildListChildTileWidget(
      BuildContext context,
      MailboxNode parentNode,
@@ -518,33 +250,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    ));
  }

-  Widget _buildUnifiedMailbox(
+  Widget _buildAllMailboxes(
      BuildContext context,
      MailboxActions? actions,
      MailboxId? mailboxIdSelected
  ) {
    if (actions == MailboxActions.move || actions == MailboxActions.select) {
-      return InkWell(
-        onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
-        child: ClipRRect(
-          borderRadius: const BorderRadius.all(Radius.circular(14)),
+      return Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
          child: Container(
-              color: Colors.white,
-              margin: EdgeInsets.only(
-                  left: BuildUtils.isWeb ||
-                    _responsiveUtils.isTablet(context) ||
-                    _responsiveUtils.isLandscapeTablet(context) ||
-                    _responsiveUtils.isTabletLarge(context) ||
-                    _responsiveUtils.isPortraitMobile(context)
-                      ? 8
-                      : 0,
-                  top: 8),
-              padding: EdgeInsets.only(
-                  left: !BuildUtils.isWeb &&
-                      _responsiveUtils.isLandscapeMobile(context)
-                        ? 8
-                        : 16,
-                  top: 16),
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
              child: Row(children: [
                SvgPicture.asset(
                    _imagePaths.icFolderMailbox,
@@ -583,7 +300,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      alignment: Alignment.center,
      margin: EdgeInsets.only(
          left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0,
-          top: BuildUtils.isWeb ? 16 : 0,
+          top: 16,
          right: 16),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
      child: MediaQuery(
@@ -658,27 +375,83 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    );
  }

+  BorderRadius _getRadiusDestinationPicker(BuildContext context) {
+    if (!BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context)) {
+      return BorderRadius.zero;
+    } else if (_responsiveUtils.isMobile(context)) {
+      return const BorderRadius.only(
+          topRight: Radius.circular(16),
+          topLeft: Radius.circular(16));
+    } else {
+      return const BorderRadius.all(Radius.circular(16));
+    }
+  }
+
  double _getWidthDestinationPicker(BuildContext context) {
    if (BuildUtils.isWeb) {
      if (_responsiveUtils.isMobile(context)) {
        return double.infinity;
      } else {
-        return 500;
+        return 556;
      }
    } else {
-      return 500;
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return double.infinity;
+      } else {
+        return 556;
+      }
    }
  }

+  double _getHeightDestinationPicker(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return double.infinity;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return _maxHeight;
+        } else {
+          return double.infinity;
+        }
+      }
+    } else {
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return double.infinity;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return _maxHeight;
+        } else {
+          return double.infinity;
+        }
+      }
+    }
+
+  }
+
  EdgeInsets _getMarginDestinationPicker(BuildContext context) {
    if (BuildUtils.isWeb) {
      if (_responsiveUtils.isMobile(context)) {
        return EdgeInsets.zero;
      } else {
-        return const EdgeInsets.symmetric(vertical: 50);
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return const EdgeInsets.symmetric(vertical: 12);
+        } else {
+          return const EdgeInsets.symmetric(vertical: 50);
+        }
      }
    } else {
-      return EdgeInsets.zero;
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return EdgeInsets.zero;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return const EdgeInsets.symmetric(vertical: 12);
+        } else {
+          return const EdgeInsets.symmetric(vertical: 50);
+        }
+      }
    }
  }
 }
@@ -6,12 +6,12 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class TopBarDestinationPickerWebBuilder extends StatelessWidget {
+class TopBarDestinationPickerBuilder extends StatelessWidget {

  final MailboxActions? _mailboxAction;
  final VoidCallback? onCloseAction;

-  const TopBarDestinationPickerWebBuilder(
+  const TopBarDestinationPickerBuilder(
      this._mailboxAction,
      {
        Key? key,
@@ -24,31 +24,35 @@ class TopBarDestinationPickerWebBuilder extends StatelessWidget {
    final _imagePaths = Get.find<ImagePaths>();

    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      color: Colors.white,
-      child: Row(
-          mainAxisAlignment: MainAxisAlignment.end,
+      height: 52,
+      child: Stack(
          children: [
-            const SizedBox(width: 40),
-            Expanded(
+            Center(
              child: Text(
                _mailboxAction?.getTitle(context) ?? '',
                maxLines: 1,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
+                softWrap: CommonTextStyle.defaultSoftWrap,
                overflow: CommonTextStyle.defaultTextOverFlow,
                textAlign: TextAlign.center,
                style: const TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                    fontWeight: FontWeight.w700))),
-            buildIconWeb(
-                iconSize: 32,
-                colorSelected: Colors.white,
-                splashRadius: 20,
-                iconPadding: const EdgeInsets.all(5),
-                icon: SvgPicture.asset(_imagePaths.icCloseMailbox, fit: BoxFit.fill),
-                tooltip: AppLocalizations.of(context).close,
-                onTap: () => onCloseAction?.call()),
+            Padding(
+              padding: const EdgeInsets.only(left: 8.0),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: buildIconWeb(
+                    iconSize: 24,
+                    colorSelected: Colors.white,
+                    splashRadius: 15,
+                    iconPadding: const EdgeInsets.all(3),
+                    icon: SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
+                    tooltip: AppLocalizations.of(context).close,
+                    onTap: () => onCloseAction?.call()),
+              ),
+            ),
          ]
      ),
    );
@@ -81,7 +81,7 @@ extension MailboxActionsExtension on MailboxActions {
    }
  }

-  bool hasSearchActive() {
+  bool canSearch() {
    switch(this) {
      case MailboxActions.moveEmail:
      case MailboxActions.move:
@@ -66,60 +66,71 @@ class MailBoxFolderTileBuilder {
    _onMenuActionClick = onMenuActionClick;
  }

-  Widget build() {
-    return Theme(
-        data: ThemeData(
-            splashColor: Colors.transparent,
-            highlightColor: Colors.transparent),
-        child: _buildMailboxItem()
-    );
-  }
+  Widget build() => _buildMailboxItem();

  Widget _buildMailboxItem() {
-    if (BuildUtils.isWeb) {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return StatefulBuilder(
-            builder: (BuildContext context, StateSetter setState) {
-              return InkWell(
-                onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
-                onHover: (value) => setState(() => isHoverItem = value),
-                child: Container(
-                    decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(10),
-                        color: backgroundColorItem),
-                    padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
-                    margin: const EdgeInsets.only(bottom: 4),
-                    child: Row(children: [
-                      _buildLeadingMailboxItem(),
-                      const SizedBox(width: 4),
-                      Expanded(child: _buildTitleFolderItem()),
-                      const SizedBox(width: 8),
-                      _buildTrailingMailboxItem()
-                    ])
-                ),
-              );
-            });
+    if (mailboxDisplayed == MailboxDisplayed.mailbox) {
+      if (BuildUtils.isWeb) {
+        return Theme(
+          data: ThemeData(
+              splashColor: Colors.transparent,
+              highlightColor: Colors.transparent),
+          child: StatefulBuilder(
+              builder: (BuildContext context, StateSetter setState) {
+                return InkWell(
+                  onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+                  onHover: (value) => setState(() => isHoverItem = value),
+                  child: Container(
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(10),
+                          color: backgroundColorItem),
+                      padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
+                      margin: const EdgeInsets.only(bottom: 4),
+                      child: Row(children: [
+                        _buildLeadingMailboxItem(),
+                        const SizedBox(width: 4),
+                        Expanded(child: _buildTitleFolderItem()),
+                        const SizedBox(width: 8),
+                        _buildTrailingMailboxItem()
+                      ])
+                  ),
+                );
+              }
+          ),
+        );
      } else {
        return AbsorbPointer(
          absorbing: !_mailboxNode.isActivated,
          child: Opacity(
            opacity: _mailboxNode.isActivated ? 1.0 : 0.3,
            child: InkWell(
-              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
-              radius: 14,
+              onTap: () => allSelectMode == SelectMode.ACTIVE
+                  ? _onSelectMailboxFolderClick?.call(_mailboxNode)
+                  : _onOpenMailboxFolderClick?.call(_mailboxNode),
              child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(14)),
-                child: Container(
-                    padding: const EdgeInsets.only(left: 16, top: 10, bottom: 10),
-                    child: Row(children: [
-                      _buildLeadingMailboxItem(),
-                      const SizedBox(width: 8),
-                      Expanded(child: _buildTitleFolderItem()),
-                      _buildSelectedIcon(),
-                      const SizedBox(width: 8),
-                      _buildTrailingMailboxItem()
-                    ])
-                ),
+                  borderRadius: const BorderRadius.all(Radius.circular(14)),
+                  child: Container(
+                      color: Colors.white,
+                      child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Padding(
+                              padding: EdgeInsets.symmetric(
+                                  vertical: _mailboxNode.hasChildren() ? 8 : 15),
+                              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+                                _buildLeadingMailboxItem(),
+                                const SizedBox(width: 8),
+                                Expanded(child: _buildTitleFolderItem()),
+                                _buildSelectedIcon(),
+                                const SizedBox(width: 8),
+                                _buildTrailingMailboxItem()
+                              ]),
+                            ),
+                            _buildDivider(),
+                          ]
+                      )
+                  )
              ),
            ),
          ),
@@ -130,34 +141,22 @@ class MailBoxFolderTileBuilder {
        absorbing: !_mailboxNode.isActivated,
        child: Opacity(
          opacity: _mailboxNode.isActivated ? 1.0 : 0.3,
-          child: InkWell(
-            onTap: () => allSelectMode == SelectMode.ACTIVE
-                ? _onSelectMailboxFolderClick?.call(_mailboxNode)
-                : _onOpenMailboxFolderClick?.call(_mailboxNode),
-            child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(14)),
-                child: Container(
-                    color: Colors.white,
-                    child: Column(
-                        mainAxisSize: MainAxisSize.min,
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          Padding(
-                            padding: EdgeInsets.symmetric(
-                                vertical: _mailboxNode.hasChildren() ? 8 : 15),
-                            child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-                              _buildLeadingMailboxItem(),
-                              const SizedBox(width: 8),
-                              Expanded(child: _buildTitleFolderItem()),
-                              _buildSelectedIcon(),
-                              const SizedBox(width: 8),
-                              _buildTrailingMailboxItem()
-                            ]),
-                          ),
-                          _buildDivider(),
-                        ]
-                    )
-                )
+          child: Material(
+            color: Colors.transparent,
+            child: InkWell(
+              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+              child: Container(
+                  color: Colors.transparent,
+                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                  child: Row(children: [
+                    _buildLeadingMailboxItem(),
+                    const SizedBox(width: 8),
+                    Expanded(child: _buildTitleFolderItem()),
+                    _buildSelectedIcon(),
+                    const SizedBox(width: 8),
+                    _buildTrailingMailboxItem()
+                  ])
+              ),
            ),
          ),
        ),
@@ -252,9 +251,9 @@ class MailBoxFolderTileBuilder {
                          ? AppColor.colorExpandMailbox
                          : AppColor.colorCollapseMailbox,
                      fit: BoxFit.fill),
-                  splashRadius: 20,
+                  splashRadius: mailboxDisplayed == MailboxDisplayed.mailbox ? 20 : 20,
                  iconPadding: EdgeInsets.zero,
-                  minSize: 40,
+                  minSize: mailboxDisplayed == MailboxDisplayed.mailbox ? 40 : 24,
                  tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
                      ? AppLocalizations.of(_context).collapse
                      : AppLocalizations.of(_context).expand,
@@ -189,7 +189,7 @@ packages:
      name: connectivity_plus_web
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.2.4"
+    version: "1.2.5"
  connectivity_plus_windows:
    dependency: transitive
    description:
@@ -757,7 +757,7 @@ packages:
    description:
      path: "."
      ref: master
-      resolved-ref: "5a27adb39dd8690ebbbea13171128633fe7aeae0"
+      resolved-ref: f5652f21f7b7005bcdcefb45fc406c876ce05618
      url: "https://github.com/linagora/jmap-dart-client.git"
    source: git
    version: "0.0.1"