TF-2666 Improve new UI for edit recipient card on web

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

lib/features/base/widget/email_address_with_copy_widget.dart

@@ -11,6 +11,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget {
   final OnCopyButtonAction onCopyButtonAction;
   final TextStyle? textStyle;
   final Color? copyIconColor;
+  final EdgeInsetsGeometry? copyIconMargin;
 
   const EmailAddressWithCopyWidget({
     super.key,
@@ -19,6 +20,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget {
     required this.onCopyButtonAction,
     this.textStyle,
     this.copyIconColor,
+    this.copyIconMargin,
   });
 
   @override
@@ -41,6 +43,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget {
             iconColor: copyIconColor ??
                 AppColor.textSecondary.withOpacity(0.48),
             padding: const EdgeInsets.all(5),
+            margin: copyIconMargin,
             onTapActionCallback: onCopyButtonAction,
           ),
       ],

lib/features/composer/presentation/extensions/handle_edit_recipient_extension.dart

@@ -90,71 +90,62 @@ extension HandleEditRecipientExtension on ComposerController {
         listToEmailAddress.remove(emailAddress);
         toAddressExpandMode.value = ExpandMode.EXPAND;
         toAddressExpandMode.refresh();
-
+        _setTextAndFocus(
-        toEmailAddressController.text = emailAddress.emailAddress;
+          controller: toEmailAddressController,
-        toEmailAddressController.value = toEmailAddressController.value.copyWith(
+          focusNode: toAddressFocusNode,
           text: emailAddress.emailAddress,
-          selection: TextSelection(
-            baseOffset: emailAddress.emailAddress.length,
-            extentOffset: emailAddress.emailAddress.length,
-          ),
-          composing: TextRange.empty,
         );
-        toAddressFocusNode?.requestFocus();
         break;
       case PrefixEmailAddress.cc:
         listCcEmailAddress.remove(emailAddress);
         ccAddressExpandMode.value = ExpandMode.EXPAND;
         ccAddressExpandMode.refresh();
-
+        _setTextAndFocus(
-        ccEmailAddressController.text = emailAddress.emailAddress;
+          controller: ccEmailAddressController,
-        ccEmailAddressController.value = ccEmailAddressController.value.copyWith(
+          focusNode: ccAddressFocusNode,
           text: emailAddress.emailAddress,
-          selection: TextSelection(
-            baseOffset: emailAddress.emailAddress.length,
-            extentOffset: emailAddress.emailAddress.length,
-          ),
-          composing: TextRange.empty,
         );
-        ccAddressFocusNode?.requestFocus();
         break;
       case PrefixEmailAddress.bcc:
         listBccEmailAddress.remove(emailAddress);
         bccAddressExpandMode.value = ExpandMode.EXPAND;
         bccAddressExpandMode.refresh();
-
+        _setTextAndFocus(
-        bccEmailAddressController.text = emailAddress.emailAddress;
+          controller: bccEmailAddressController,
-        bccEmailAddressController.value = bccEmailAddressController.value.copyWith(
+          focusNode: bccAddressFocusNode,
           text: emailAddress.emailAddress,
-          selection: TextSelection(
-            baseOffset: emailAddress.emailAddress.length,
-            extentOffset: emailAddress.emailAddress.length,
-          ),
-          composing: TextRange.empty,
         );
-        bccAddressFocusNode?.requestFocus();
         break;
       case PrefixEmailAddress.replyTo:
         listReplyToEmailAddress.remove(emailAddress);
         replyToAddressExpandMode.value = ExpandMode.EXPAND;
         replyToAddressExpandMode.refresh();
-
+        _setTextAndFocus(
-        replyToEmailAddressController.text = emailAddress.emailAddress;
+          controller: replyToEmailAddressController,
-        replyToEmailAddressController.value = replyToEmailAddressController.value.copyWith(
+          focusNode: replyToAddressFocusNode,
           text: emailAddress.emailAddress,
-          selection: TextSelection(
-            baseOffset: emailAddress.emailAddress.length,
-            extentOffset: emailAddress.emailAddress.length,
-          ),
-          composing: TextRange.empty,
         );
-        replyToAddressFocusNode?.requestFocus();
         break;
       default:
         break;
     }
   }
 
+  void _setTextAndFocus({
+    required TextEditingController controller,
+    required FocusNode? focusNode,
+    required String text,
+  }) {
+    controller.text = text;
+    controller.selection = const TextSelection.collapsed(offset: -1);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      focusNode?.requestFocus();
+      Future.delayed(const Duration(milliseconds: 150), () {
+        controller.selection = TextSelection.collapsed(offset: text.length);
+      },);
+    });
+  }
+
   Future<void> _createRuleFromEmailAddress(EmailAddress emailAddress) async {
     await mailboxDashBoardController.openCreateEmailRuleView(
       emailAddress: emailAddress,

lib/features/composer/presentation/view/edit_recipients_view.dart

@@ -57,9 +57,9 @@ class EditRecipientsView extends StatelessWidget {
             Padding(
               padding: const EdgeInsetsDirectional.only(
                 start: 16,
-                end: 24,
+                end: 16,
-                top: 16,
+                top: 21,
-                bottom: 16,
+                bottom: 21,
               ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -68,14 +68,14 @@ class EditRecipientsView extends StatelessWidget {
                     children: [
                       UserAvatarBuilder(
                         username: emailAddress.asString().firstLetterToUpperCase,
-                        size: 67,
+                        size: 42,
-                        textStyle: ThemeUtils.textStyleInter500().copyWith(
+                        textStyle: ThemeUtils.textStyleInter600().copyWith(
-                          fontSize: 33.5,
+                          fontSize: 16,
-                          height: 50.25 / 33.5,
+                          height: 22 / 16,
-                          letterSpacing: 0.31,
+                          letterSpacing: -0.41,
-                          color: AppColor.secondaryContrastText,
+                          color: Colors.white,
                         ),
-                        padding: const EdgeInsetsDirectional.only(end: 21),
+                        padding: const EdgeInsetsDirectional.only(end: 16),
                       ),
                       Expanded(
                         child: Column(
@@ -84,10 +84,10 @@ class EditRecipientsView extends StatelessWidget {
                           children: [
                             if (emailAddress.displayName.isNotEmpty)
                               Padding(
-                                padding: const EdgeInsetsDirectional.only(end: 12),
+                                padding: const EdgeInsetsDirectional.only(end: 24),
                                 child: Text(
                                   emailAddress.displayName,
-                                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                                     color: AppColor.textPrimary,
                                   ),
                                   overflow: TextOverflow.ellipsis,
@@ -97,6 +97,13 @@ class EditRecipientsView extends StatelessWidget {
                             EmailAddressWithCopyWidget(
                               label: emailAddress.emailAddress,
                               copyLabelIcon: imagePaths.icCopy,
+                              textStyle: ThemeUtils.textStyleBodyBody2(
+                                color: AppColor.steelGray400,
+                              ),
+                              copyIconMargin: const EdgeInsetsDirectional.only(
+                                start: 7,
+                              ),
+                              copyIconColor: AppColor.steelGray400,
                               onCopyButtonAction: onCopyAction,
                             ),
                           ],
@@ -104,13 +111,14 @@ class EditRecipientsView extends StatelessWidget {
                       ),
                     ],
                   ),
-                  const SizedBox(height: 13),
+                  const SizedBox(height: 12),
                   Row(
                     children: [
-                      Expanded(
+                      Flexible(
-                        child: SizedBox(
+                        child: Container(
-                          width: double.infinity,
+                          constraints: const BoxConstraints(minWidth: 127),
-                          height: 48,
+                          margin: const EdgeInsetsDirectional.only(end: 8),
+                          height: 36,
                           child: ConfirmDialogButton(
                             label: AppLocalizations.of(context).editEmail,
                             backgroundColor: AppColor.primaryMain,
@@ -119,11 +127,10 @@ class EditRecipientsView extends StatelessWidget {
                           ),
                         ),
                       ),
-                      const SizedBox(width: 8),
+                      Flexible(
-                      Expanded(
+                        child: Container(
-                        child: SizedBox(
+                          constraints: const BoxConstraints(minWidth: 134),
-                          width: double.infinity,
+                          height: 36,
-                          height: 48,
                           child: ConfirmDialogButton(
                             label: AppLocalizations.of(context).createARule,
                             backgroundColor: Colors.white,