Apply new UI for contact support

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

lib/features/base/mixin/contact_support_mixin.dart

@@ -11,8 +11,6 @@ import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:tmail_ui_user/main/routes/route_utils.dart';
 import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
-typedef OnTapContactSupportAction = Function(ContactSupportCapability contactSupport);
-
 mixin ContactSupportMixin {
 
   void onGetHelpOrReportBug(

lib/features/mailbox/presentation/mailbox_view.dart

@@ -4,11 +4,13 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
+import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -89,7 +91,7 @@ class MailboxView extends BaseMailboxView {
                             mainAxisSize: MainAxisSize.min,
                             children: [
                               Divider(color: AppColor.colorDividerHorizontal),
-                              QuotasView(isDisplayedContactSupport: true)
+                              QuotasView()
                             ],
                           );
                         }),
@@ -292,27 +294,80 @@ class MailboxView extends BaseMailboxView {
             return const SizedBox.shrink();
           }
         }),
+        Obx(() {
+          final accountId = controller
+              .mailboxDashBoardController
+              .accountId
+              .value;
+
+          if (accountId == null) return const SizedBox.shrink();
+
+          final contactSupportCapability = controller
+              .mailboxDashBoardController
+              .sessionCurrent
+              ?.getContactSupportCapability(accountId);
+
+          if (contactSupportCapability?.isAvailable != true) {
+            return const SizedBox.shrink();
+          }
+
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const SizedBox(height: 8),
+              const Divider(color: AppColor.colorDividerMailbox, height: 1),
+              const SizedBox(height: 8),
+              FolderWidget(
+                icon: controller.imagePaths.icHelp,
+                label: AppLocalizations.of(context).support,
+                onOpenFolderAction: () => controller
+                    .mailboxDashBoardController
+                    .onGetHelpOrReportBug(contactSupportCapability!),
+                tooltip: AppLocalizations.of(context).getHelpOrReportABug,
+                padding: const EdgeInsets.symmetric(horizontal: 16)
+              ),
+            ],
+          );
+        }),
       ])
     );
   }
 
-  Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+  Widget _buildBodyMailboxCategory({
+    required BuildContext context,
+    required MailboxCategories categories,
+    required MailboxNode mailboxNode,
+    EdgeInsetsGeometry? padding,
+  }) {
     final lastNode = mailboxNode.childrenItems?.last;
 
-    return Container(
+    final treeView = TreeView(
-        margin: EdgeInsetsDirectional.only(
+      key: Key('${categories.keyValue}_mailbox_list'),
-          start: controller.responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
+      children: _buildListChildTileWidget(
-          end: 16
+        context,
-        ),
+        mailboxNode,
-        padding: const EdgeInsetsDirectional.only(start: 12),
+        lastNode: lastNode,
-        child: TreeView(
+      ),
-            key: Key('${categories.keyValue}_mailbox_list'),
+    );
-            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
+
+    if (padding != null) {
+      return Padding(
+        padding: padding,
+        child: treeView,
+      );
+    } else {
+      return treeView;
+    }
   }
 
   Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
     if (categories == MailboxCategories.exchange) {
-      return _buildBodyMailboxCategory(context, categories, mailboxNode);
+      return _buildBodyMailboxCategory(
+        context: context,
+        categories: categories,
+        mailboxNode: mailboxNode,
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+      );
     }
     return Column(children: [
       Obx(() => MailboxCategoryWidget(
@@ -327,15 +382,24 @@ class MailboxView extends BaseMailboxView {
               itemKey,
             ),
         isArrangeLTR: false,
-        padding: EdgeInsetsDirectional.only(
+        showIcon: true,
-          start: 16,
+        padding: const EdgeInsetsDirectional.only(
-          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
+          start: 26,
+          end: 16,
         ),
       )),
       AnimatedContainer(
         duration: const Duration(milliseconds: 400),
         child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-            ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+            ? _buildBodyMailboxCategory(
+                context: context,
+                categories: categories,
+                mailboxNode: mailboxNode,
+                padding: const EdgeInsetsDirectional.only(
+                  start: 30,
+                  end: 16,
+                ),
+              )
             : const Offstage())
     ]);
   }

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -6,10 +6,12 @@ import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
+import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -60,12 +62,11 @@ class MailboxView extends BaseMailboxView {
               ),
             )),
             const Divider(color: AppColor.colorDividerHorizontal),
