Fix mailbox item padding

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 8087a60e0f15dc7fe4dadb31f8f59c9018c12d8a)

lib/features/mailbox/presentation/mailbox_view.dart

@@ -209,47 +209,38 @@ class MailboxView extends BaseMailboxView {
         }),
         const SizedBox(height: 8),
         const Divider(color: AppColor.colorDividerMailbox, height: 1),
-        const SizedBox(height: 12),
         Container(
-          margin: EdgeInsetsDirectional.only(
-            start: controller.responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
-            end: 16),
-          padding: const EdgeInsetsDirectional.only(start: 8),
+          padding: const EdgeInsetsDirectional.symmetric(
+            horizontal: 16,
+            vertical: 6
+          ),
           child: Row(
             children: [
               Expanded(
                 child: Text(
                   AppLocalizations.of(context).folders,
                   style: const TextStyle(
-                    fontSize: 20,
+                    fontSize: 17,
                     color: Colors.black,
                     fontWeight: FontWeight.bold
                   )
                 ),
               ),
               Row(children: [
-                buildIconWeb(
-                  minSize: 40,
-                  iconPadding: EdgeInsets.zero,
-                  icon: SvgPicture.asset(
-                    controller.imagePaths.icSearchBar,
-                    colorFilter: AppColor.colorTextButton.asFilter(),
-                    fit: BoxFit.fill
-                  ),
-                  tooltip: AppLocalizations.of(context).searchForFolders,
-                  onTap: () => controller.openSearchViewAction(context)
+                TMailButtonWidget.fromIcon(
+                  icon: controller.imagePaths.icSearchBar,
+                  iconColor: AppColor.primaryColor,
+                  backgroundColor: Colors.transparent,
+                  tooltipMessage: AppLocalizations.of(context).searchForFolders,
+                  onTapActionCallback: () => controller.openSearchViewAction(context)
+                ),
+                TMailButtonWidget.fromIcon(
+                  icon: controller.imagePaths.icAddNewFolder,
+                  iconColor: AppColor.primaryColor,
+                  backgroundColor: Colors.transparent,
+                  tooltipMessage: AppLocalizations.of(context).newFolder,
+                  onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
                 ),
-                buildIconWeb(
-                  minSize: 40,
-                  iconSize: 20,
-                  iconPadding: EdgeInsets.zero,
-                  splashRadius: 15,
-                  icon: SvgPicture.asset(
-                    controller.imagePaths.icAddNewFolder,
-                    colorFilter: AppColor.colorTextButton.asFilter(),
-                    fit: BoxFit.fill),
-                  tooltip: AppLocalizations.of(context).newFolder,
-                onTap: () => controller.goToCreateNewMailboxView(context)),
               ]),
             ]),
           ),
@@ -284,26 +275,33 @@ class MailboxView extends BaseMailboxView {
   Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
     return Padding(
         padding: EdgeInsetsDirectional.only(
-          start: 4,
+          start: 12,
           end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
         child: Row(children: [
-         buildIconWeb(
-              minSize: 40,
-              iconSize: 20,
-              iconPadding: EdgeInsets.zero,
-              splashRadius: 15,
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                    ? controller.imagePaths.icArrowBottom
-                    : DirectionUtils.isDirectionRTLByLanguage(context) ? controller.imagePaths.icArrowLeft : controller.imagePaths.icArrowRight,
-                  colorFilter: AppColor.primaryColor.asFilter(),
-                  fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories)),
-          Expanded(child: Text(categories.getTitle(context),
+          TMailButtonWidget.fromIcon(
+            icon: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              ? controller.imagePaths.icArrowBottom
+              : DirectionUtils.isDirectionRTLByLanguage(context)
+                  ? controller.imagePaths.icArrowLeft
+                  : controller.imagePaths.icArrowRight,
+            tooltipMessage: AppLocalizations.of(context).collapse,
+            backgroundColor: Colors.transparent,
+            padding: EdgeInsets.zero,
+            iconColor: AppColor.primaryColor,
+            onTapActionCallback: () => controller.toggleMailboxCategories(categories)
+          ),
+          Expanded(
+            child: Text(
+              categories.getTitle(context),
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
+              style: const TextStyle(
+                fontSize: 17,
+                color: Colors.black,
+                fontWeight: FontWeight.bold
+              )
+            )
+          ),
         ]));
   }
 

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -1,7 +1,6 @@
 import 'package:core/core.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:package_info_plus/package_info_plus.dart';
@@ -132,12 +131,8 @@ class MailboxView extends BaseMailboxView {
                 }),
                 const SizedBox(height: 8),
                 const Divider(color: AppColor.colorDividerMailbox, height: 1),
-                const SizedBox(height: 13),
                 Padding(
-                  padding: EdgeInsetsDirectional.only(
-                    start: controller.responsiveUtils.isDesktop(context) ? 0 : 12,
-                    bottom: 8
-                  ),
+                  padding: const EdgeInsetsDirectional.symmetric(vertical: 4),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
@@ -153,29 +148,23 @@ class MailboxView extends BaseMailboxView {
                         padding: EdgeInsetsDirectional.only(end: controller.responsiveUtils.isDesktop(context) ? 0 : 12),
                         child: Row(
                           children: [
-                            buildIconWeb(
-                              minSize: 40,
-                              iconPadding: EdgeInsets.zero,
-                              icon: SvgPicture.asset(
-                                controller.imagePaths.icSearchBar,
-                                colorFilter: AppColor.colorTextButton.asFilter(),
-                                fit: BoxFit.fill
-                              ),
-                              onTap: () => controller.openSearchViewAction(context)
+                            TMailButtonWidget.fromIcon(
+                              icon: controller.imagePaths.icSearchBar,
+                              backgroundColor: Colors.transparent,
+                              iconColor: AppColor.primaryColor,
+                              tooltipMessage: AppLocalizations.of(context).searchForFolders,
+                              onTapActionCallback: () => controller.openSearchViewAction(context)
+                            ),
+                            TMailButtonWidget.fromIcon(
+                              icon: controller.imagePaths.icAddNewFolder,
+                              backgroundColor: Colors.transparent,
+                              iconColor: AppColor.primaryColor,
+                              tooltipMessage: AppLocalizations.of(context).newFolder,
+                              onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
                             ),
-                            buildIconWeb(
-                                minSize: 40,
-                                iconSize: 20,
-                                iconPadding: EdgeInsets.zero,
-                                splashRadius: 15,
-                                icon: SvgPicture.asset(
-                                  controller.imagePaths.icAddNewFolder,
-                                  colorFilter: AppColor.colorTextButton.asFilter(),
-                                  fit: BoxFit.fill),
-                                tooltip: AppLocalizations.of(context).newFolder,
-                                onTap: () => controller.goToCreateNewMailboxView(context)),
                           ],
-                          )),
+                        )
+                      ),
                     ]),
                 ),
                 Obx(() {

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -1,11 +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:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/core.dart';
 import 'package:core/utils/direction_utils.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -290,33 +285,27 @@ mixin MailboxWidgetMixin {
     BaseMailboxController baseMailboxController,
     {
       required Function(MailboxCategories categories) toggleMailboxCategories,
-      EdgeInsets? padding
+      EdgeInsetsGeometry? padding
     }
   ) {
     return Padding(
-      padding: padding ?? EdgeInsets.only(
-        top: 10,
-        left: responsiveUtils.isDesktop(context) ? 0 : 16,
-        right: responsiveUtils.isDesktop(context) ? 0 : 16
-      ),
+      padding: padding ?? EdgeInsets.zero,
       child: Row(children: [
         Obx(() {
           final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
-          return buildIconWeb(
-            splashRadius: 12,
-            iconPadding: EdgeInsets.zero,
-            minSize: 12,
-            icon: SvgPicture.asset(
-              expandMode == ExpandMode.EXPAND
-                ? imagePaths.icArrowBottom
-                : DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icArrowLeft : imagePaths.icArrowRight,
-              colorFilter: AppColor.primaryColor.asFilter(),
-              fit: BoxFit.fill
-            ),
-            tooltip: expandMode == ExpandMode.EXPAND
+          return TMailButtonWidget.fromIcon(
+            icon: expandMode == ExpandMode.EXPAND
+              ? imagePaths.icArrowBottom
+              : DirectionUtils.isDirectionRTLByLanguage(context)
+                  ? imagePaths.icArrowLeft
+                  : imagePaths.icArrowRight,
+            iconColor: AppColor.primaryColor,
+            backgroundColor: Colors.transparent,
+            padding: EdgeInsets.zero,
+            tooltipMessage: expandMode == ExpandMode.EXPAND
               ? AppLocalizations.of(context).collapse
               : AppLocalizations.of(context).expand,
-            onTap: () => toggleMailboxCategories(categories)
+            onTapActionCallback: () => toggleMailboxCategories(categories)
           );
         }),
         Expanded(child: Text(

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

@@ -1,10 +1,8 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
-import 'package:flutter/cupertino.dart';
-import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:model/mailbox/expand_mode.dart';
@@ -36,20 +34,14 @@ class LeadingMailboxItemWidget extends StatelessWidget {
 
     return Row(children: [
       if (mailboxNode.hasChildren())
-        Padding(
-          padding: LeadingMailboxItemWidgetStyles.expandIconPadding,
-          child: buildIconWeb(
-            icon: SvgPicture.asset(
-              _getExpandIcon(context, imagePaths),
-              colorFilter: _expandIconColor.asFilter(),
-              fit: BoxFit.fill,
-            ),
-            splashRadius: LeadingMailboxItemWidgetStyles.expandIconSplashRadius,
-            iconPadding: EdgeInsets.zero,
-            minSize: LeadingMailboxItemWidgetStyles.expandIconSize,
-            tooltip: _getExpandTooltipMessage(context),
-            onTap: () => onExpandFolderActionClick?.call(mailboxNode)
-          ),
+        TMailButtonWidget.fromIcon(
+          icon: _getExpandIcon(context, imagePaths),
+          iconColor: _expandIconColor,
+          padding: EdgeInsets.zero,
+          margin: const EdgeInsetsDirectional.only(start: 4),
+          backgroundColor: Colors.transparent,
+          tooltipMessage: _getExpandTooltipMessage(context),
+          onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode)
         )
       else
         const SizedBox(width: LeadingMailboxItemWidgetStyles.emptyBoxSize),

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

@@ -75,7 +75,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                 color: backgroundColorItem
               ),
-              padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+              padding: widget.mailboxNode.hasChildren()
+                ? const EdgeInsetsDirectional.symmetric(
+                    horizontal: MailboxItemWidgetStyles.padding,
+                    vertical: MailboxItemWidgetStyles.space
+                  )
+                : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
               child: Row(
                 children: [
                   LeadingMailboxItemWidget(
@@ -111,7 +116,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                 color: backgroundColorItem
               ),
-              padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+              padding: widget.mailboxNode.hasChildren()
+                ? const EdgeInsetsDirectional.symmetric(
+                    horizontal: MailboxItemWidgetStyles.padding,
+                    vertical: MailboxItemWidgetStyles.space
+                  )
+                : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
               child: Row(
                 children: [
                   LeadingMailboxItemWidget(
@@ -147,7 +157,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
                   color: backgroundColorItem
                 ),
-                padding: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
+                padding: widget.mailboxNode.hasChildren()
+                  ? const EdgeInsetsDirectional.symmetric(
+                      horizontal: MailboxItemWidgetStyles.padding,
+                      vertical: MailboxItemWidgetStyles.space
+                    )
+                  : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   mainAxisAlignment: MainAxisAlignment.center,
@@ -198,7 +213,12 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
                 hoverColor: AppColor.colorMailboxHovered,
                 child: Container(
-                  padding: const EdgeInsets.symmetric(vertical: MailboxItemWidgetStyles.padding),
+                  padding: widget.mailboxNode.hasChildren()
+                    ? const EdgeInsetsDirectional.symmetric(
+                        horizontal: MailboxItemWidgetStyles.padding,
+                        vertical: MailboxItemWidgetStyles.space
+                      )
+                    : const EdgeInsets.all(MailboxItemWidgetStyles.padding),
                   color: widget.mailboxNode.isSelected
                       ? AppColor.colorItemSelected
                       : Colors.transparent,