TF-4093 Make interface more compact

lib/features/email/presentation/email_view.dart

@@ -244,9 +244,8 @@ class EmailView extends GetWidget<SingleEmailController> {
             presentationEmail: presentationEmail.copyWith(
               subject: threadSubject,
             ),
-          )
-        else
-          const SizedBox(height: 16),
+            isMobileResponsive: isMobileResponsive,
+          ),
         Obx(() => InformationSenderAndReceiverBuilder(
           emailSelected: presentationEmail,
           imagePaths: controller.imagePaths,
@@ -254,6 +253,7 @@ class EmailView extends GetWidget<SingleEmailController> {
           sMimeStatus: controller.currentEmailLoaded.value?.sMimeStatus,
           emailUnsubscribe: controller.emailUnsubscribe.value,
           maxBodyHeight: bodyConstraints.maxHeight,
+          isInsideThreadCollapsed: false,
           openEmailAddressDetailAction: (_, emailAddress) => controller.openEmailAddressDialog(emailAddress),
           onEmailActionClick: (presentationEmail, actionType) => controller.handleEmailAction(context, presentationEmail, actionType),
           isInsideThreadDetailView: isInsideThreadDetailView,
@@ -287,8 +287,6 @@ class EmailView extends GetWidget<SingleEmailController> {
             controller.mailboxDashBoardController.mapMailboxById,
           ),
         )),
-        if (!isMobileResponsive)
-         const SizedBox(height: 16),
         Obx(() => MailUnsubscribedBanner(
           presentationEmail: controller.currentEmail,
           emailUnsubscribe: controller.emailUnsubscribe.value
@@ -359,6 +357,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                     useDefaultFontStyle: true,
                     scrollController: scrollController,
                     enableQuoteToggle: true,
+                    fontSize: isMobileResponsive ? 16 : 14,
                   ),
                 );
               } else if (PlatformInfo.isIOS) {
@@ -370,10 +369,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         Padding(
-                          padding: const EdgeInsetsDirectional.symmetric(
-                            vertical: EmailViewStyles.mobileContentVerticalMargin,
-                            horizontal: EmailViewStyles.mobileContentHorizontalMargin,
-                          ),
+                          padding: EmailViewStyles.mobileEmailContentPadding,
                           child: HtmlContentViewer(
                             key: PlatformInfo.isIntegrationTesting
                                 ? controller.htmlContentViewKey
@@ -389,6 +385,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                             onScrollHorizontalEnd: controller.onScrollHorizontalEnd,
                             keepAlive: isInsideThreadDetailView,
                             enableQuoteToggle: true,
+                            fontSize: isMobileResponsive ? 16 : 14,
                           ),
                         ),
                         Obx(() {
@@ -411,10 +408,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                 });
               } else {
                 return Padding(
-                  padding: const EdgeInsetsDirectional.symmetric(
-                    vertical: EmailViewStyles.mobileContentVerticalMargin,
-                    horizontal: EmailViewStyles.mobileContentHorizontalMargin
-                  ),
+                  padding: EmailViewStyles.mobileEmailContentPadding,
                   child: HtmlContentViewer(
                     key: PlatformInfo.isIntegrationTesting
                         ? controller.htmlContentViewKey
@@ -428,6 +422,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                     keepAlive: isInsideThreadDetailView,
                     enableQuoteToggle: true,
                     onScrollHorizontalEnd: controller.onScrollHorizontalEnd,
+                    fontSize: isMobileResponsive ? 16 : 14,
                   )
                 );
               }

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

@@ -1,12 +1,18 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 
 class EmailSubjectStyles {
   static int? maxLines = PlatformInfo.isWeb ? 2 : null;
 
-  static const Color cursorColor = AppColor.colorTextButton;
+  static const EdgeInsetsGeometry padding = EdgeInsets.all(16);
+  static const EdgeInsetsGeometry mobilePadding = EdgeInsets.all(12);
 
-  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 12, horizontal: 16);
+  static final TextStyle textStyle = ThemeUtils.textStyleInter500().copyWith(
+    overflow: PlatformInfo.isWeb ? TextOverflow.ellipsis : null,
+    color: Colors.black,
+    fontSize: 24,
+    height: 1,
+    letterSpacing: -0.24,
+  );
 }

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

