TF-3410 Update color, dimensions and alignments in EmailView

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

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
         )
       ),
     );