-            QuotasView(
+            const QuotasView(
-              padding: const EdgeInsetsDirectional.only(
+              padding: EdgeInsetsDirectional.only(
                 start: QuotasViewStyles.padding,
                 top: QuotasViewStyles.padding,
               ),
-              isDisplayedContactSupport: !controller.responsiveUtils.isWebDesktop(context),
             ),
             Container(
               width: double.infinity,
@@ -196,7 +197,45 @@ class MailboxView extends BaseMailboxView {
           } else {
             return const SizedBox.shrink();
           }
-        })
+        }),
+        Obx(() {
+          final accountId = controller
+              .mailboxDashBoardController
+              .accountId
+              .value;
+
+          if (accountId == null) return const SizedBox.shrink();
+
+          final contactSupportCapability = controller
+              .mailboxDashBoardController
+              .sessionCurrent
+              ?.getContactSupportCapability(accountId);
+
+          if (contactSupportCapability?.isAvailable != true) {
+            return const SizedBox.shrink();
+          }
+
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const SizedBox(height: 8),
+              const Divider(color: AppColor.colorDividerMailbox, height: 1),
+              const SizedBox(height: 8),
+              FolderWidget(
+                icon: controller.imagePaths.icHelp,
+                label: AppLocalizations.of(context).support,
+                onOpenFolderAction: () => controller
+                    .mailboxDashBoardController
+                    .onGetHelpOrReportBug(contactSupportCapability!),
+                tooltip: AppLocalizations.of(context).getHelpOrReportABug,
+                padding: !controller.responsiveUtils.isDesktop(context)
+                  ? const EdgeInsets.symmetric(horizontal: 16)
+                  : null,
+              ),
+              const SizedBox(height: 16),
+            ],
+          );
+        }),
       ])
     );
     return Stack(
@@ -246,23 +285,31 @@ class MailboxView extends BaseMailboxView {
     );
   }
 
