Change order of attachment and mail body on mobile

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

assets/images/ic_file_download.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 12.5V15H4.99998V12.5H3.33331V15C3.33331 15.9167 4.08331 16.6667 4.99998 16.6667H15C15.9166 16.6667 16.6666 15.9167 16.6666 15V12.5H15ZM14.1666 9.16668L12.9916 7.99168L10.8333 10.1417V3.33334H9.16665V10.1417L7.00831 7.99168L5.83331 9.16668L9.99998 13.3333L14.1666 9.16668Z" fill="#55687D"/>
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -142,8 +142,6 @@ extension AppColor on Color {
   static const colorShadowLayerTop = Color(0x1F000000);
   static const colorDividerHorizontal = Color(0x1F000000);
   static const colorEmailAddressFull = Color(0xFF818C99);
-  static const colorTitleHeaderAttachment = Color(0xFF818C99);
-  static const colorAttachmentIcon = Color(0xFFAEB7C2);
   static const colorDividerDestinationPicker = Color(0x1F000000);
   static const colorItemAlreadySelected = Color(0xFF818C99);
   static const colorItemSelected = Color(0xFFF2F3F5);
@@ -246,6 +244,8 @@ extension AppColor on Color {
   static const blue900 = Color(0xFF0F76E7);
   static const m3Tertiary = Color(0xFF8C9CAF);
   static const m3Tertiary60 = Color(0xFFD8E1EB);
+  static const m3Tertiary70 = Color(0xFFE5ECF3);
+  static const m3Tertiary20 = Color(0xFF71767C);
   static const m3Neutral70 = Color(0xFFAEAAAE);
   static const m3Neutral90 = Color(0xFFE6E1E5);
   static const grayBackgroundColor = Color(0xFFF3F6F9);
@@ -260,9 +260,11 @@ extension AppColor on Color {
   static const folderDivider = Color(0xFFE4E8EC);
   static const gray424244 = Color(0xFF424244);
   static const lightGrayF4F4F4 = Color(0xFFF4F4F4);
+  static const gray959DAD = Color(0xFF959DAD);
   static const redFF3347 = Color(0xFFFF3347);
   static const gray686E76 = Color(0xFF686E76);
   static const lightGrayEBEDF0 = Color(0xFFEBEDF0);
+  static const gray99A2AD = Color(0xFF99A2AD);
   static const textSecondary = Color(0xFF1C1B1F);
   static const profileMenuDivider = Color(0xFF1D192B);
   static const popupMenuItemHovered = Color(0xFFF8F8F8);

core/lib/presentation/resources/image_paths.dart

@@ -235,6 +235,7 @@ class ImagePaths {
   String get icRadio => _getImagePath('ic_radio.svg');
   String get icRadioSelected => _getImagePath('ic_radio_selected.svg');
 
+  String get icFileDownload => _getImagePath('ic_file_download.svg');
   String get icTwakeWorkplace => _getIconPath('icon_twp.png');
 
   String get animLottieTmail => _getAnimationPath('lottie-tmail.json');

core/lib/presentation/utils/theme_utils.dart

@@ -257,6 +257,24 @@ class ThemeUtils {
     color: color ?? AppColor.primaryMain,
   );
 
+  static TextStyle get textStyleM3LabelSmall => const TextStyle(
+    fontFamily: ConstantsUI.fontApp,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.5,
+    fontSize: 11,
+    height: 16 / 11,
+    color: AppColor.m3Tertiary,
+  );
+
+  static TextStyle get textStyleM3TitleSmall => const TextStyle(
+    fontFamily: ConstantsUI.fontApp,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    fontSize: 14,
+    height: 20 / 14,
+    color: AppColor.m3Tertiary20,
+  );
+
   static const TextStyle textStyleM3BodyMedium1 = TextStyle(
     fontFamily: ConstantsUI.fontApp,
     fontWeight: FontWeight.w400,

core/lib/presentation/views/button/tmail_button_widget.dart

@@ -159,7 +159,6 @@ class TMailButtonWidget extends StatelessWidget {
     List<BoxShadow>? boxShadow,
     EdgeInsetsGeometry? margin,
     TextAlign? textAlign,
-    bool flexibleText = false,
     BoxBorder? border,
     int? maxLines,
     Color? hoverColor,
@@ -186,7 +185,6 @@ class TMailButtonWidget extends StatelessWidget {
       boxShadow: boxShadow,
       margin: margin,
       textAlign: textAlign,
-      flexibleText: flexibleText,
       border: border,
       maxLines: maxLines,
       hoverColor: hoverColor,

lib/features/email/presentation/email_view.dart

@@ -338,27 +338,6 @@ class EmailView extends GetWidget<SingleEmailController> {
           presentationEmail: controller.currentEmail,
           emailUnsubscribe: controller.emailUnsubscribe.value
         )),
-        Obx(() {
-          if (controller.attachments.isNotEmpty) {
-            return EmailAttachmentsWidget(
-              responsiveUtils: controller.responsiveUtils,
-              attachments: controller.attachments,
-              imagePaths: controller.imagePaths,
-              onDragStarted: controller.mailboxDashBoardController.enableAttachmentDraggableApp,
-              onDragEnd: (details) {
-                controller.mailboxDashBoardController.disableAttachmentDraggableApp();
-              },
-              downloadAttachmentAction: (attachment) => controller.handleDownloadAttachmentAction(context, attachment),
-              viewAttachmentAction: (attachment) => controller.handleViewAttachmentAction(context, attachment),
-              onTapShowAllAttachmentFile: () => controller.openAttachmentList(context, controller.attachments),
-              showDownloadAllAttachmentsButton: controller.downloadAllButtonIsEnabled(),
-              onTapDownloadAllButton: () => controller.handleDownloadAllAttachmentsAction(context, 'TwakeMail-${DateTime.now()}'),
-              singleEmailControllerTag: tag,
-            );
-          } else {
-            return const SizedBox.shrink();
-          }
-        }),
         Obx(() => EmailViewLoadingBarWidget(
           viewState: controller.emailLoadedViewState.value
         )),
@@ -524,7 +503,47 @@ class EmailView extends GetWidget<SingleEmailController> {
             } else {
               return const SizedBox.shrink();
             }
-          })
+          }),
+        Obx(() {
+          if (controller.attachments.isNotEmpty) {
+            return EmailAttachmentsWidget(
+              responsiveUtils: controller.responsiveUtils,
+              attachments: controller.attachments,
+              imagePaths: controller.imagePaths,
+              onDragStarted: controller
+                  .mailboxDashBoardController.enableAttachmentDraggableApp,
+              onDragEnd: (_) {
+                controller
+                    .mailboxDashBoardController
+                    .disableAttachmentDraggableApp();
+              },
+              downloadAttachmentAction: (attachment) =>
+                  controller.handleDownloadAttachmentAction(
+                    context,
+                    attachment,
+                  ),
+              viewAttachmentAction: (attachment) =>
+                  controller.handleViewAttachmentAction(
+                    context,
+                    attachment,
+                  ),
+              onTapShowAllAttachmentFile: () => controller.openAttachmentList(
+                context,
+                controller.attachments,
+              ),
+              showDownloadAllAttachmentsButton:
+                  controller.downloadAllButtonIsEnabled(),
+              onTapDownloadAllButton: () =>
+                  controller.handleDownloadAllAttachmentsAction(
+                context,
+                'TwakeMail-${DateTime.now()}',
+              ),
+              singleEmailControllerTag: tag,
+            );
+          } else {
+            return const SizedBox.shrink();
+          }
+        }),
       ],
     );
   }

lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart

@@ -1,57 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:flutter/material.dart';
-
-class AttachmentItemWidgetStyle {
-  static const double radius = 8;
-  static const double maxWidthMobile = 260;
-  static const double maxWidthTablet = 240;
-  static const double maxWidthTabletLarge = 200;
-  static const double height = 36;
-  static const double iconSize = 20;
-  static const double space = 8;
-  static const double downloadIconSize = 22;
-
-  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 5);
-
-  static const Color borderColor = AppColor.attachmentFileBorderColor;
-
-  static TextStyle labelTextStyle =
-      ThemeUtils.defaultTextStyleInterFont.copyWith(
-    fontSize: 14,
-    color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.w500,
-  );
-  static TextStyle dotsLabelTextStyle =
-      ThemeUtils.defaultTextStyleInterFont.copyWith(
-    fontSize: 12,
-    color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.w500,
-  );
-  static TextStyle sizeLabelTextStyle =
-      ThemeUtils.defaultTextStyleInterFont.copyWith(
-    fontSize: 12,
-    color: AppColor.attachmentFileSizeColor,
-    fontWeight: FontWeight.normal,
-  );
-
-  static double getMaxWidthItem({
-    required bool platformIsMobile,
-    required bool responsiveIsMobile,
-    required bool responsiveIsTablet,
-    required bool responsiveIsTabletLarge,
-  }) {
-    if (platformIsMobile) {
-      return responsiveIsMobile ? maxWidthMobile : maxWidthTablet;
-    } else {
-      if (responsiveIsTabletLarge) {
-        return maxWidthTabletLarge;
-      } else if (responsiveIsTablet) {
-        return maxWidthTablet;
-      } else {
-        return maxWidthMobile;
-      }
-    }
-  }
-}

lib/features/email/presentation/styles/email_attachments_styles.dart

@@ -1,34 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:flutter/material.dart';
-
-class EmailAttachmentsStyles {
-  EmailAttachmentsStyles._();
-
-  static const double headerTextSize = 15;
-  static const double headerIconSize = 20;
-  static const double headerSpace = 8;
-  static const double marginHeader = 6;
-  static const double buttonTextSize = 16;
-  static const double buttonMoreAttachmentsTextSize = 14;
-  static const double buttonMoreMaxWidth = 120;
-  static const double buttonDownloadAllMaxWidth = 200;
-  static const double buttonBorderRadius = 8;
-  static const double listSpace = 8;
-
-  static const Color headerTextColor = AppColor.colorTitleHeaderAttachment;
-  static const Color headerIconColor = AppColor.colorAttachmentIcon;
-  static const Color buttonTextColor = AppColor.colorTextBody;
-  static const Color buttonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton;
-
-  static const FontWeight headerFontWeight = FontWeight.w400;
-  static const FontWeight buttonFontWeight = FontWeight.w400;
-  static const FontWeight buttonMoreAttachmentsFontWeight = FontWeight.w500;
-
-  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 12, top: 16);
-  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
-  static const EdgeInsetsGeometry mobileButtonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 3);
-  static const EdgeInsetsGeometry moreButtonMargin = EdgeInsetsDirectional.only(bottom: 2, start: 8);
-  static const EdgeInsetsGeometry mobileMoreButtonMargin = EdgeInsetsDirectional.only(end: 8);
-  static const attachmentsInfoPadding = EdgeInsetsDirectional.only(end: 8);
-}

lib/features/email/presentation/utils/email_utils.dart

