TF-3410 Update color, dimensions and alignments in EmailView

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

lib/features/base/widget/email_avatar_builder.dart

@@ -18,7 +18,7 @@ class EmailAvatarBuilder extends StatelessWidget {
   Widget build(BuildContext context) {
     return (AvatarBuilder()
       ..text(emailSelected.getAvatarText())
-      ..size(48)
+      ..size(50)
       ..addTextStyle(const TextStyle(
           fontWeight: FontWeight.bold,
           fontSize: 21,

lib/features/email/presentation/email_view.dart

@@ -278,10 +278,9 @@ class EmailView extends GetWidget<SingleEmailController> {
           : controller.imagePaths.icNewer,
         iconColor: controller.emailSupervisorController.nextEmailActivated
           ? AppColor.primaryColor
-          : AppColor.colorAttachmentIcon,
+          : EmailViewStyles.iconColor,
         iconSize: EmailViewStyles.pageViewIconSize,
         backgroundColor: Colors.transparent,
-        padding: EmailViewStyles.pageViewButtonPadding,
         tooltipMessage: AppLocalizations.of(context).newer,
         onTapActionCallback: controller.emailSupervisorController.moveToNextEmail
       ),
@@ -291,9 +290,8 @@ class EmailView extends GetWidget<SingleEmailController> {
           : controller.imagePaths.icOlder,
         iconColor: controller.emailSupervisorController.previousEmailActivated
           ? AppColor.primaryColor
-          : AppColor.colorAttachmentIcon,
+          : EmailViewStyles.iconColor,
         iconSize: EmailViewStyles.pageViewIconSize,
-        padding: EmailViewStyles.pageViewButtonPadding,
         backgroundColor: Colors.transparent,
         tooltipMessage: AppLocalizations.of(context).older,
         onTapActionCallback: controller.emailSupervisorController.backToPreviousEmail
@@ -390,7 +388,7 @@ class EmailView extends GetWidget<SingleEmailController> {
               if (PlatformInfo.isWeb) {
                 return Expanded(
                   child: Padding(
-                    padding: const EdgeInsetsDirectional.only(start: 16, bottom: 16),
+                    padding: EmailViewStyles.emailContentPadding,
                     child: LayoutBuilder(builder: (context, constraints) {
                       return Obx(() {
                         return Stack(
@@ -401,6 +399,8 @@ class EmailView extends GetWidget<SingleEmailController> {
                               contentHtml: allEmailContents,
                               mailtoDelegate: controller.openMailToLink,
                               direction: AppUtils.getCurrentDirection(context),
+                              contentPadding: 0,
+                              useDefaultFont: true,
                             ),
                             if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive)
                               PointerInterceptor(
@@ -438,6 +438,8 @@ class EmailView extends GetWidget<SingleEmailController> {
                           contentHtml: allEmailContents,
                           initialWidth: constraints.maxWidth,
                           direction: AppUtils.getCurrentDirection(context),
+                          contentPadding: 0,
+                          useDefaultFont: true,
                           onMailtoDelegateAction: controller.openMailToLink,
                           onScrollHorizontalEnd: controller.toggleScrollPhysicsPagerView,
                           onLoadWidthHtmlViewer: controller.emailSupervisorController.updateScrollPhysicPageView,
@@ -457,6 +459,8 @@ class EmailView extends GetWidget<SingleEmailController> {
                       contentHtml: allEmailContents,
                       initialWidth: constraints.maxWidth,
                       direction: AppUtils.getCurrentDirection(context),
+                      contentPadding: 0,
+                      useDefaultFont: true,
                       onMailtoDelegateAction: controller.openMailToLink,
                       onScrollHorizontalEnd: controller.toggleScrollPhysicsPagerView,
                       onLoadWidthHtmlViewer: controller.emailSupervisorController.updateScrollPhysicPageView,

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

@@ -10,7 +10,6 @@ class EmailViewAppBarWidgetStyles {
   static const double radius = 20;
   static double buttonIconSize = IconUtils.defaultIconSize;
   static const double deleteButtonIconSize = 20;
-  static const double space = 5;
   static double? heightIOS(BuildContext context, ResponsiveUtils responsiveUtils) {
     if (responsiveUtils.isLandscapeMobile(context)) {
       return 60;
@@ -24,6 +23,7 @@ class EmailViewAppBarWidgetStyles {
   static const Color deletePermanentButtonColor = AppColor.colorDeletePermanentlyButton;
   static const Color buttonActivatedColor = AppColor.primaryColor;
   static const Color buttonDeactivatedColor = AppColor.colorAttachmentIcon;
+  static const Color iconColor = AppColor.steelGrayA540;
 
   static EdgeInsetsGeometry paddingIOS(BuildContext context, ResponsiveUtils responsiveUtils) {
     if (responsiveUtils.isLandscapeMobile(context)) {
@@ -35,5 +35,4 @@ class EmailViewAppBarWidgetStyles {
     }
   }
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 16);
-  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.all(5);
 }

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

@@ -5,12 +5,12 @@ import 'package:flutter/material.dart';
 class EmailViewBackButtonStyles {
   static const double offsetWidth = 270;
 
-  static const Color iconColor = AppColor.primaryColor;
+  static const Color iconColor = AppColor.steelGrayA540;
 
   static const EdgeInsetsGeometry rtlPadding = EdgeInsetsDirectional.symmetric(horizontal: 8);
 
   static const TextStyle labelTextStyle = TextStyle(
     fontSize: 17,
-    color: AppColor.colorTextButton
+    color: AppColor.steelGrayA540
   );
 }

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

@@ -10,6 +10,7 @@ class EmailViewBottomBarWidgetStyles {
   static const double buttonIconSize = 20;
   static const double radius = 20;
 
+  static const Color iconColor = AppColor.steelGrayA540;
   static const Color topBorderColor = AppColor.colorDividerHorizontal;
   static const Color backgroundColor = Colors.white;
   static const Color buttonBackgroundColor =  Colors.transparent;
@@ -29,7 +30,7 @@ class EmailViewBottomBarWidgetStyles {
   ) {
     return TextStyle(
       fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-      color: AppColor.colorTextButton
+      color: EmailViewBottomBarWidgetStyles.iconColor,
     );
   }
 }

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

@@ -1,4 +1,5 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/icon_utils.dart';
 import 'package:flutter/material.dart';
 
@@ -7,5 +8,13 @@ class EmailViewStyles {
   static const double mobileContentVerticalMargin = 12;
   static double pageViewIconSize = IconUtils.defaultIconSize;
 
-  static const EdgeInsetsGeometry pageViewButtonPadding = EdgeInsets.all(5);
+  static const Color iconColor = AppColor.steelGrayA540;
+
+  static const EdgeInsetsGeometry emailContentPadding =
+    EdgeInsetsDirectional.only(
+      start: 16,
+      bottom: 16,
+      end: 16,
+      top: 8,
+    );
 }

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

@@ -236,8 +236,9 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
           ? emailAddress.asString()
           : '${emailAddress.asString()},',
         textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
-          color: Colors.black,
+          color: AppColor.steelGray400,
           fontSize: 16,
+          fontWeight: FontWeight.w500,
         ),
         padding: const EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8),
         backgroundColor: Colors.transparent,

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

@@ -66,6 +66,7 @@ class EmailViewAppBarWidget extends StatelessWidget {
         child: Row(children: [
           if (_supportDisplayMailboxNameTitle(context))
             EmailViewBackButton(
+              imagePaths: _imagePaths,
               onBackAction: onBackAction,
               mailboxContain: mailboxContain,
               isSearchActivated: isSearchActivated,
@@ -74,23 +75,22 @@ class EmailViewAppBarWidget extends StatelessWidget {
           const Spacer(),
           Row(
             children: [
-                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
+                if (optionsWidget != null) ... optionsWidget!,
                 TMailButtonWidget.fromIcon(
                   icon: _imagePaths.icMoveEmail,
                   iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  iconColor: EmailViewAppBarWidgetStyles.iconColor,
                   tooltipMessage: AppLocalizations.of(context).move_message,
                   backgroundColor: Colors.transparent,
-                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
                   onTapActionCallback: () => onEmailActionClick?.call(presentationEmail, EmailActionType.moveToMailbox)
                 ),
-                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
                 TMailButtonWidget.fromIcon(
                   icon: presentationEmail.hasStarred
                     ? _imagePaths.icStar
                     : _imagePaths.icUnStar,
                   iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  iconColor: EmailViewAppBarWidgetStyles.iconColor,
                   backgroundColor: Colors.transparent,
-                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
                   tooltipMessage: presentationEmail.hasStarred
                     ? AppLocalizations.of(context).not_starred
                     : AppLocalizations.of(context).mark_as_starred,
@@ -100,35 +100,30 @@ class EmailViewAppBarWidget extends StatelessWidget {
                   )
                 ),
                 Obx(() {
-                  if (_singleEmailController.currentEmailLoaded.value != null
-                    && PlatformInfo.isWeb
-                    && PlatformInfo.isCanvasKit
-                  ) {
-                    return TMailButtonWidget.fromIcon(
-                      icon: _imagePaths.icPrinter,
-                      margin: const EdgeInsetsDirectional.only(start: EmailViewAppBarWidgetStyles.space),
-                      iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
-                      backgroundColor: Colors.transparent,
-                      padding: EmailViewAppBarWidgetStyles.buttonPadding,
-                      tooltipMessage: AppLocalizations.of(context).printAll,
-                      onTapActionCallback: () => onEmailActionClick?.call(
-                        presentationEmail,
-                        EmailActionType.printAll
-                      )
+                  if (PlatformInfo.isWeb && PlatformInfo.isCanvasKit) {
+                    return AbsorbPointer(
+                      absorbing: _singleEmailController.currentEmailLoaded.value == null,
+                      child: TMailButtonWidget.fromIcon(
+                        icon: _imagePaths.icPrinter,
+                        iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
+                        iconColor: EmailViewAppBarWidgetStyles.iconColor,
+                        backgroundColor: Colors.transparent,
+                        tooltipMessage: AppLocalizations.of(context).printAll,
+                        onTapActionCallback: () => onEmailActionClick?.call(
+                          presentationEmail,
+                          EmailActionType.printAll,
+                        ),
+                      ),
                     );
                   } else {
                     return const SizedBox.shrink();
                   }
                 }),
-                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
                 TMailButtonWidget.fromIcon(
                   icon: _imagePaths.icDeleteComposer,
                   iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
+                  iconColor: EmailViewAppBarWidgetStyles.iconColor,
                   backgroundColor: Colors.transparent,
-                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
-                  iconColor: canDeletePermanently
-                    ? EmailViewAppBarWidgetStyles.deletePermanentButtonColor
-                    : EmailViewAppBarWidgetStyles.emptyTrashButtonColor,
                   tooltipMessage: canDeletePermanently
                     ? AppLocalizations.of(context).delete_permanently
                     : AppLocalizations.of(context).move_to_trash,
@@ -140,12 +135,11 @@ class EmailViewAppBarWidget extends StatelessWidget {
                     }
                   }
                 ),
-                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
                 TMailButtonWidget.fromIcon(
-                  icon: _imagePaths.icMore,
+                  icon: _imagePaths.icMoreVertical,
                   iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  iconColor: EmailViewAppBarWidgetStyles.iconColor,
                   backgroundColor: Colors.transparent,
-                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
                   tooltipMessage: AppLocalizations.of(context).more,
                   onTapActionCallback: _responsiveUtils.isScreenWithShortestSide(context)
                     ? () => onMoreActionClick?.call(presentationEmail, null)
@@ -154,9 +148,6 @@ class EmailViewAppBarWidget extends StatelessWidget {
                     ? (position) => onMoreActionClick?.call(presentationEmail, position)
                     : null
                 ),
-                if(optionsWidget != null)
-                  ...optionsWidget!,
-                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
               ]
           ),
         ])

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

@@ -3,22 +3,22 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/email_view_back_button_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class EmailViewBackButton extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
 
+  final ImagePaths imagePaths;
   final bool isSearchActivated;
   final VoidCallback onBackAction;
   final double maxWidth;
   final PresentationMailbox? mailboxContain;
 
-  EmailViewBackButton({
+  const EmailViewBackButton({
     super.key,
+    required this.imagePaths,
     required this.onBackAction,
     required this.isSearchActivated,
     required this.maxWidth,
@@ -31,8 +31,8 @@ class EmailViewBackButton extends StatelessWidget {
       return TMailButtonWidget(
         text: mailboxContain?.getDisplayName(context) ?? '',
         icon: DirectionUtils.isDirectionRTLByLanguage(context)
-          ? _imagePaths.icArrowRight
-          : _imagePaths.icBack,
+          ? imagePaths.icArrowRight
+          : imagePaths.icBack,
         iconColor: EmailViewBackButtonStyles.iconColor,
         textStyle: EmailViewBackButtonStyles.labelTextStyle,
         backgroundColor: Colors.transparent,
@@ -49,8 +49,8 @@ class EmailViewBackButton extends StatelessWidget {
     } else {
       return TMailButtonWidget.fromIcon(
         icon: DirectionUtils.isDirectionRTLByLanguage(context)
-          ? _imagePaths.icArrowRight
-          : _imagePaths.icBack,
+          ? imagePaths.icArrowRight
+          : imagePaths.icBack,
         iconColor: EmailViewBackButtonStyles.iconColor,
         padding: DirectionUtils.isDirectionRTLByLanguage(context)
           ? EmailViewBackButtonStyles.rtlPadding

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

@@ -62,6 +62,7 @@ class EmailViewBottomBarWidget extends StatelessWidget {
                     icon: _imagePaths.icReplyAll,
                     borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
                     iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
                     textAlign: TextAlign.center,
                     flexibleText: true,
                     padding: EmailViewBottomBarWidgetStyles.buttonPadding,
@@ -116,6 +117,7 @@ class EmailViewBottomBarWidget extends StatelessWidget {
                     icon: _imagePaths.icReply,
                     borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
                     iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
                     textAlign: TextAlign.center,
                     flexibleText: true,
                     padding: EmailViewBottomBarWidgetStyles.buttonPadding,
@@ -138,6 +140,7 @@ class EmailViewBottomBarWidget extends StatelessWidget {
                     icon: _imagePaths.icForward,
                     borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
                     iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                    iconColor: EmailViewBottomBarWidgetStyles.iconColor,
                     textAlign: TextAlign.center,
                     flexibleText: true,
                     padding: EmailViewBottomBarWidgetStyles.buttonPadding,
@@ -158,6 +161,7 @@ class EmailViewBottomBarWidget extends StatelessWidget {
                 icon: _imagePaths.icNewMessage,
                 borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
                 iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                iconColor: EmailViewBottomBarWidgetStyles.iconColor,
                 textAlign: TextAlign.center,
                 flexibleText: true,
                 padding: EmailViewBottomBarWidgetStyles.buttonPadding,

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

@@ -18,7 +18,7 @@ class PrefixRecipientWidget extends StatelessWidget {
         style: Theme.of(context).textTheme.labelMedium?.copyWith(
           fontSize: 16,
           fontWeight: FontWeight.w500,
-          color: AppColor.colorEmailAddressFull
+          color: AppColor.steelGray400
         )
       ),
     );