@@ -25,10 +25,19 @@ class EmailViewAppBarWidgetStyles {
     if (responsiveUtils.isLandscapeMobile(context)) {
       return EdgeInsets.zero;
     } else if (responsiveUtils.isPortraitTablet(context) || responsiveUtils.isLandscapeTablet(context)) {
-      return const EdgeInsetsDirectional.only(top: 40, start: 16, end: 16, bottom: 4);
+      return const EdgeInsetsDirectional.only(
+        top: 40,
+        start: 12,
+        end: 12,
+        bottom: 4,
+      );
     } else {
-      return const EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 4);
+      return const EdgeInsetsDirectional.only(start: 12, end: 12, bottom: 4);
     }
   }
-  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 16);
+
+  static const EdgeInsetsGeometry mobilePadding =
+      EdgeInsetsDirectional.only(start: 8, end: 12);
+  static const EdgeInsetsGeometry padding =
+      EdgeInsetsDirectional.symmetric(horizontal: 16);
 }

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

@@ -1,20 +1,8 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/icon_utils.dart';
 import 'package:flutter/material.dart';
 
 class EmailViewStyles {
-  static const double mobileContentHorizontalMargin = 16;
-  static const double mobileContentVerticalMargin = 12;
-  static double pageViewIconSize = IconUtils.defaultIconSize;
-  static const double initialHtmlViewHeight = 200;
-
-  static const Color iconColor = AppColor.steelGrayA540;
-
   static const EdgeInsetsGeometry emailContentPadding =
-    EdgeInsetsDirectional.only(
-      start: 16,
-      end: 16,
-      top: 8,
-    );
+      EdgeInsetsDirectional.symmetric(horizontal: 16);
+  static const EdgeInsetsGeometry mobileEmailContentPadding =
+      EdgeInsetsDirectional.only(start: 12, end: 12, top: 12);
 }

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

@@ -63,37 +63,11 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
                   primary: false,
                   shrinkWrap: true,
                   padding: EdgeInsets.zero,
-                  children: [
-                    if (widget.emailSelected.to.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.to,
-                        listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
-                      ),
-                    if (widget.emailSelected.cc.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.cc,
-                        listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
-                      ),
-                    if (widget.emailSelected.bcc.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.bcc,
-                        listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
-                      ),
-                  ],
+                  children: _buildListFullDisplayRecipients(),
                 ),
               )
             ),
-            TMailButtonWidget.fromText(
-              text: AppLocalizations.of(context).hide,
-              textStyle: ThemeUtils.textStyleBodyBody1(
-                color: AppColor.steelGray400,
-              ),
-              backgroundColor: Colors.transparent,
-              onTapActionCallback: () => setState(() => _isDisplayAll = false),
-            )
+            _buildHideButton(),
           ]
         );
       } else {
@@ -103,44 +77,18 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
             ConstrainedBox(
               constraints: BoxConstraints(
                 maxWidth: _getMaxWidth(context),
-                maxHeight: _responsiveUtils.isMobile(context) ? 22 : 28,
+                maxHeight: 22,
               ),
               child: ListView(
                 scrollDirection: Axis.horizontal,
                 physics: const NeverScrollableScrollPhysics(),
                 padding: EdgeInsets.zero,
                 shrinkWrap: true,
-                children: [
-                  if (widget.emailSelected.to.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.to,
-                      listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
-                    ),
-                  if (widget.emailSelected.cc.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.cc,
-                      listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
-                    ),
-                  if (widget.emailSelected.bcc.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.bcc,
-                      listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
-                    ),
-                ]
+                children: _buildListRecipients(),
               ),
             ),
             if (widget.emailSelected.countRecipients > 1)
-              TMailButtonWidget.fromIcon(
-                icon: _imagePaths.icChevronDownOutline,
-                iconColor: AppColor.steelGray400,
-                padding: const EdgeInsets.all(3),
-                iconSize: 20,
-                backgroundColor: Colors.transparent,
-                onTapActionCallback: () => setState(() => _isDisplayAll = true),
-              )
+              _buildShowAllButton(),
           ]
         );
       }