@@ -18,8 +18,6 @@ import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/domain/state/download_attachment_for_web_state.dart';
 import 'package:tmail_ui_user/features/email/domain/state/get_html_content_from_attachment_state.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/email_unsubscribe.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
 import 'package:tmail_ui_user/features/thread/domain/constants/thread_constants.dart';
 import 'package:tmail_ui_user/main/error/capability_validator.dart';
 import 'package:tmail_ui_user/main/routes/route_utils.dart';
@@ -248,24 +246,17 @@ class EmailUtils {
     if (attachments.isEmpty) return [];
 
     final bool isMobile = responsiveUtils.isMobile(context);
-    log('EmailUtils::getAttachmentDisplayed:isMobile = $isMobile:');
 
     if (isMobile) {
-      return attachments.length < 3 ? attachments : attachments.sublist(0, 2);
+      return attachments.length <= 3 ? attachments : attachments.sublist(0, 3);
     }
 
-    final double maxWidthItem = AttachmentItemWidgetStyle.getMaxWidthItem(
+    const double maxWidthItem = 260;
-      platformIsMobile: platformIsMobile,
+    const double buttonMoreMaxWidth = 120;
-      responsiveIsMobile: isMobile,
-      responsiveIsTablet: responsiveUtils.isTablet(context),
-      responsiveIsTabletLarge: responsiveUtils.isTabletLarge(context),
-    );
-    log('EmailUtils::getAttachmentDisplayed:maxWidthItem = $maxWidthItem:');
 
     final int possibleDisplayedCount =
-        ((maxWidth - EmailAttachmentsStyles.buttonMoreMaxWidth) ~/ maxWidthItem)
+        ((maxWidth - buttonMoreMaxWidth) ~/ maxWidthItem)
             .clamp(0, attachments.length);
-    log('EmailUtils::getAttachmentDisplayed:possibleDisplayedCount = $possibleDisplayedCount:');
 
     return possibleDisplayedCount == 0
         ? [attachments.first]

lib/features/email/presentation/widgets/attachment_item_widget.dart

@@ -1,6 +1,8 @@
+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/theme_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/presentation/views/container/tmail_container_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
@@ -10,7 +12,6 @@ import 'package:get/get.dart';
 import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
 import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart';
 import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
 
 typedef OnDownloadAttachmentFileAction = void Function(Attachment attachment);
@@ -19,16 +20,17 @@ typedef OnViewAttachmentFileAction = void Function(Attachment attachment);
 class AttachmentItemWidget extends StatelessWidget {
 
   final Attachment attachment;
+  final ImagePaths imagePaths;
+  final double? width;
   final OnDownloadAttachmentFileAction? downloadAttachmentAction;
   final OnViewAttachmentFileAction? viewAttachmentAction;
   final String? singleEmailControllerTag;
 
-  final _imagePaths = Get.find<ImagePaths>();
+  const AttachmentItemWidget({
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-
-  AttachmentItemWidget({
     Key? key,
     required this.attachment,
+    required this.imagePaths,
+    this.width,
     this.downloadAttachmentAction,
     this.viewAttachmentAction,
     this.singleEmailControllerTag,
@@ -36,91 +38,105 @@ class AttachmentItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Obx(
+    return Obx(() {
-      () {
+      final controller = Get.find<SingleEmailController>(tag: singleEmailControllerTag);
-        final controller = Get.find<SingleEmailController>(tag: singleEmailControllerTag);
+      final attachmentsViewState = controller.attachmentsViewState;
-        final attachmentsViewState = controller.attachmentsViewState;
+      bool isLoading = false;
-        bool isLoading = false;
+      if (attachment.blobId != null) {
-        if (attachment.blobId != null) {
+        isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
-          isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
             attachmentsViewState[attachment.blobId!]);
-        }
+      }
 
-        return Material(
+      const loadingIndicator = SizedBox(
-          color: Colors.transparent,
+        width: 20,
-          child: InkWell(
+        height: 20,
-            onTap: isLoading ? null : () => (viewAttachmentAction ?? downloadAttachmentAction)?.call(attachment),
+        child: CircularProgressIndicator(strokeWidth: 2),
-            customBorder: const RoundedRectangleBorder(
+      );
-              borderRadius: BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius))
+
-            ),
+      final attachmentIcon = SvgPicture.asset(
-            child: Container(
+        attachment.getIcon(imagePaths),
-              padding: AttachmentItemWidgetStyle.contentPadding,
+        width: 20,
-              decoration: BoxDecoration(
+        height: 20,
-                borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
+        fit: BoxFit.fill,
-                border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
+      );
-              ),
+
-              width: AttachmentItemWidgetStyle.getMaxWidthItem(
+      final attachmentTitleWithMiddleDots = ExtendedText(
-                platformIsMobile: PlatformInfo.isMobile,
+        attachment.generateFileName(),
-                responsiveIsMobile: _responsiveUtils.isMobile(context),
+        maxLines: 1,
-                responsiveIsTablet: _responsiveUtils.isTablet(context),
+        overflowWidget: TextOverflowWidget(
-                responsiveIsTabletLarge: _responsiveUtils.isTabletLarge(context),
+          position: TextOverflowPosition.middle,
-              ),
+          clearType: TextOverflowClearType.clipRect,
-              child: Row(
+          child: Text(
-                children: [
+            "...",
-                  isLoading
+            style: ThemeUtils.textStyleM3LabelLarge(
-                    ? const SizedBox(
+              color: AppColor.m3SurfaceBackground,
-                        width: AttachmentItemWidgetStyle.iconSize,
-                        height: AttachmentItemWidgetStyle.iconSize,
-                        child: CircularProgressIndicator(strokeWidth: 2))
-                    : SvgPicture.asset(attachment.getIcon(_imagePaths),
-                        width: AttachmentItemWidgetStyle.iconSize,
-                        height: AttachmentItemWidgetStyle.iconSize,
-                        fit: BoxFit.fill
-                      ),
-                  const SizedBox(width: AttachmentItemWidgetStyle.space),
-                  Expanded(
-                    child: PlatformInfo.isCanvasKit
-                      ? ExtendedText(
-                          (attachment.name ?? ''),
-                          maxLines: 1,
-                          overflowWidget: TextOverflowWidget(
-                            position: TextOverflowPosition.middle,
-                            clearType: TextOverflowClearType.clipRect,
-                            child: Text(
-                              "...",
-                              style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
-                            ),
-                          ),
-                          style: AttachmentItemWidgetStyle.labelTextStyle,
-                        )
-                      : Text(
-                          (attachment.name ?? ''),
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: AttachmentItemWidgetStyle.labelTextStyle,
-                        )
-                  ),
-                  const SizedBox(width: AttachmentItemWidgetStyle.space),
-                  Text(
-                    filesize(attachment.size?.value),
-                    maxLines: 1,
-                    style: AttachmentItemWidgetStyle.sizeLabelTextStyle,
-                  ),
-                  TMailButtonWidget.fromIcon(
-                    icon: _imagePaths.icDownloadAttachment,
-                    backgroundColor: Colors.transparent,
-                    padding: const EdgeInsets.all(5),
-                    iconSize: AttachmentItemWidgetStyle.downloadIconSize,
-                    onTapActionCallback: isLoading
-                      ? null 
-                      : () => downloadAttachmentAction?.call(attachment)
-                  )
-                ]
-              )
             ),
           ),
-        );
+        ),
-      }
+        style: ThemeUtils.textStyleM3LabelLarge(
-    );
+          color: AppColor.m3SurfaceBackground,
+        ),
+      );
+
+      final attachmentTitleWithEndDots = Text(
+        attachment.generateFileName(),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        style: ThemeUtils.textStyleM3LabelLarge(
+          color: AppColor.m3SurfaceBackground,
+        ),
+      );
+
+      final bodyItemWidget = Row(
+        children: [
+          isLoading ? loadingIndicator : attachmentIcon,
+          const SizedBox(width: 8),
+          Expanded(
+            child: PlatformInfo.isCanvasKit
+                ? attachmentTitleWithMiddleDots
+                : attachmentTitleWithEndDots,
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Text(
+              filesize(attachment.size?.value),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: ThemeUtils.textStyleM3LabelSmall,
+            ),
+          ),
+          TMailButtonWidget.fromIcon(
+            icon: imagePaths.icFileDownload,
+            backgroundColor: Colors.transparent,
+            padding: const EdgeInsets.all(5),
+            iconColor: AppColor.steelGrayA540,
+            iconSize: 20,
+            onTapActionCallback:
+                isLoading ? null : () => _onTapDownloadAction(attachment),
+          )
+        ],
+      );
+
+      return TMailContainerWidget(
+        height: 36,
+        borderRadius: 8,
+        border: Border.all(color: AppColor.m3Tertiary70),
+        padding: const EdgeInsets.symmetric(horizontal: 8),
+        backgroundColor: Colors.transparent,
+        width: width,
+        margin: const EdgeInsets.only(top: 8),
+        onTapActionCallback:
+            isLoading ? null : () => _onViewOrDownloadAction(attachment),
+        child: bodyItemWidget,
+      );
+    });
+  }
+
+  void _onTapDownloadAction(Attachment attachment) {
+    downloadAttachmentAction?.call(attachment);
+  }
+
+  void _onViewOrDownloadAction(Attachment attachment) {
+    (viewAttachmentAction ?? downloadAttachmentAction)?.call(attachment);
   }
 }

lib/features/email/presentation/widgets/attachments_info.dart

@@ -3,10 +3,8 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class AttachmentsInfo extends StatelessWidget {
@@ -17,7 +15,6 @@ class AttachmentsInfo extends StatelessWidget {
     required this.totalSizeInfo,
     required this.responsiveUtils,
     this.onTapShowAllAttachmentFile,
-    this.downloadAllEnabled = false,
     this.onTapDownloadAllButton,
   });
 
@@ -26,75 +23,97 @@ class AttachmentsInfo extends StatelessWidget {
   final String totalSizeInfo;
   final ResponsiveUtils responsiveUtils;
   final VoidCallback? onTapShowAllAttachmentFile;
-  final bool downloadAllEnabled;
   final VoidCallback? onTapDownloadAllButton;
 
   @override
   Widget build(BuildContext context) {
-    List<Widget> attachmentsAmountAndSize = [
+    final iconAttachment = SvgPicture.asset(
-      SvgPicture.asset(
+      imagePaths.icAttachment,
-        imagePaths.icAttachment,
+      width: 14,
-        width: EmailAttachmentsStyles.headerIconSize,
+      height: 14,
-        height: EmailAttachmentsStyles.headerIconSize,
+      colorFilter: AppColor.gray959DAD.asFilter(),
-        colorFilter: EmailAttachmentsStyles.headerIconColor.asFilter(),
+      fit: BoxFit.fill,
-        fit: BoxFit.fill
-      ),
-      const SizedBox(width: EmailAttachmentsStyles.headerSpace),
-      Text(
-        AppLocalizations.of(context).titleHeaderAttachment(
-          numberOfAttachments,
-          totalSizeInfo,
-        ),
-        style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-          fontSize: EmailAttachmentsStyles.headerTextSize,
-          fontWeight: EmailAttachmentsStyles.headerFontWeight,
-          color: EmailAttachmentsStyles.headerTextColor
-        )
-      ),
-    ];
-
-    final showAllAttachments = (numberOfAttachments > 2)
-      ? TMailButtonWidget(
-          text: AppLocalizations.of(context).showAll,
-          backgroundColor: Colors.transparent,
-          borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
-          padding: EmailAttachmentsStyles.buttonPadding,
-          textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
-            fontSize: EmailAttachmentsStyles.buttonTextSize,
-            color: EmailAttachmentsStyles.buttonTextColor,
-            fontWeight: EmailAttachmentsStyles.buttonFontWeight
-          ),
-          onTapActionCallback: onTapShowAllAttachmentFile,
-        )
-      : const SizedBox.shrink();
-
-    List<Widget> downloadAllAttachments = downloadAllEnabled && !responsiveUtils.isMobile(context)
-      ? [
-          const Spacer(),
-          TMailButtonWidget(
-            text: AppLocalizations.of(context).downloadAll,
-            icon: imagePaths.icDownloadAll,
-            iconAlignment: TextDirection.rtl,
-            backgroundColor: Colors.transparent,
-            borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
-            padding: EmailAttachmentsStyles.buttonPadding,
-            textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
-              fontSize: EmailAttachmentsStyles.buttonTextSize,
-              color: EmailAttachmentsStyles.buttonTextColor,
-              fontWeight: EmailAttachmentsStyles.buttonFontWeight
-            ),
-            onTapActionCallback: onTapDownloadAllButton,
-          ),
-        ]
-      : const [];
-
-    return Row(
-      children: [
-        ...attachmentsAmountAndSize,
-        if (!PlatformInfo.isWeb) const Spacer(),
-        showAllAttachments,
-        ...downloadAllAttachments,
-      ],
     );
+
+    final titleHeaderAttachment = Text(
+      AppLocalizations.of(context).titleHeaderAttachment(
+        numberOfAttachments,
+        totalSizeInfo,
+      ),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: ThemeUtils.textStyleInter400.copyWith(
+        fontSize: 15,
+        height: 20 / 15,
+        color: AppColor.gray99A2AD,
+      ),
+    );
+
+    final showAllButton = TMailButtonWidget.fromText(
+      text: AppLocalizations.of(context).showAll,
+      backgroundColor: Colors.transparent,
+      textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
+        color: AppColor.steelGray400,
+      ),
+      borderRadius: 5,
+      maxLines: 1,
+      maxWidth: 120,
+      padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
+      onTapActionCallback: onTapShowAllAttachmentFile,
+    );
+
+    if (responsiveUtils.isMobile(context)) {
+      return Row(
+        children: [
+          iconAttachment,
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsetsDirectional.only(start: 8, end: 3),
+              child: titleHeaderAttachment,
+            ),
+          ),
+          if (numberOfAttachments > 3) showAllButton,
+        ],
+      );
+    } else {
+      return Row(
+        children: [
+          iconAttachment,
+          Expanded(
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Flexible(
+                  child: Padding(
+                    padding: const EdgeInsetsDirectional.only(start: 8, end: 3),
+                    child: titleHeaderAttachment,
+                  ),
+                ),
+                if (numberOfAttachments > 4) showAllButton,
+              ],
+            ),
+          ),
+          if (onTapDownloadAllButton != null)
+            TMailButtonWidget(
+              text: AppLocalizations.of(context).archiveAndDownload,
+              icon: imagePaths.icDownloadAll,
+              iconSize: 20,
+              iconColor: AppColor.steelGrayA540,
+              iconAlignment: TextDirection.rtl,
+              backgroundColor: Colors.transparent,
+              borderRadius: 5,
+              mainAxisSize: MainAxisSize.min,
+              flexibleText: true,
+              maxLines: 1,
+              maxWidth: 300,
+              padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
+              textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
+                color: AppColor.steelGray400,
+              ),
+              onTapActionCallback: onTapDownloadAllButton,
+            ),
+        ],
+      );
+    }
   }
 }

