TF-2684 Enable selectable in blue bar

lib/features/base/widget/hyper_link_widget.dart

@@ -11,8 +11,8 @@ class HyperLinkWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RichText(
+    return Text.rich(
-      text: TextSpan(
+      TextSpan(
         text: urlString,
         style: const TextStyle(
           color: HyperLinkWidgetStyles.textColor,

lib/features/email/presentation/email_view.dart

@@ -46,7 +46,8 @@ class EmailView extends GetWidget<SingleEmailController> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return SelectionArea(
+      child: Scaffold(
         backgroundColor: controller.responsiveUtils.isWebDesktop(context)
           ? AppColor.colorBgDesktop
           : Colors.white,
@@ -147,14 +148,14 @@ class EmailView extends GetWidget<SingleEmailController> {
                                     child: Obx(() => _buildEmailMessage(
                                       context: context,
                                       presentationEmail: currentEmail,
-                                    calendarEvent: controller.calendarEvent,
+                                      calendarEvent: controller.calendarEvent.value,
                                       maxBodyHeight: constraints.maxHeight
                                     ))
                                   )
                                 );
                               } else {
                                 return Obx(() {
-                                final calendarEvent = controller.calendarEvent;
+                                  final calendarEvent = controller.calendarEvent.value;
                                   if (currentEmail.hasCalendarEvent && calendarEvent != null) {
                                     return Padding(
                                       padding: const EdgeInsetsDirectional.symmetric(horizontal: 4),
@@ -162,7 +163,6 @@ class EmailView extends GetWidget<SingleEmailController> {
                                         scrollController: controller.emailContentScrollController,
                                         child: SingleChildScrollView(
                                           physics : const ClampingScrollPhysics(),
-                                        controller: controller.emailContentScrollController,
                                           child: Container(
                                             width: double.infinity,
                                             alignment: Alignment.center,
@@ -199,14 +199,14 @@ class EmailView extends GetWidget<SingleEmailController> {
                                 child: Obx(() => _buildEmailMessage(
                                   context: context,
                                   presentationEmail: currentEmail,
-                                calendarEvent: controller.calendarEvent,
+                                  calendarEvent: controller.calendarEvent.value,
                                   maxBodyHeight: constraints.maxHeight
                                 ))
                               )
                             );
                           } else {
                             return Obx(() {
-                            final calendarEvent = controller.calendarEvent;
+                              final calendarEvent = controller.calendarEvent.value;
                               if (currentEmail.hasCalendarEvent && calendarEvent != null) {
                                 return Padding(
                                   padding: const EdgeInsetsDirectional.symmetric(horizontal: 4),
@@ -214,7 +214,6 @@ class EmailView extends GetWidget<SingleEmailController> {
                                     scrollController: controller.emailContentScrollController,
                                     child: SingleChildScrollView(
                                       physics : const ClampingScrollPhysics(),
-                                    controller: controller.emailContentScrollController,
                                       child: Container(
                                         width: double.infinity,
                                         alignment: Alignment.center,
@@ -255,6 +254,7 @@ class EmailView extends GetWidget<SingleEmailController> {
             })
           )
         )
+      ),
     );
   }
 

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

@@ -6,7 +6,6 @@ import 'package:flutter/material.dart';
 class EmailSubjectStyles {
   static const double textSize = 20;
   static const int? maxLines = PlatformInfo.isWeb ? 2 : null;
-  static const int? minLines = PlatformInfo.isWeb ? 1 : null;
 
   static const Color textColor = AppColor.colorNameEmail;
   static const Color cursorColor = AppColor.colorTextButton;

lib/features/email/presentation/widgets/calendar_event/attendee_widget.dart

@@ -16,8 +16,8 @@ class AttendeeWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RichText(
+    return Text.rich(
-      text: TextSpan(
+      TextSpan(
         style: const TextStyle(
           fontSize: AttendeeWidgetStyles.textSize,
           fontWeight: FontWeight.w500,

lib/features/email/presentation/widgets/calendar_event/calendar_event_action_banner_widget.dart

@@ -48,8 +48,8 @@ class CalendarEventActionBannerWidget extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
             children: [
-              RichText(
+              Text.rich(
-                text: TextSpan(
+                TextSpan(
                   style: TextStyle(
                     fontSize: CalendarEventActionBannerStyles.titleTextSize,
                     fontWeight: FontWeight.w400,

lib/features/email/presentation/widgets/calendar_event/calendar_event_information_widget.dart

@@ -76,8 +76,8 @@ class CalendarEventInformationWidget extends StatelessWidget {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    RichText(
+                    Text.rich(
-                      text: TextSpan(
+                      TextSpan(
                         style: const TextStyle(
                           fontSize: CalendarEventInformationWidgetStyles.invitationMessageTextSize,
                           fontWeight: FontWeight.w500,
@@ -147,8 +147,8 @@ class CalendarEventInformationWidget extends StatelessWidget {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    RichText(
+                    Text.rich(
-                      text: TextSpan(
+                      TextSpan(
                         style: const TextStyle(
                           fontSize: CalendarEventInformationWidgetStyles.invitationMessageTextSize,
                           fontWeight: FontWeight.w500,

lib/features/email/presentation/widgets/calendar_event/event_attendee_information_widget.dart

@@ -36,8 +36,8 @@ class EventAttendeeInformationWidget extends StatelessWidget {
             ),
           ),
         ),
-        Expanded(child: RichText(
+        Expanded(child: Text.rich(
-          text: TextSpan(
+          TextSpan(
             style: const TextStyle(
               fontSize: EventAttendeeInformationWidgetStyles.textSize,
               fontWeight: FontWeight.w500,

lib/features/email/presentation/widgets/calendar_event/organizer_widget.dart

@@ -15,8 +15,8 @@ class OrganizerWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RichText(
+    return Text.rich(
-      text: TextSpan(
+      TextSpan(
         style: const TextStyle(
           fontSize: OrganizerWidgetStyles.textSize,
           fontWeight: FontWeight.w500,

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

@@ -1,10 +1,9 @@
 
+import 'package:collection/collection.dart';
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:core/utils/direction_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -14,10 +13,9 @@ import 'package:model/email/presentation_email.dart';
 import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/extensions/list_email_address_extension.dart';
 import 'package:model/extensions/presentation_email_extension.dart';
-import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
-import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_sender_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/prefix_recipient_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
@@ -47,233 +45,253 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
 
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
-  final _scrollController = ScrollController();
 
   bool _isDisplayAll = false;
 
   @override
   Widget build(BuildContext context) {
+    if (PlatformInfo.isWeb) {
+      if (_isDisplayAll) {
         return Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-        Expanded(child: Padding(
+            Expanded(
-          padding: EdgeInsets.only(top: _isDisplayAll
+              child: Container(
-            ? DirectionUtils.isDirectionRTLByLanguage(context) ? 3 : 5.5
+                constraints: BoxConstraints(maxHeight: _maxHeight),
-            : 0),
+                child: ListView(
-          child: PlatformInfo.isWeb
+                  primary: false,
-            ? Container(
+                  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)
+                      ),
+                  ],
+                ),
+              )
+            ),
+            TMailButtonWidget.fromText(
+              text: AppLocalizations.of(context).hide,
+              textStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
+                color: AppColor.primaryColor,
+                fontSize: 15
+              ),
+              backgroundColor: Colors.transparent,
+              onTapActionCallback: () => setState(() => _isDisplayAll = false),
+            )
+          ]
+        );
+      } else {
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ConstrainedBox(
               constraints: BoxConstraints(
-                  maxHeight: _isDisplayAll && widget.maxHeight != null
+                maxWidth: _getMaxWidth(context),
-                    ? widget.maxHeight! / 2 - _offsetTop
+                maxHeight: 34,
-                    : double.infinity
               ),
-                child: ScrollbarListView(
+              child: ListView(
-                  scrollController: _scrollController,
+                scrollDirection: Axis.horizontal,
-                  child: SingleChildScrollView(
+                physics: const NeverScrollableScrollPhysics(),
-                    controller: _scrollController,
+                padding: EdgeInsets.zero,
-                    child: _buildEmailAddressOfReceiver(
+                shrinkWrap: true,
-                      context,
+                children: [
-                      widget.emailSelected,
+                  if (widget.emailSelected.to.numberEmailAddress() > 0)
-                      _isDisplayAll,
+                    ..._buildRecipientsWidget(
-                      widget.maxWidth
+                      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)
+                    ),
+                ]
               ),
             ),
-                ),
+            if (widget.emailSelected.numberOfAllEmailAddress() > 1)
-              )
+              TMailButtonWidget.fromIcon(
-            : _buildEmailAddressOfReceiver(
+                icon: _imagePaths.icChevronDown,
-                context,
+                backgroundColor: Colors.transparent,
-                widget.emailSelected,
+                onTapActionCallback: () => setState(() => _isDisplayAll = true),
-                _isDisplayAll,
-                widget.maxWidth
-              ),
-        )),
-        if (_isDisplayAll)
-          Padding(
-            padding: EdgeInsets.symmetric(
-              vertical: DirectionUtils.isDirectionRTLByLanguage(context) ? 0 : 6),
-            child: MaterialTextButton(
-              padding: DirectionUtils.isDirectionRTLByLanguage(context)
-                ? const EdgeInsets.symmetric(horizontal: 8, vertical: 4)
-                : null,
-              onTap: () => setState(() => _isDisplayAll = false),
-              label: AppLocalizations.of(context).hide,
-            )
               )
           ]
         );
       }
-
+    } else {
-  Widget _buildEmailAddressOfReceiver(
+      if (_isDisplayAll) {
-    BuildContext context,
+        return Row(
-    PresentationEmail presentationEmail,
+            crossAxisAlignment: CrossAxisAlignment.start,
-    bool isDisplayFull,
+            children: [
-    double maxWidth
+              Expanded(
-  ) {
+                child: Container(
-    if (!isDisplayFull && presentationEmail.numberOfAllEmailAddress() > 1) {
+                  constraints: BoxConstraints(maxHeight: _maxHeight),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    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)
+                        ),
+                    ],
+                  ),
+                )
+              ),
+              TMailButtonWidget.fromText(
+                text: AppLocalizations.of(context).hide,
+                textStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
+                  color: AppColor.primaryColor,
+                  fontSize: 15
+                ),
+                backgroundColor: Colors.transparent,
+                onTapActionCallback: () => setState(() => _isDisplayAll = false),
+              )
+            ]
+        );
+      } else {
         return Row(
           mainAxisSize: MainAxisSize.min,
           children: [
             Container(
               height: 40,
-            color: Colors.white,
+              constraints: BoxConstraints(maxWidth: _getMaxWidth(context)),
-            constraints: BoxConstraints(maxWidth: _getMaxWidthEmailAddressDisplayed(context, maxWidth)),
               child: ListView(
                 scrollDirection: Axis.horizontal,
                 physics: const NeverScrollableScrollPhysics(),
+                padding: EdgeInsets.zero,
                 shrinkWrap: true,
                 children: [
-                if (presentationEmail.to.numberEmailAddress() > 0)
+                  if (widget.emailSelected.to.numberEmailAddress() > 0)
-                  _buildEmailAddressByPrefix(
+                    ..._buildRecipientsWidget(
-                    context,
+                      context: context,
-                    presentationEmail,
+                      prefixEmailAddress: PrefixEmailAddress.to,
-                    PrefixEmailAddress.to,
+                      listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
-                    isDisplayFull
                     ),
-                if (presentationEmail.cc.numberEmailAddress() > 0)
+                  if (widget.emailSelected.cc.numberEmailAddress() > 0)
-                  _buildEmailAddressByPrefix(
+                    ..._buildRecipientsWidget(
-                    context,
+                      context: context,
-                    presentationEmail,
+                      prefixEmailAddress: PrefixEmailAddress.cc,
-                    PrefixEmailAddress.cc,
+                      listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
-                    isDisplayFull
                     ),
-                if (presentationEmail.bcc.numberEmailAddress() > 0)
+                  if (widget.emailSelected.bcc.numberEmailAddress() > 0)
-                  _buildEmailAddressByPrefix(
+                    ..._buildRecipientsWidget(
-                    context,
+                      context: context,
-                    presentationEmail,
+                      prefixEmailAddress: PrefixEmailAddress.bcc,
-                    PrefixEmailAddress.bcc,
+                      listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
-                    isDisplayFull
                     ),
                 ]
               ),
             ),
-          Transform(
+            if (widget.emailSelected.numberOfAllEmailAddress() > 1)
-            transform: Matrix4.translationValues(0.0, -5.0, 0.0),
+              TMailButtonWidget.fromIcon(
-            child: TMailButtonWidget.fromIcon(
                 icon: _imagePaths.icChevronDown,
                 backgroundColor: Colors.transparent,
                 onTapActionCallback: () => setState(() => _isDisplayAll = true),
-            ),
               )
           ]
         );
-    } else {
+      }
-      return Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (presentationEmail.to.numberEmailAddress() > 0)
-            _buildEmailAddressByPrefix(
-              context,
-              presentationEmail,
-              PrefixEmailAddress.to,
-              isDisplayFull
-            ),
-          if (presentationEmail.cc.numberEmailAddress() > 0)
-            _buildEmailAddressByPrefix(
-              context,
-              presentationEmail,
-              PrefixEmailAddress.cc,
-              isDisplayFull
-            ),
-          if (presentationEmail.bcc.numberEmailAddress() > 0)
-            _buildEmailAddressByPrefix(
-              context,
-              presentationEmail,
-              PrefixEmailAddress.bcc,
-              isDisplayFull
-            ),
-        ],
-      );
     }
   }
 
-  Widget _buildEmailAddressByPrefix(
+  List<Widget> _buildRecipientsTag({required List<EmailAddress> listEmailAddress}) {
-    BuildContext context,
+    return listEmailAddress
-    PresentationEmail presentationEmail,
+      .mapIndexed((index, emailAddress) => TMailButtonWidget.fromText(
-    PrefixEmailAddress prefixEmailAddress,
+        text: index == listEmailAddress.length - 1
-    bool isDisplayFull
+          ? emailAddress.asString()
-  ) {
+          : '${emailAddress.asString()},',
+        textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
+          color: Colors.black,
+          fontSize: 16,
+        ),
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8),
+        backgroundColor: Colors.transparent,
+        onTapActionCallback: () => widget.openEmailAddressDetailAction?.call(context, emailAddress),
+        onLongPressActionCallback: () => AppUtils.copyEmailAddressToClipboard(context, emailAddress.emailAddress),
+      ))
+      .toList();
+  }
+
+
+  Widget _buildRecipientsWidgetToDisplayFull({
+    required BuildContext context,
+    required PrefixEmailAddress prefixEmailAddress,
+    required List<EmailAddress> listEmailAddress,
+  }) {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Padding(
+        PrefixRecipientWidget(prefixEmailAddress: prefixEmailAddress),
-          padding: const EdgeInsets.only(top: 5),
+        Expanded(
-          child: Text(
+          child: Wrap(
-            '${prefixEmailAddress.asName(context)}:',
+            children: _buildRecipientsTag(listEmailAddress: listEmailAddress)
-            style: const TextStyle(
-              fontSize: 16,
-              fontWeight: FontWeight.w500,
-              color: AppColor.colorEmailAddressFull
           )
-          ),
-        ),
-        if (!isDisplayFull && presentationEmail.numberOfAllEmailAddress() > 1)
-          _buildListEmailAddressWidget(
-            context,
-            prefixEmailAddress.listEmailAddress(presentationEmail),
-            isDisplayFull
         )
-        else
+      ],
-          Expanded(child: _buildListEmailAddressWidget(
-            context,
-            prefixEmailAddress.listEmailAddress(presentationEmail),
-            isDisplayFull
-          ))
-      ]
     );
   }
 
-  Widget _buildListEmailAddressWidget(
+  List<Widget> _buildRecipientsWidget({
-    BuildContext context,
+    required BuildContext context,
-    List<EmailAddress> listEmailAddress,
+    required PrefixEmailAddress prefixEmailAddress,
-    bool isDisplayFull
+    required List<EmailAddress> listEmailAddress,
-  ) {
+  }) {
-    final lastEmailAddress = listEmailAddress.last;
+    return [
-    final emailAddressWidgets = listEmailAddress.map((emailAddress) {
+      PrefixRecipientWidget(prefixEmailAddress: prefixEmailAddress),
-      return MaterialTextButton(
+      ..._buildRecipientsTag(listEmailAddress: listEmailAddress)
-        label: lastEmailAddress == emailAddress
+    ];
-          ? emailAddress.asString()
-          : '${emailAddress.asString()},',
-        onTap: () => widget.openEmailAddressDetailAction?.call(context, emailAddress),
-        onLongPress: () {
-          AppUtils.copyEmailAddressToClipboard(context, emailAddress.emailAddress);
-        },
-        borderRadius: 8,
-        labelColor: Colors.black,
-        labelSize: 16,
-        softWrap: CommonTextStyle.defaultSoftWrap,
-        overflow: CommonTextStyle.defaultTextOverFlow,
-      );
-    }).toList();
-
-    if (isDisplayFull) {
-      return Wrap(children: emailAddressWidgets);
-    } else {
-      return SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        physics: const NeverScrollableScrollPhysics(),
-        child: Row(
-          crossAxisAlignment:CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: emailAddressWidgets
-        ),
-      );
-    }
   }
 
-  double _getMaxWidthEmailAddressDisplayed(BuildContext context, double maxWidth) {
+  double _getMaxWidth(BuildContext context) {
     if (_responsiveUtils.isPortraitMobile(context)) {
-      return maxWidth - _maxSizeFullDisplayEmailAddressArrowDownButton;
+      return widget.maxWidth - _maxSizeFullDisplayEmailAddressArrowDownButton;
     } else if (_responsiveUtils.isWebDesktop(context)) {
-      return maxWidth / 2;
+      return widget.maxWidth / 2;
     } else {
-      return maxWidth * 3/4;
+      return widget.maxWidth * 3/4;
     }
   }
 
-  @override
+  double get _maxHeight {
-  void dispose() {
+    return _isDisplayAll && widget.maxHeight != null
-    _scrollController.dispose();
+      ? widget.maxHeight! / 2 - _offsetTop
-    super.dispose();
+      : double.infinity;
   }
 }

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

@@ -12,11 +12,9 @@ class EmailSubjectWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       padding: EmailSubjectStyles.padding,
-      child: SelectableText(
+      child: Text(
         presentationEmail.getEmailTitle(),
         maxLines: EmailSubjectStyles.maxLines,
-        minLines: EmailSubjectStyles.minLines,
-        cursorColor: EmailSubjectStyles.cursorColor,
         style: const TextStyle(
           fontSize: EmailSubjectStyles.textSize,
           color: EmailSubjectStyles.textColor,

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

@@ -0,0 +1,26 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:model/email/prefix_email_address.dart';
+import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
+
+class PrefixRecipientWidget extends StatelessWidget {
+  final PrefixEmailAddress prefixEmailAddress;
+
+  const PrefixRecipientWidget({super.key, required this.prefixEmailAddress});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 6),
+      child: Text(
+        '${prefixEmailAddress.asName(context)}:',
+        style: Theme.of(context).textTheme.labelMedium?.copyWith(
+          fontSize: 16,
+          fontWeight: FontWeight.w500,
+          color: AppColor.colorEmailAddressFull
+        )
+      ),
+    );
+  }
+}