@@ -153,38 +101,10 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisSize: MainAxisSize.min,
-                  children: [
-                    if (widget.emailSelected.to.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.to,
-                        listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
-                      ),
-                    if (widget.emailSelected.cc.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.cc,
-                        listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
-                      ),
-                    if (widget.emailSelected.bcc.numberEmailAddress() > 0)
-                      _buildRecipientsWidgetToDisplayFull(
-                        context: context,
-                        prefixEmailAddress: PrefixEmailAddress.bcc,
-                        listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
-                      ),
-                  ],
+                  children: _buildListFullDisplayRecipients(),
                 )
               ),
-              TMailButtonWidget.fromText(
-                text: AppLocalizations.of(context).hide,
-                textStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
-                  color: AppColor.primaryColor,
-                  fontSize: 15
-                ),
-                backgroundColor: Colors.transparent,
-                padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
-                onTapActionCallback: () => setState(() => _isDisplayAll = false),
-              )
+              _buildHideButton(),
             ]
         );
       } else {
@@ -193,67 +113,128 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Container(
-              height: 40,
+              height: 22,
               constraints: BoxConstraints(maxWidth: _getMaxWidth(context)),
               child: ListView(
                 scrollDirection: Axis.horizontal,
                 physics: const NeverScrollableScrollPhysics(),
                 padding: EdgeInsets.zero,
                 shrinkWrap: true,
-                children: [
-                  if (widget.emailSelected.to.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.to,
-                      listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
-                    ),
-                  if (widget.emailSelected.cc.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.cc,
-                      listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
-                    ),
-                  if (widget.emailSelected.bcc.numberEmailAddress() > 0)
-                    ..._buildRecipientsWidget(
-                      context: context,
-                      prefixEmailAddress: PrefixEmailAddress.bcc,
-                      listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
-                    ),
-                ]
+                children: _buildListRecipients(),
               ),
             ),
             if (widget.emailSelected.countRecipients > 1)
-              TMailButtonWidget.fromIcon(
-                icon: _imagePaths.icChevronDown,
-                backgroundColor: Colors.transparent,
-                padding: const EdgeInsets.all(3),
-                onTapActionCallback: () => setState(() => _isDisplayAll = true),
-              )
+              _buildShowAllButton(),
           ]
         );
       }
     }
   }
 