lib/features/email/presentation/widgets/draggable_attachment_item_widget.dart

@@ -1,4 +1,5 @@
 
+import 'package:core/presentation/resources/image_paths.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
@@ -10,6 +11,7 @@ typedef OnDragAttachmentEnd = Function(DraggableDetails details);
 class DraggableAttachmentItemWidget extends StatelessWidget{
 
   final Attachment attachment;
+  final ImagePaths imagePaths;
   final OnDragAttachmentStarted? onDragStarted;
   final OnDragAttachmentEnd? onDragEnd;
   final OnDownloadAttachmentFileAction? downloadAttachmentAction;
@@ -19,6 +21,7 @@ class DraggableAttachmentItemWidget extends StatelessWidget{
   const DraggableAttachmentItemWidget({
     Key? key,
     required this.attachment,
+    required this.imagePaths,
     this.onDragStarted,
     this.onDragEnd,
     this.downloadAttachmentAction,
@@ -35,6 +38,7 @@ class DraggableAttachmentItemWidget extends StatelessWidget{
       onDragEnd: onDragEnd,
       child: AttachmentItemWidget(
         attachment: attachment,
+        imagePaths: imagePaths,
         downloadAttachmentAction: downloadAttachmentAction,
         viewAttachmentAction: viewAttachmentAction,
         singleEmailControllerTag: singleEmailControllerTag,

lib/features/email/presentation/widgets/email_attachments_widget.dart

@@ -1,4 +1,5 @@
 import 'package:core/presentation/action/action_callback_define.dart';
+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/theme_utils.dart';
@@ -8,7 +9,6 @@ import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/attachment.dart';
 import 'package:model/extensions/list_attachment_extension.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
 import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_info.dart';
@@ -44,135 +44,225 @@ class EmailAttachmentsWidget extends StatelessWidget {
     this.singleEmailControllerTag,
   });
 
-  Widget _buildMoreAttachmentButton(
-    BuildContext context,
-    int hideItemsCount, {
-    EdgeInsetsGeometry? padding,
-    EdgeInsetsGeometry? margin,
-  }) {
-    return TMailButtonWidget(
-      text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
-      backgroundColor: Colors.transparent,
-      borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
-      padding: padding,
-      maxWidth: EmailAttachmentsStyles.buttonMoreMaxWidth,
-      margin: margin,
-      textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
-        fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
-        color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor,
-        fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
-      ),
-      maxLines: 1,
-      onTapActionCallback: onTapShowAllAttachmentFile,
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraints) {
-      final attachmentDisplayed = EmailUtils.getAttachmentDisplayed(
+      final attachmentRecord = _getDisplayedAndHiddenAttachment(
-        context: context,
+        context,
-        maxWidth: constraints.maxWidth
+        constraints.maxWidth,
-          - EmailAttachmentsStyles.padding.horizontal
-          - EmailAttachmentsStyles.listSpace * 2,
-        platformIsMobile: PlatformInfo.isMobile,
-        attachments: attachments,
-        responsiveUtils: responsiveUtils,
       );
-      int hideItemsCount = attachments.length - attachmentDisplayed.length;
+
-      if (hideItemsCount > 999) {
+      final attachmentHeader = AttachmentsInfo(
-        hideItemsCount = 999;
+        imagePaths: imagePaths,
-      }
+        numberOfAttachments: attachments.length,
-      return Padding(
+        totalSizeInfo: filesize(attachments.totalSize, 1),
-        padding: EmailAttachmentsStyles.padding,
+        responsiveUtils: responsiveUtils,
-        child: Column(
+        onTapShowAllAttachmentFile: onTapShowAllAttachmentFile,
+        onTapDownloadAllButton: showDownloadAllAttachmentsButton
+          ? onTapDownloadAllButton
+          : null,
+      );
+
+      late Widget attachmentWidget;
+
+      if (responsiveUtils.isMobile(context)) {
+        attachmentWidget = Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            AttachmentsInfo(
+            Padding(
-              imagePaths: imagePaths,
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
-              numberOfAttachments: attachments.length,
+              child: attachmentHeader,
-              totalSizeInfo: filesize(attachments.totalSize, 1),
-              responsiveUtils: responsiveUtils,
-              onTapShowAllAttachmentFile: onTapShowAllAttachmentFile,
-              downloadAllEnabled: showDownloadAllAttachmentsButton,
-              onTapDownloadAllButton: onTapDownloadAllButton,
             ),
-            const SizedBox(height: EmailAttachmentsStyles.marginHeader),
+            const SizedBox(height: 4),
-            Row(
+            Padding(
-              crossAxisAlignment: responsiveUtils.isMobile(context)
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
-                ? CrossAxisAlignment.end
+              child: Column(
-                : CrossAxisAlignment.center,
+                children: attachmentRecord.displayedAttachments.map((attachment) {
-              children: [
+                  return AttachmentItemWidget(
-                Flexible(
+                    attachment: attachment,
-                  child: Wrap(
+                    imagePaths: imagePaths,
-                    spacing: EmailAttachmentsStyles.listSpace,
+                    downloadAttachmentAction: downloadAttachmentAction,
-                    runSpacing: EmailAttachmentsStyles.listSpace,
+                    viewAttachmentAction: viewAttachmentAction,
-                    children: attachmentDisplayed.map((attachment) {
+                    singleEmailControllerTag: singleEmailControllerTag,
-                      if (PlatformInfo.isWeb) {
+                  );
-                        return DraggableAttachmentItemWidget(
+                }).toList(),
-                          attachment: attachment,
+              ),
-                          onDragStarted: onDragStarted,
-                          onDragEnd: onDragEnd,
-                          downloadAttachmentAction: downloadAttachmentAction,
-                          viewAttachmentAction: viewAttachmentAction,
-                          singleEmailControllerTag: singleEmailControllerTag,
-                        );
-                      } else {
-                        return AttachmentItemWidget(
-                          attachment: attachment,
-                          downloadAttachmentAction: downloadAttachmentAction,
-                          viewAttachmentAction: viewAttachmentAction,
-                          singleEmailControllerTag: singleEmailControllerTag,
-                        );
-                      }
-                    }).toList(),
-                  ),
-                ),
-                if (hideItemsCount > 0 && !responsiveUtils.isMobile(context))
-                  _buildMoreAttachmentButton(
-                    context,
-                    hideItemsCount,
-                    padding: EmailAttachmentsStyles.buttonPadding,
-                    margin: EmailAttachmentsStyles.moreButtonMargin,
-                  ),
-              ]
             ),
-            const SizedBox(height: EmailAttachmentsStyles.marginHeader),
+            const SizedBox(height: 12),
-            if (responsiveUtils.isMobile(context))
+            if (attachmentRecord.hiddenItemsCount > 0 &&
-              Row(
+                showDownloadAllAttachmentsButton)
-                children: [
+              Padding(
-                  if (hideItemsCount > 0)
+                padding: const EdgeInsetsDirectional.symmetric(horizontal: 8),
-                    _buildMoreAttachmentButton(
+                child: Row(
-                      context,
+                  children: [
-                      hideItemsCount,
+                    TMailButtonWidget.fromText(
-                      padding: EmailAttachmentsStyles.mobileButtonPadding,
+                      text: AppLocalizations.of(context).moreAttachments(
-                      margin: EmailAttachmentsStyles.mobileMoreButtonMargin,
+                        attachmentRecord.hiddenItemsCount,
+                      ),
+                      backgroundColor: Colors.transparent,
+                      borderRadius: 5,
+                      maxWidth: 120,
+                      maxLines: 1,
+                      textStyle: ThemeUtils.textStyleM3TitleSmall,
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 3,
+                        horizontal: 5,
+                      ),
+                      onTapActionCallback: onTapShowAllAttachmentFile,
                     ),
-                  const Spacer(),
+                    Expanded(
-                  if (showDownloadAllAttachmentsButton)
+                      child: Row(
-                    TMailButtonWidget(
+                        mainAxisAlignment: MainAxisAlignment.end,
-                      text: AppLocalizations.of(context).downloadAll,
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Flexible(
+                            child: TMailButtonWidget(
+                              text: AppLocalizations.of(context).archiveAndDownload,
+                              icon: imagePaths.icDownloadAll,
+                              iconSize: 20,
+                              iconColor: AppColor.steelGrayA540,
+                              iconAlignment: TextDirection.rtl,
+                              backgroundColor: Colors.transparent,
+                              borderRadius: 5,
+                              mainAxisSize: MainAxisSize.min,
+                              maxLines: 1,
+                              flexibleText: true,
+                              padding: const EdgeInsets.symmetric(
+                                vertical: 3,
+                                horizontal: 5,
+                              ),
+                              textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
+                                color: AppColor.steelGray400,
+                              ),
+                              onTapActionCallback: onTapDownloadAllButton,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              )
+            else if (attachmentRecord.hiddenItemsCount > 0)
+              TMailButtonWidget.fromText(
+                text: AppLocalizations.of(context).moreAttachments(
+                  attachmentRecord.hiddenItemsCount,
+                ),
+                backgroundColor: Colors.transparent,
+                borderRadius: 5,
+                maxLines: 1,
+                textStyle: ThemeUtils.textStyleM3TitleSmall,
+                padding: const EdgeInsets.symmetric(
+                  vertical: 3,
+                  horizontal: 5,
+                ),
+                margin: const EdgeInsetsDirectional.symmetric(horizontal: 8),
+                onTapActionCallback: onTapShowAllAttachmentFile,
+              )
+            else if (showDownloadAllAttachmentsButton)
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  Flexible(
+                    child: TMailButtonWidget(
+                      text: AppLocalizations.of(context).archiveAndDownload,
                       icon: imagePaths.icDownloadAll,
+                      iconSize: 20,
+                      iconColor: AppColor.steelGrayA540,
                       iconAlignment: TextDirection.rtl,
                       backgroundColor: Colors.transparent,
-                      borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
+                      borderRadius: 5,
-                      padding: EmailAttachmentsStyles.mobileButtonPadding,
-                      textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                        fontSize: EmailAttachmentsStyles.buttonTextSize,
-                        color: EmailAttachmentsStyles.buttonTextColor,
-                        fontWeight: EmailAttachmentsStyles.buttonFontWeight
-                      ),
-                      maxWidth: EmailAttachmentsStyles.buttonDownloadAllMaxWidth,
-                      maxLines: 1,
                       mainAxisSize: MainAxisSize.min,
+                      maxLines: 1,
                       flexibleText: true,
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 3,
+                        horizontal: 5,
+                      ),
+                      margin: const EdgeInsetsDirectional.symmetric(horizontal: 8),
+                      textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
+                        color: AppColor.steelGray400,
+                      ),
                       onTapActionCallback: onTapDownloadAllButton,
                     ),
-                ]
+                  ),
+                ],
               ),
           ],
-        ),
+        );
+      } else {
+        attachmentWidget = Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
+              child: attachmentHeader,
+            ),
+            const SizedBox(height: 4),
+            Padding(
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
+              child: Wrap(
+                spacing: 8,
+                runSpacing: 8,
+                children: attachmentRecord.displayedAttachments.map((attachment) {
+                  if (responsiveUtils.isDesktop(context)) {
+                    return DraggableAttachmentItemWidget(
+                      attachment: attachment,
+                      imagePaths: imagePaths,
+                      onDragStarted: onDragStarted,
+                      onDragEnd: onDragEnd,
+                      downloadAttachmentAction: downloadAttachmentAction,
+                      viewAttachmentAction: viewAttachmentAction,
+                      singleEmailControllerTag: singleEmailControllerTag,
+                    );
+                  } else {
+                    return AttachmentItemWidget(
+                      attachment: attachment,
+                      imagePaths: imagePaths,
+                      width: 260,
+                      downloadAttachmentAction: downloadAttachmentAction,
+                      viewAttachmentAction: viewAttachmentAction,
+                      singleEmailControllerTag: singleEmailControllerTag,
+                    );
+                  }
+                }).toList(),
+              ),
+            ),
+          ],
+        );
+      }
+
+      return Padding(
+        padding: const EdgeInsetsDirectional.only(top: 12, bottom: 24),
+        child: attachmentWidget,
       );
     });
   }
+
+  ({List<Attachment> displayedAttachments, int hiddenItemsCount})
+      _getDisplayedAndHiddenAttachment(BuildContext context, double maxWidth) {
+    const itemSpace = 8.0;
+    const itemHorizontalPadding = 24;
+    final maxWidthDesktop = maxWidth - itemHorizontalPadding - itemSpace * 2;
+
+    final displayedAttachments = EmailUtils.getAttachmentDisplayed(
+      context: context,
+      maxWidth: maxWidthDesktop,
+      platformIsMobile: PlatformInfo.isMobile,
+      attachments: attachments,
+      responsiveUtils: responsiveUtils,
+    );
+
+    int hiddenItemsCount = attachments.length - displayedAttachments.length;
+    if (hiddenItemsCount > 999) {
+      hiddenItemsCount = 999;
+    } else if (hiddenItemsCount < 0) {
+      hiddenItemsCount = 0;
+    }
+
+    return (
+      displayedAttachments: displayedAttachments,
+      hiddenItemsCount: hiddenItemsCount,
+    );
+  }
 }

lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart

@@ -147,7 +147,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                                 padding: const EdgeInsetsDirectional.only(start: 16),
                                 child: SvgPicture.asset(
                                   imagePaths.icAttachment,
-                                  colorFilter: AppColor.colorAttachmentIcon.asFilter(),
+                                  colorFilter: AppColor.steelGray200.asFilter(),
                                   width: 20,
                                   height: 20,
                                 ),
@@ -215,7 +215,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                             padding: const EdgeInsetsDirectional.only(end: 8),
                             child: SvgPicture.asset(
                               imagePaths.icAttachment,
-                              colorFilter: AppColor.colorAttachmentIcon.asFilter(),
+                              colorFilter: AppColor.steelGray200.asFilter(),
                               width: 20,
                               height: 20,
                             ),

lib/l10n/intl_ar.arb

@@ -793,7 +793,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} المرفقات ({totalSize}):",
+  "titleHeaderAttachment": "{count} المرفقات ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_de.arb

@@ -921,7 +921,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Anhänge ({totalSize}):",
+  "titleHeaderAttachment": "{count} Anhänge ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_en.arb

@@ -351,7 +351,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Attachments ({totalSize}):",
+  "titleHeaderAttachment": "{count} Attachments ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_fr.arb

@@ -2108,7 +2108,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Pièces jointes ({totalSize}) :",
+  "titleHeaderAttachment": "{count} Pièces jointes ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_ga.arb

@@ -3621,7 +3621,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Ceangaltáin ({totalSize}):",
+  "titleHeaderAttachment": "{count} Ceangaltáin ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_it.arb

@@ -2179,7 +2179,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Allegati ({totalSize}):",
+  "titleHeaderAttachment": "{count} Allegati ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_messages.arb

@@ -378,7 +378,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Attachments ({totalSize}):",
+  "titleHeaderAttachment": "{count} Attachments ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [
@@ -4576,6 +4576,12 @@
     "placeholders_order": [],
     "placeholders": {}
   },
+  "archiveAndDownload": "Archive and download",
+  "@archiveAndDownload": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
   "countMessageInSpam": "{count} message in spam",
   "@countMessageInSpam": {
     "type": "text",

lib/l10n/intl_mfe.arb

@@ -2471,7 +2471,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Atasman ({totalSize}):",
+  "titleHeaderAttachment": "{count} Atasman ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_ru.arb

@@ -2212,7 +2212,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Приложения(-ий) ({totalSize}):",
+  "titleHeaderAttachment": "{count} Приложения(-ий) ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_ta.arb

@@ -3727,7 +3727,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} இணைப்புகள் ({totalSize}):",
+  "titleHeaderAttachment": "{count} இணைப்புகள் ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_vi.arb

@@ -2608,7 +2608,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} Tệp đính kèm ({totalSize}):",
+  "titleHeaderAttachment": "{count} Tệp đính kèm ({totalSize})",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/l10n/intl_zh_Hans.arb