-  Widget _buildBodyMailboxCategory(
+  Widget _buildBodyMailboxCategory({
-    BuildContext context,
+    required BuildContext context,
-    MailboxCategories categories,
+    required MailboxCategories categories,
-    MailboxNode mailboxNode
+    required MailboxNode mailboxNode,
-  ) {
+    EdgeInsetsGeometry? padding,
+  }) {
     final lastNode = mailboxNode.childrenItems?.last;
 
-    return Container(
+    final treeView = TreeView(
-        padding: EdgeInsets.only(
+      key: Key('${categories.keyValue}_mailbox_list'),
-            right: controller.responsiveUtils.isDesktop(context) ? 0 : 16,
+      children: _buildListChildTileWidget(
-            left: controller.responsiveUtils.isDesktop(context) ? 0 : 16),
+        context,
-        child: TreeView(
+        mailboxNode,
-            key: Key('${categories.keyValue}_mailbox_list'),
+        lastNode: lastNode,
-            children: _buildListChildTileWidget(
+      ),
-                context,
+    );
-                mailboxNode,
+
-                lastNode: lastNode)));
+    if (padding != null) {
+      return Padding(
+        padding: padding,
+        child: treeView,
+      );
+    } else {
+      return treeView;
+    }
   }
 
   Widget _buildMailboxCategory(
@@ -271,7 +318,14 @@ class MailboxView extends BaseMailboxView {
     MailboxNode mailboxNode
   ) {
     if (categories == MailboxCategories.exchange) {
-      return _buildBodyMailboxCategory(context, categories, mailboxNode);
+      return _buildBodyMailboxCategory(
+        context: context,
+        categories: categories,
+        mailboxNode: mailboxNode,
+        padding: !controller.responsiveUtils.isDesktop(context)
+          ? const EdgeInsets.symmetric(horizontal: 16)
+          : null,
+      );
     } else {
       return Column(
         children: [
@@ -287,14 +341,22 @@ class MailboxView extends BaseMailboxView {
                   itemKey,
                 ),
             isArrangeLTR: false,
-            padding: controller.responsiveUtils.isDesktop(context)
+            showIcon: true,
-              ? null
+            padding: !controller.responsiveUtils.isDesktop(context)
-              : const EdgeInsetsDirectional.only(start: 16),
+                ? const EdgeInsetsDirectional.only(start: 26, end: 16)
+                : const EdgeInsetsDirectional.only(start: 10),
           )),
           AnimatedContainer(
             duration: const Duration(milliseconds: 400),
             child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-              ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+              ? _buildBodyMailboxCategory(
+                  context: context,
+                  categories: categories,
+                  mailboxNode: mailboxNode,
+                  padding: !controller.responsiveUtils.isDesktop(context)
+                    ? const EdgeInsetsDirectional.only(start: 30, end: 16)
+                    : const EdgeInsetsDirectional.only(start: 10),
+                )
               : const Offstage()
           ),
           const SizedBox(height: 8)

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

@@ -0,0 +1,85 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/text/text_overflow_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
+
+class FolderWidget extends StatelessWidget {
+  final String icon;
+  final String label;
+  final VoidCallback onOpenFolderAction;
+  final String? tooltip;
+  final EdgeInsetsGeometry? padding;
+
+  const FolderWidget({
+    super.key,
+    required this.icon,
+    required this.label,
+    required this.onOpenFolderAction,
+    this.tooltip,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget item = Container(
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+      ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: MailboxItemWidgetStyles.itemPadding,
+      ),
+      height: MailboxItemWidgetStyles.height,
+      child: Row(children: [
+        SvgPicture.asset(
+          icon,
+          width: MailboxIconWidgetStyles.iconSize,
+          height: MailboxIconWidgetStyles.iconSize,
+          fit: BoxFit.fill,
+        ),
+        const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 3),
+            child: TextOverflowBuilder(
+              label,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+        )
+      ]),
+    );
+
+    if (tooltip != null) {
+      item = Tooltip(
+        message: tooltip,
+        child: item,
+      );
+    }
+
+    item = Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onOpenFolderAction,
+        borderRadius: const BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+        hoverColor: AppColor.blue100,
+        child: item,
+      ),
+    );
+
+    if (padding != null) {
+      return Padding(
+        padding: padding!,
+        child: item,
+      );
+    } else {
+      return item;
+    }
+  }
+}

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

@@ -3,10 +3,13 @@ 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:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/mailbox/expand_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
@@ -16,6 +19,7 @@ class MailboxCategoryWidget extends StatefulWidget {
   final ExpandMode expandMode;
   final OnToggleMailboxCategories onToggleMailboxCategories;
   final bool isArrangeLTR;
+  final bool showIcon;
   final EdgeInsetsGeometry? padding;
 
   const MailboxCategoryWidget({
@@ -24,6 +28,7 @@ class MailboxCategoryWidget extends StatefulWidget {
     required this.expandMode,
     required this.onToggleMailboxCategories,
     this.isArrangeLTR = true,
+    this.showIcon = false,
     this.padding,
   });
 
@@ -42,6 +47,16 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
     final item = Row(
       key: _key,
       children: [
+        if (widget.showIcon)
+          ...[
+            SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: MailboxIconWidgetStyles.iconSize,
+              height: MailboxIconWidgetStyles.iconSize,
+              fit: BoxFit.fill,
+            ),
+            const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+          ],
         if (!widget.isArrangeLTR)
           Flexible(
             child: Text(

lib/features/mailbox_dashboard/presentation/extensions/handle_contact_support_capability.dart

@@ -1,15 +0,0 @@
-
-import 'package:model/support/contact_support_capability.dart';
-import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
-
-extension ContactSupportCapabilityExtension on MailboxDashBoardController {
-  ContactSupportCapability? get contactSupportCapability {
-    final accountId = this.accountId.value;
-    final session = sessionCurrent;
-
-    if (accountId == null || session == null) return null;
-
-    return session.getContactSupportCapability(accountId);
-  }
-}

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -11,7 +11,6 @@ import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
 import 'package:tmail_ui_user/features/composer/presentation/view/web/composer_overlay_view.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
-import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart';
@@ -67,16 +66,11 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                         imagePaths: controller.imagePaths,
                         accountId: accountId,
                         avatarUserName: controller.getOwnEmailAddress().firstCharacterToUpperCase,
-                        contactSupportCapability: accountId != null
-                          ? controller.sessionCurrent?.getContactSupportCapability(accountId)
-                          : null,
                         searchForm: SearchInputFormWidget(),
                         appGridController: controller.appGridDashboardController,
                         onTapApplicationLogoAction: controller.redirectToInboxAction,
                         onTapAvatarAction: (position) =>
                             controller.handleClickAvatarAction(context, position),
-                        onTapContactSupportAction: (contactSupport) =>
-                            controller.onGetHelpOrReportBug(contactSupport),
                       );
                     }),
                     Expanded(child: Row(children: [

lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart

@@ -1,42 +1,34 @@
 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/presentation/views/image/avatar_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
-import 'package:model/support/contact_support_capability.dart';
-import 'package:tmail_ui_user/features/base/mixin/contact_support_mixin.dart';
 import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/app_grid_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/navigation_bar_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_grid_dashboard_icon.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class NavigationBarWidget extends StatelessWidget {
 
   final ImagePaths imagePaths;
   final AccountId? accountId;
   final String avatarUserName;
-  final ContactSupportCapability? contactSupportCapability;
   final Widget? searchForm;
   final AppGridDashboardController? appGridController;
   final VoidCallback? onTapApplicationLogoAction;
   final OnTapAvatarActionWithPositionClick? onTapAvatarAction;
-  final OnTapContactSupportAction? onTapContactSupportAction;
 
   const NavigationBarWidget({
     super.key,
     required this.imagePaths,
     required this.accountId,
     required this.avatarUserName,
-    this.contactSupportCapability,
     this.searchForm,
     this.appGridController,
     this.onTapApplicationLogoAction,
     this.onTapAvatarAction,
-    this.onTapContactSupportAction,
   });
 
   @override
@@ -66,15 +58,6 @@ class NavigationBarWidget extends StatelessWidget {
                   child: searchForm
                 ),
                 const Spacer(),
-                if (contactSupportCapability?.isAvailable == true)
-                  TMailButtonWidget.fromIcon(
-                    icon: imagePaths.icHelp,
-                    iconColor: AppColor.messageDialogColor,
-                    backgroundColor: Colors.transparent,
-                    margin: const EdgeInsetsDirectional.only(end: 8),
-                    tooltipMessage: AppLocalizations.of(context).getHelpOrReportABug,
-                    onTapActionCallback: () => onTapContactSupportAction?.call(contactSupportCapability!),
-                  ),
                 if (appGridController != null)
                   Obx(() {
                     if (appGridController!.listLinagoraApp.isNotEmpty) {
@@ -109,15 +92,6 @@ class NavigationBarWidget extends StatelessWidget {
         else
           ...[
             const Spacer(),
-            if (contactSupportCapability?.isAvailable == true)
-              TMailButtonWidget.fromIcon(
-                icon: imagePaths.icHelp,
-                iconColor: AppColor.messageDialogColor,
-                backgroundColor: Colors.transparent,
-                margin: const EdgeInsetsDirectional.only(end: 8),
-                tooltipMessage: AppLocalizations.of(context).getHelpOrReportABug,
-                onTapActionCallback: () => onTapContactSupportAction?.call(contactSupportCapability!),
-              ),
             if (appGridController != null)
               Obx(() {
                 if (appGridController!.listLinagoraApp.isNotEmpty) {

lib/features/quotas/presentation/quotas_view.dart

@@ -1,9 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/handle_contact_support_capability.dart';
 import 'package:tmail_ui_user/features/quotas/domain/extensions/quota_extensions.dart';
 import 'package:tmail_ui_user/features/quotas/domain/state/get_quotas_state.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart';
@@ -14,28 +12,19 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 class QuotasView extends GetWidget<QuotasController> {
 
   final EdgeInsetsGeometry? padding;
-  final bool? isDisplayedContactSupport;
 
-  const QuotasView({
+  const QuotasView({super.key, this.padding});
-    super.key,
-    this.padding,
-    this.isDisplayedContactSupport,
-  });
 
   @override
   Widget build(BuildContext context) {
     return Obx(() {
       final octetQuota = controller.octetsQuota.value;
-
-      Widget? quotaWidget;
-
       if (octetQuota != null && octetQuota.storageAvailable) {
-        quotaWidget = LayoutBuilder(builder: (context, constraints) {
+        return LayoutBuilder(builder: (context, constraints) {
           return Container(
             padding: padding ?? const EdgeInsetsDirectional.only(
               start: QuotasViewStyles.padding,
               top: QuotasViewStyles.padding,
-              bottom: QuotasViewStyles.bottomPadding,
             ),
             margin: controller.responsiveUtils.isWebDesktop(context)
                 ? const EdgeInsetsDirectional.only(end: QuotasViewStyles.margin)
@@ -112,69 +101,6 @@ class QuotasView extends GetWidget<QuotasController> {
             ),
           );
         });
-      }
-
-      if (isDisplayedContactSupport == true) {
-        final contactSupportCapability = controller
-            .mailboxDashBoardController
-            .contactSupportCapability;
-
-        if (contactSupportCapability != null && contactSupportCapability.isAvailable) {
-          final contactSupportWidget = TMailButtonWidget(
-            text: AppLocalizations.of(context).getHelpOrReportABug,
-            icon: controller.imagePaths.icHelp,
-            verticalDirection: true,
-            backgroundColor: Colors.transparent,
-            maxLines: 2,
-            flexibleText: true,
-            mainAxisSize: MainAxisSize.min,
-            margin: const EdgeInsetsDirectional.only(
-              end: 12,
-              start: 4,
-              top: 6,
-              bottom: 6,
-            ),
-            borderRadius: 10,
-            textOverflow: TextOverflow.ellipsis,
-            textAlign: TextAlign.center,
-            textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
-              fontSize: 13,
-              fontWeight: FontWeight.w500,
-              color: AppColor.primaryColor,
-            ),
-            onTapActionCallback: () =>
-                controller.mailboxDashBoardController.onGetHelpOrReportBug(
-                  contactSupportCapability,
-                ),
-          );
-
-          if (quotaWidget != null) {
-            return ColoredBox(
-              color: controller.responsiveUtils.isDesktop(context)
-                  ? AppColor.colorBgDesktop
-                  : Colors.white,
-              child: Row(
-                children: [
-                  Expanded(child: quotaWidget),
-                  Expanded(child: contactSupportWidget),
-                ],
-              ),
-            );
-          } else {
-            return Container(
-              color: controller.responsiveUtils.isDesktop(context)
-                  ? AppColor.colorBgDesktop
-                  : Colors.white,
-              width: double.infinity,
-              alignment: Alignment.center,
-              child: contactSupportWidget,
-            );
-          }
-        }
-      }
-
-      if (quotaWidget != null) {
-        return quotaWidget;
       } else {
         return const SizedBox.shrink();
       }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2025-05-16T20:14:59.453269",
+  "@@last_modified": "2025-05-23T15:09:48.827638",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -4509,5 +4509,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "support": "Support",
+  "@support": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -4745,4 +4745,11 @@ class AppLocalizations {
       name: 'exportTraceLogFailed',
     );
   }
+
+  String get support {
+    return Intl.message(
+      'Support',
+      name: 'support',
+    );
+  }
 }