+  Widget _buildHideButton() {
+    return TMailButtonWidget.fromText(
+      text: AppLocalizations.of(context).hide,
+      textStyle: ThemeUtils.textStyleInter500().copyWith(
+        color: AppColor.gray6D7885,
+        fontSize: 14,
+        height: 1,
+        letterSpacing: -0.14,
+      ),
+      padding: const EdgeInsetsDirectional.symmetric(
+        horizontal: 8,
+        vertical: 3,
+      ),
+      backgroundColor: Colors.transparent,
+      onTapActionCallback: () => setState(() => _isDisplayAll = false),
+    );
+  }
+
+  Widget _buildShowAllButton() {
+    return TMailButtonWidget.fromIcon(
+      icon: _imagePaths.icChevronDownOutline,
+      iconColor: AppColor.steelGray400,
+      padding: const EdgeInsets.all(2),
+      iconSize: 20,
+      backgroundColor: Colors.transparent,
+      onTapActionCallback: () => setState(() => _isDisplayAll = true),
+    );
+  }
+
+  List<Widget> _buildListFullDisplayRecipients() {
+    return [
+      if (widget.emailSelected.to.numberEmailAddress() > 0)
+        _buildRecipientsWidgetToDisplayFull(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.to,
+          listEmailAddress: PrefixEmailAddress.to.listEmailAddress(
+            widget.emailSelected,
+          ),
+          padding: const EdgeInsets.only(bottom: 4),
+        ),
+      if (widget.emailSelected.cc.numberEmailAddress() > 0)
+        _buildRecipientsWidgetToDisplayFull(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.cc,
+          listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(
+            widget.emailSelected,
+          ),
+          padding: const EdgeInsets.only(bottom: 4),
+        ),
+      if (widget.emailSelected.bcc.numberEmailAddress() > 0)
+        _buildRecipientsWidgetToDisplayFull(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.bcc,
+          listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(
+            widget.emailSelected,
+          ),
+        ),
+    ];
+  }
+
+  List<Widget> _buildListRecipients() {
+    return [
+      if (widget.emailSelected.to.numberEmailAddress() > 0)
+        ..._buildRecipientsWidget(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.to,
+          listEmailAddress: PrefixEmailAddress.to.listEmailAddress(
+            widget.emailSelected,
+          ),
+        ),
+      if (widget.emailSelected.cc.numberEmailAddress() > 0)
+        ..._buildRecipientsWidget(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.cc,
+          listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(
+            widget.emailSelected,
+          ),
+        ),
+      if (widget.emailSelected.bcc.numberEmailAddress() > 0)
+        ..._buildRecipientsWidget(
+          context: context,
+          prefixEmailAddress: PrefixEmailAddress.bcc,
+          listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(
+            widget.emailSelected,
+          ),
+        ),
+    ];
+  }
+
   List<Widget> _buildRecipientsTag({required List<EmailAddress> listEmailAddress}) {
+    final isMobileResponsive = _responsiveUtils.isMobile(context);
+
     return listEmailAddress
       .mapIndexed((index, emailAddress) => TMailButtonWidget.fromText(
         text: index == listEmailAddress.length - 1
           ? emailAddress.asString()
           : '${emailAddress.asString()},',
-        textStyle: ThemeUtils.textStyleHeadingHeadingSmall(
-          color: _responsiveUtils.isMobile(context) ? AppColor.gray6D7885 :  Colors.black,
-          fontWeight: FontWeight.w400,
-        ).copyWith(
-          fontSize: _responsiveUtils.isMobile(context) ? 14 : 17,
+        textStyle: ThemeUtils.textStyleInter400.copyWith(
+          fontSize: 14,
           height: 1,
-          letterSpacing: _responsiveUtils.isMobile(context) ? -0.14 : -0.17,
+          letterSpacing: -0.14,
+          color: isMobileResponsive ? AppColor.gray6D7885 : Colors.black,
         ),
-        padding: EdgeInsetsDirectional.symmetric(
-          vertical: _responsiveUtils.isMobile(context) ? 2.5 : 3.5,
-          horizontal: 8,
-        ),
-        margin: EdgeInsetsDirectional.only(top: _responsiveUtils.isMobile(context) ? 1.5 : 2),
+        padding: const EdgeInsetsDirectional.all(4),
         backgroundColor: Colors.transparent,
         onTapActionCallback: () => widget.openEmailAddressDetailAction?.call(context, emailAddress),
         onLongPressActionCallback: () => AppUtils.copyEmailAddressToClipboard(context, emailAddress.emailAddress),
@@ -261,26 +242,34 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
       .toList();
   }
 
-
   Widget _buildRecipientsWidgetToDisplayFull({
     required BuildContext context,
     required PrefixEmailAddress prefixEmailAddress,
     required List<EmailAddress> listEmailAddress,
+    EdgeInsetsGeometry? padding,
   }) {
-    return Row(
+    final bodyWidget = Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         PrefixRecipientWidget(
           prefixEmailAddress: prefixEmailAddress,
-          responsiveUtils: _responsiveUtils,
+          isMobileResponsive: _responsiveUtils.isMobile(context),
+          padding: const EdgeInsetsDirectional.symmetric(vertical: 4),
         ),
         Expanded(
           child: Wrap(
+            runSpacing: 4,
             children: _buildRecipientsTag(listEmailAddress: listEmailAddress)
           )
         )
       ],
     );
+
+    if (padding != null) {
+      return Padding(padding: padding, child: bodyWidget);
+    } else {
+      return bodyWidget;
+    }
   }
 
   List<Widget> _buildRecipientsWidget({
@@ -291,7 +280,8 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
     return [
       PrefixRecipientWidget(
         prefixEmailAddress: prefixEmailAddress,
-        responsiveUtils: _responsiveUtils,
+        isMobileResponsive: _responsiveUtils.isMobile(context),
+        padding: const EdgeInsetsDirectional.only(top: 4),
       ),
       ..._buildRecipientsTag(listEmailAddress: listEmailAddress).map(
         (child) => Align(alignment: AlignmentDirectional.topStart, child: child),

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

@@ -15,12 +15,14 @@ class EmailSenderBuilder extends StatelessWidget {
   final EmailAddress emailAddress;
   final OnOpenEmailAddressDetailAction? openEmailAddressDetailAction;
   final bool showSenderEmail;
+  final bool isMobileResponsive;
 
   const EmailSenderBuilder({
     super.key,
     required this.emailAddress,
     this.openEmailAddressDetailAction,
     this.showSenderEmail = true,
+    this.isMobileResponsive = false,
   });
 
   @override
@@ -43,10 +45,12 @@ class EmailSenderBuilder extends StatelessWidget {
                 },
                 borderRadius: 8,
                 padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
-                customStyle: ThemeUtils.textStyleHeadingH6(
+                customStyle: ThemeUtils.textStyleInter500().copyWith(
                   color: Colors.black,
-                  fontWeight: FontWeight.w500,
-                ).copyWith(height: 1, letterSpacing: -0.2),
+                  fontSize: isMobileResponsive ? 20 : 15,
+                  height: isMobileResponsive ? 1 : 20 / 15,
+                  letterSpacing: isMobileResponsive ? -0.2 : 0.0,
+                ),
                 overflow: CommonTextStyle.defaultTextOverFlow,
                 softWrap: CommonTextStyle.defaultSoftWrap
               ),
@@ -59,12 +63,11 @@ class EmailSenderBuilder extends StatelessWidget {
                 },
                 borderRadius: 8,
                 padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
-                customStyle: ThemeUtils.textStyleBodyBody1(
+                customStyle: ThemeUtils.textStyleInter500().copyWith(
                   color: AppColor.gray6D7885,
-                ).copyWith(
-                  fontSize: 17,
+                  fontSize: 14,
                   height: 1,
-                  letterSpacing: -0.17,
+                  letterSpacing: -0.14,
                 ),
                 overflow: CommonTextStyle.defaultTextOverFlow,
                 softWrap: CommonTextStyle.defaultSoftWrap

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

@@ -1,5 +1,3 @@
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/email_subject_styles.dart';
@@ -7,8 +5,13 @@ import 'package:tmail_ui_user/features/email/presentation/styles/email_subject_s
 class EmailSubjectWidget extends StatelessWidget {
 
   final PresentationEmail presentationEmail;
+  final bool isMobileResponsive;
 
-  const EmailSubjectWidget({super.key, required this.presentationEmail});
+  const EmailSubjectWidget({
+    super.key,
+    required this.presentationEmail,
+    this.isMobileResponsive = false,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -17,12 +20,12 @@ class EmailSubjectWidget extends StatelessWidget {
     }
 
     return Padding(
-      padding: EmailSubjectStyles.padding,
+      padding: isMobileResponsive
+          ? EmailSubjectStyles.mobilePadding
+          : EmailSubjectStyles.padding,
       child: Text(
         presentationEmail.getEmailTitle(),
-        style: ThemeUtils.textStyleHeadingH5(color: Colors.black).copyWith(
-          overflow: PlatformInfo.isWeb ? TextOverflow.ellipsis : null,
-        ),
+        style: EmailSubjectStyles.textStyle,
         maxLines: EmailSubjectStyles.maxLines,
       )
     );

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

@@ -42,6 +42,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
   final VoidCallback? onToggleThreadDetailCollapseExpand;
   final PresentationMailbox? mailboxContain;
   final bool showUnreadVisualization;
+  final bool isInsideThreadCollapsed;
 
   const InformationSenderAndReceiverBuilder({
     Key? key,
@@ -60,16 +61,18 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
     this.onToggleThreadDetailCollapseExpand,
     this.mailboxContain,
     this.showUnreadVisualization = false,
+    this.isInsideThreadCollapsed = false,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final isMobileResponsive = responsiveUtils.isMobile(context);
+    final crossAxisAlignment = _getAxisAlignment(isMobileResponsive);
+
     return Padding(
-      padding: const EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 4),
+      padding: _getPadding(isMobileResponsive),
       child: Row(
-        crossAxisAlignment: emailSelected.countRecipients > 0 && (showRecipients || responsiveUtils.isMobile(context))
-          ? CrossAxisAlignment.start
-          : CrossAxisAlignment.center,
+        crossAxisAlignment: crossAxisAlignment,
         children: [
           EmailAvatarBuilder(
             emailSelected: emailSelected,
@@ -81,7 +84,18 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                 );
               }
             },
-            size: 56,
+            size: isMobileResponsive ? 44 : 32,
+            textStyle: !isMobileResponsive
+                ? ThemeUtils.textStyleHeadingHeadingSmall(color: Colors.white)
+                : ThemeUtils.textStyleInter600().copyWith(
+                    fontSize: 18.86,
+                    height: 17.29 / 18.86,
+                    letterSpacing: -0.32,
+                    color: Colors.white,
+                  ),
+            padding: crossAxisAlignment == CrossAxisAlignment.start
+                ? const EdgeInsetsDirectional.only(top: 4)
+                : null,
           ),
           const SizedBox(width: 16),
           Expanded(child: LayoutBuilder(builder: (context, constraints) {
@@ -98,7 +112,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                           children: [
                             if (showUnreadVisualization &&
                                 !emailSelected.hasRead &&
-                                responsiveUtils.isMobile(context))
+                                isMobileResponsive)
                               TMailButtonWidget.fromIcon(
                                 icon: imagePaths.icUnreadStatus,
                                 backgroundColor: Colors.transparent,
@@ -114,9 +128,10 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                                   emailAddress: emailSelected.from!.first,
                                   openEmailAddressDetailAction: openEmailAddressDetailAction,
                                   showSenderEmail: _showSenderEmail(
-                                    responsiveUtils.isMobile(context),
+                                    isMobileResponsive,
                                     senderEmail: emailSelected.from!.first,
                                   ),
+                                  isMobileResponsive: isMobileResponsive,
                                 ),
                               ),
                             if (sMimeStatus != null && sMimeStatus != SMimeSignatureStatus.notSigned)
@@ -134,19 +149,20 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                             if (!emailSelected.isSubscribed && emailUnsubscribe != null && !responsiveUtils.isPortraitMobile(context))
                               TMailButtonWidget.fromText(
                                 text: AppLocalizations.of(context).unsubscribe,
-                                textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                                  fontWeight: FontWeight.normal,
+                                textStyle: ThemeUtils.textStyleInter400.copyWith(
                                   fontSize: 14,
-                                  color: AppColor.colorTextBody,
+                                  height: 1,
+                                  letterSpacing: -0.14,
+                                  color: AppColor.gray6D7885,
                                   decoration: TextDecoration.underline,
                                 ),
                                 padding: const EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 8),
                                 backgroundColor: Colors.transparent,
                                 onTapActionCallback: () => onEmailActionClick?.call(emailSelected, EmailActionType.unsubscribe),
                               ),
-                            if (_showAttachmentIcon() && !responsiveUtils.isMobile(context))
+                            if (_showAttachmentIcon() && !isMobileResponsive)
                               Padding(
-                                padding: const EdgeInsetsDirectional.only(start: 16),
+                                padding: const EdgeInsetsDirectional.only(start: 8),
                                 child: SvgPicture.asset(
                                   imagePaths.icAttachment,
                                   colorFilter: AppColor.steelGray200.asFilter(),
@@ -154,7 +170,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                                   height: 20,
                                 ),
                               ),
-                            if (isInsideThreadDetailView && !responsiveUtils.isMobile(context))
+                            if (isInsideThreadDetailView && !isMobileResponsive)
                               ReceivedTimeBuilder(
                                 emailSelected: emailSelected,
                                 padding: const EdgeInsetsDirectional.only(start: 8, top: 2),
@@ -162,7 +178,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                               ),
                             if (showUnreadVisualization &&
                                 !emailSelected.hasRead &&
-                                !responsiveUtils.isMobile(context))
+                                !isMobileResponsive)
                               TMailButtonWidget.fromIcon(
                                 icon: imagePaths.icUnreadStatus,
                                 backgroundColor: Colors.transparent,
@@ -208,7 +224,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
                         ),
                     ],
                   ),
-                  if (responsiveUtils.isMobile(context) && isInsideThreadDetailView)
+                  if (isMobileResponsive && isInsideThreadDetailView)
                     Row(
                       children: [
                         if (_showAttachmentIcon())
@@ -244,6 +260,24 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
     );
   }
 
+  EdgeInsetsGeometry _getPadding(bool isMobileResponsive) {
+    if (isInsideThreadCollapsed) {
+      return EdgeInsetsDirectional.symmetric(
+        horizontal: isMobileResponsive ? 12 : 16,
+        vertical: isMobileResponsive ? 12 : 8,
+      );
+    } else {
+      return EdgeInsetsDirectional.all(isMobileResponsive ? 12 : 16);
+    }
+  }
+
+  CrossAxisAlignment _getAxisAlignment(bool isMobileResponsive) {
+    return emailSelected.countRecipients > 0 &&
+            (showRecipients || isMobileResponsive)
+        ? CrossAxisAlignment.start
+        : CrossAxisAlignment.center;
+  }
+
   bool _showSenderEmail(
     bool isResponsiveMobile, {
     required EmailAddress senderEmail,

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

@@ -1,6 +1,4 @@
-
 import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/prefix_email_address.dart';
@@ -8,29 +6,32 @@ import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_e
 
 class PrefixRecipientWidget extends StatelessWidget {
   final PrefixEmailAddress prefixEmailAddress;
-  final ResponsiveUtils responsiveUtils;
+  final EdgeInsetsGeometry? padding;
+  final bool isMobileResponsive;
 
   const PrefixRecipientWidget({
     super.key,
     required this.prefixEmailAddress,
-    required this.responsiveUtils,
+    this.isMobileResponsive = false,
+    this.padding,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: EdgeInsets.symmetric(vertical: responsiveUtils.isMobile(context) ? 4 : 5.5),
-      child: Text(
-        '${prefixEmailAddress.asName(context)}:',
-        style: ThemeUtils.textStyleBodyBody1(
-          color: AppColor.steelGray400,
-          fontWeight: FontWeight.w400,
-        ).copyWith(
-          fontSize: responsiveUtils.isMobile(context) ? 14 : 17,
-          height: 1,
-          letterSpacing: responsiveUtils.isMobile(context) ? -0.14 : -0.17
-        ),
+    final bodyWidget = Text(
+      '${prefixEmailAddress.asName(context)}:',
+      style: ThemeUtils.textStyleInter400.copyWith(
+        fontSize: 14,
+        height: 1,
+        letterSpacing: -0.14,
+        color: isMobileResponsive ? AppColor.gray6D7885 : AppColor.gray9AA7B6,
       ),
     );
+
+    if (padding != null) {
+      return Padding(padding: padding!, child: bodyWidget);
+    } else {
+      return bodyWidget;
+    }
   }
 }

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

@@ -37,9 +37,11 @@ class ReceivedTimeBuilder extends StatelessWidget {
         maxLines: 1,
         overflow: CommonTextStyle.defaultTextOverFlow,
         softWrap: CommonTextStyle.defaultSoftWrap,
-        style: ThemeUtils.textStyleBodyBody3(color: AppColor.steelGray400).copyWith(
+        style: ThemeUtils.textStyleInter400.copyWith(
+          fontSize: 14,
           height: 1,
-          letterSpacing: -0.14
+          letterSpacing: -0.14,
+          color: AppColor.gray6D7885,
         ),
       ),
     );