@@ -341,7 +341,7 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "titleHeaderAttachment": "{count} 个附件（{totalSize}）：",
+  "titleHeaderAttachment": "{count} 个附件（{totalSize}",
   "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [

lib/main/localizations/app_localizations.dart

@@ -386,7 +386,7 @@ class AppLocalizations {
 
   String titleHeaderAttachment(int count, String totalSize) {
     return Intl.message(
-        '$count Attachments ($totalSize):',
+        '$count Attachments ($totalSize)',
         name: 'titleHeaderAttachment',
         args: [count, totalSize]
     );
@@ -4905,4 +4905,11 @@ class AppLocalizations {
       name: 'enterEmailAddress',
     );
   }
+
+  String get archiveAndDownload {
+    return Intl.message(
+      'Archive and download',
+      name: 'archiveAndDownload',
+    );
+  }
 }

test/features/email/presentation/get_attachment_displayed_test.dart

@@ -49,7 +49,7 @@ void main() {
     expect(result, attachments.sublist(0, 2));
   });
 
-  test('should return first 2 attachments when mobile and attachments >= 3', () {
+  test('should return first 3 attachments when mobile and attachments >= 4', () {
     when(mockResponsiveUtils.isMobile(mockContext)).thenReturn(true);
 
     final result = EmailUtils.getAttachmentDisplayed(
@@ -59,8 +59,8 @@ void main() {
       platformIsMobile: true,
       attachments: attachments,
     );
-    expect(result.length, 2);
+    expect(result.length, 3);
-    expect(result, attachments.sublist(0, 2));
+    expect(result, attachments.sublist(0, 3));
   });
 
   test('should return sublist based on maxWidthTabletLarge when responsiveIsTabletLarge is true', () {
@@ -122,8 +122,8 @@ void main() {
       platformIsMobile: true,
       attachments: attachments,
     );
-    expect(result.length, 2);
+    expect(result.length, 3);
-    expect(result, attachments.sublist(0, 2));
+    expect(result, attachments.sublist(0, 3));
   });
 
   test('should return sublist based on maxWidthTablet when platformIsMobile is true and responsiveIsMobile is false', () {