TF-3410 Update icon color & icon size of composer view

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

lib/features/composer/presentation/composer_view_web.dart

@@ -331,11 +331,11 @@ class ComposerView extends GetWidget<ComposerController> {
             onTap: () => controller.clearFocus(context),
             child: Column(children: [
               Obx(() => DesktopAppBarComposerWidget(
+                imagePaths: controller.imagePaths,
                 emailSubject: controller.subjectEmail.value ?? '',
                 displayMode: controller.screenDisplayMode.value,
                 onCloseViewAction: () => controller.handleClickCloseComposer(context),
                 onChangeDisplayModeAction: controller.displayScreenTypeComposerAction,
-                constraints: constraints,
               )),
               ConstrainedBox(
                 constraints: BoxConstraints(
@@ -645,9 +645,9 @@ class ComposerView extends GetWidget<ComposerController> {
             onTap: () => controller.clearFocus(context),
             child: Column(children: [
               Obx(() => DesktopAppBarComposerWidget(
+                imagePaths: controller.imagePaths,
                 emailSubject: controller.subjectEmail.value ?? '',
                 onCloseViewAction: () => controller.handleClickCloseComposer(context),
-                constraints: constraints,
               )),
               ConstrainedBox(
                 constraints: BoxConstraints(

lib/features/composer/presentation/styles/app_bar_composer_widget_style.dart

@@ -7,7 +7,7 @@ class AppBarComposerWidgetStyle {
   static const double iconSize = 20;
   static const double space = 8;
 
-  static const Color backgroundColor = AppColor.colorComposerAppBar;
+  static const Color backgroundColor = AppColor.colorBgDesktop;
   static const Color iconColor = Colors.black;
 
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 24);

lib/features/composer/presentation/styles/recipient_composer_widget_style.dart

@@ -33,13 +33,8 @@ class RecipientComposerWidgetStyle {
     fontSize: 15,
     fontWeight: FontWeight.normal,
     decoration: TextDecoration.underline,
-    decorationColor: AppColor.colorPrefixButtonComposer,
-    color: AppColor.colorPrefixButtonComposer,
-  );
-  static const TextStyle labelTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer
+    decorationColor: AppColor.m3Neutral70,
+    color: AppColor.m3Neutral70,
   );
   static const TextStyle inputTextStyle = TextStyle(
     fontSize: 16,

lib/features/composer/presentation/styles/recipient_tag_item_widget_style.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 
 class RecipientTagItemWidgetStyle {
   static const double radius = 10;
-  static const double avatarIconSize = 24;
+  static const double avatarIconSize = 20;
   static const double avatarLabelFontSize = 12;
 
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 4);

lib/features/composer/presentation/styles/subject_composer_widget_style.dart

@@ -8,11 +8,6 @@ class SubjectComposerWidgetStyle {
   static const Color cursorColor = AppColor.primaryColor;
   static const Color borderColor = AppColor.colorLineComposer;
 
-  static const TextStyle labelTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer
-  );
   static const TextStyle inputTextStyle = TextStyle(
     color: Colors.black,
     fontSize: 16,

lib/features/composer/presentation/styles/web/bottom_bar_composer_widget_style.dart

@@ -6,17 +6,17 @@ class BottomBarComposerWidgetStyle {
   static const double iconRadius = 8;
   static const double space = 10;
   static const double sendButtonSpace = 12;
-  static const double iconSize = 20;
-  static const double richTextIconSize = 24;
+  static const double iconSize = 24;
   static const double sendButtonRadius = 8;
   static const double sendButtonIconSpace = 5;
-  static const double height = 60;
+  static const double height = 70;
 
   static const Color backgroundColor = Colors.white;
   static const Color iconColor = AppColor.steelGrayA540;
   static const Color sendButtonBackgroundColor = AppColor.blue700;
   static const Color selectedIconColor = AppColor.blue700;
   static const Color disabledIconColor = AppColor.colorRichButtonComposer;
+  static const Color selectedBackgroundColor = AppColor.colorSelected;
 
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 32);
   static const EdgeInsetsGeometry iconPadding = EdgeInsetsDirectional.all(5);

lib/features/composer/presentation/styles/web/from_composer_drop_down_widget_style.dart

@@ -60,12 +60,6 @@ class FromComposerDropDownWidgetStyle {
     height: 72,
     overlayColor: WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) => Colors.white)
   );
-
-  static const TextStyle prefixTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer,
-  );
   static const TextStyle avatarTextStyle = TextStyle(
     fontSize: 16,
     fontWeight: FontWeight.w600,

lib/features/composer/presentation/widgets/mobile/mobile_editor_widget.dart

@@ -28,7 +28,10 @@ class MobileEditorWidget extends StatelessWidget {
       minHeight: 550,
       addDefaultSelectionMenuItems: false,
       initialContent: content,
-      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: direction),
+      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(
+        direction: direction,
+        useDefaultFont: true,
+      ),
       onCreated: (editorApi) => onCreatedEditorAction.call(context, editorApi, content),
       onCompleted: onLoadCompletedEditorAction,
     );

lib/features/composer/presentation/widgets/recipient_composer_widget.dart

@@ -147,7 +147,11 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
             child: Text(
               '${widget.prefix.asName(context)}:',
               key: Key('prefix_${widget.prefix.name}_recipient_composer_widget'),
-              style: RecipientComposerWidgetStyle.labelTextStyle
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+                color: AppColor.m3Tertiary,
+              ),
             ),
           ),
           const SizedBox(width: RecipientComposerWidgetStyle.space),

lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart

@@ -147,7 +147,7 @@ class RecipientTagItemWidget extends StatelessWidget {
     if (isLatestTagFocused && isLatestEmail) {
       return AppColor.colorItemRecipientSelected;
     } else if (EmailUtils.isEmailAddressValid(currentEmailAddress.emailAddress)) {
-      return AppColor.colorEmailAddressTag;
+      return AppColor.colorF3F6F9;
     } else {
       return Colors.white;
     }

lib/features/composer/presentation/widgets/subject_composer_widget.dart

@@ -1,3 +1,4 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/text/text_field_builder.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
@@ -38,7 +39,11 @@ class SubjectComposerWidget extends StatelessWidget {
         children: [
           Text(
             '${AppLocalizations.of(context).subject_email}:',
-            style: SubjectComposerWidgetStyle.labelTextStyle
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              color: AppColor.m3Tertiary,
+            ),
           ),
           const SizedBox(width:SubjectComposerWidgetStyle.space),
           Expanded(

lib/features/composer/presentation/widgets/title_composer_widget.dart

@@ -20,7 +20,6 @@ class TitleComposerWidget extends StatelessWidget {
         ? emailSubject
         : AppLocalizations.of(context).new_message.capitalizeFirstEach,
       maxLines: 1,
-      textAlign: TextAlign.center,
       overflow: CommonTextStyle.defaultTextOverFlow,
       softWrap: CommonTextStyle.defaultSoftWrap,
       style: TitleComposerWidgetStyle.textStyle,

lib/features/composer/presentation/widgets/web/bottom_bar_composer_widget.dart

@@ -61,9 +61,9 @@ class BottomBarComposerWidget extends StatelessWidget {
           TMailButtonWidget.fromIcon(
             icon: imagePaths.icRichToolbar,
             borderRadius: BottomBarComposerWidgetStyle.iconRadius,
-            padding: BottomBarComposerWidgetStyle.richTextIconPadding,
+            padding: BottomBarComposerWidgetStyle.iconPadding,
             backgroundColor: Colors.transparent,
-            iconSize: BottomBarComposerWidgetStyle.richTextIconSize,
+            iconSize: BottomBarComposerWidgetStyle.iconSize,
             iconColor: isFormattingOptionsEnabled
               ? BottomBarComposerWidgetStyle.selectedIconColor
               : BottomBarComposerWidgetStyle.iconColor,

lib/features/composer/presentation/widgets/web/desktop_app_bar_composer_widget.dart

@@ -1,7 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/app_bar_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/web/minimize_composer_widget.dart';
@@ -10,21 +9,19 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class DesktopAppBarComposerWidget extends StatelessWidget {
 
+  final ImagePaths imagePaths;
   final String emailSubject;
   final VoidCallback onCloseViewAction;
   final ScreenDisplayMode? displayMode;
   final OnChangeDisplayModeAction? onChangeDisplayModeAction;
-  final BoxConstraints? constraints;
 
-  final _imagePaths = Get.find<ImagePaths>();
-
-  DesktopAppBarComposerWidget({
+  const DesktopAppBarComposerWidget({
     super.key,
+    required this.imagePaths,
     required this.emailSubject,
     required this.onCloseViewAction,
     this.displayMode,
     this.onChangeDisplayModeAction,
-    this.constraints,
   });
 
   @override
@@ -33,36 +30,25 @@ class DesktopAppBarComposerWidget extends StatelessWidget {
       height: AppBarComposerWidgetStyle.height,
       padding: AppBarComposerWidgetStyle.padding,
       color: AppBarComposerWidgetStyle.backgroundColor,
-      child: Stack(
+      child: Row(
         children: [
-          Center(
-            child: Container(
-              constraints: constraints != null
-                ? BoxConstraints(maxWidth: constraints!.maxWidth / 2)
-                : null,
-              child: TitleComposerWidget(emailSubject: emailSubject),
-            ),
-          ),
+          Expanded(child: TitleComposerWidget(emailSubject: emailSubject)),
           if (onChangeDisplayModeAction != null)
-            Align(
-              alignment: AlignmentDirectional.centerEnd,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
+            ... [
                   TMailButtonWidget.fromIcon(
-                    icon: _imagePaths.icMinimize,
+                    icon: imagePaths.icMinimize,
                     backgroundColor: Colors.transparent,
                     tooltipMessage: AppLocalizations.of(context).minimize,
                     iconSize: AppBarComposerWidgetStyle.iconSize,
                     iconColor: AppBarComposerWidgetStyle.iconColor,
                     padding: AppBarComposerWidgetStyle.iconPadding,
-                    onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.minimize)
+                    onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.minimize),
                   ),
                   const SizedBox(width: AppBarComposerWidgetStyle.space),
                   TMailButtonWidget.fromIcon(
                     icon: displayMode == ScreenDisplayMode.fullScreen
-                      ? _imagePaths.icFullScreenExit
-                      : _imagePaths.icFullScreen,
+                      ? imagePaths.icFullScreenExit
+                      : imagePaths.icFullScreen,
                     backgroundColor: Colors.transparent,
                     tooltipMessage: AppLocalizations.of(context).fullscreen,
                     iconSize: AppBarComposerWidgetStyle.iconSize,
@@ -72,33 +58,28 @@ class DesktopAppBarComposerWidget extends StatelessWidget {
                       displayMode == ScreenDisplayMode.fullScreen
                         ? ScreenDisplayMode.normal
                         : ScreenDisplayMode.fullScreen
-                    )
+                    ),
                   ),
                   const SizedBox(width: AppBarComposerWidgetStyle.space),
                   TMailButtonWidget.fromIcon(
-                    icon: _imagePaths.icCancel,
+                    icon: imagePaths.icCancel,
                     backgroundColor: Colors.transparent,
                     tooltipMessage: AppLocalizations.of(context).saveAndClose,
                     iconSize: AppBarComposerWidgetStyle.iconSize,
                     iconColor: AppBarComposerWidgetStyle.iconColor,
                     padding: AppBarComposerWidgetStyle.iconPadding,
-                    onTapActionCallback: onCloseViewAction
+                    onTapActionCallback: onCloseViewAction,
                   ),
                 ]
-              ),
-            )
           else
-            Align(
-              alignment: AlignmentDirectional.centerEnd,
-              child: TMailButtonWidget.fromIcon(
-                icon: _imagePaths.icCancel,
-                backgroundColor: Colors.transparent,
-                tooltipMessage: AppLocalizations.of(context).saveAndClose,
-                iconSize: AppBarComposerWidgetStyle.iconSize,
-                iconColor: AppBarComposerWidgetStyle.iconColor,
-                padding: AppBarComposerWidgetStyle.iconPadding,
-                onTapActionCallback: onCloseViewAction
-              ),
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icCancel,
+              backgroundColor: Colors.transparent,
+              tooltipMessage: AppLocalizations.of(context).saveAndClose,
+              iconSize: AppBarComposerWidgetStyle.iconSize,
+              iconColor: AppBarComposerWidgetStyle.iconColor,
+              padding: AppBarComposerWidgetStyle.iconPadding,
+              onTapActionCallback: onCloseViewAction,
             )
         ],
       ),

lib/features/composer/presentation/widgets/web/from_composer_drop_down_widget.dart

@@ -55,7 +55,11 @@ class FromComposerDropDownWidget extends StatelessWidget {
             padding: FromComposerDropDownWidgetStyle.prefixPadding,
             child: Text(
               '${PrefixEmailAddress.from.asName(context)}:',
-              style: FromComposerDropDownWidgetStyle.prefixTextStyle,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+                color: AppColor.m3Tertiary,
+              ),
             ),
           ),
           const SizedBox(width: FromComposerDropDownWidgetStyle.space),