TF-248 Change font, style for title and content item list email

assets/images/ic_unread.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4.5" cy="5" r="4.5" fill="#007AFF"/>
+</svg>

core/lib/presentation/constants/constants_ui.dart

@@ -1,3 +1,4 @@
 class ConstantsUI {
   static const fontApp = 'CircularStd';
+  static const fontSFProText = 'SFProText';
 }

core/lib/presentation/extensions/color_extension.dart

@@ -61,6 +61,9 @@ extension AppColor on Color {
   static const backgroundCountAttachment = Color(0x681C1C1C);
   static const bgStatusResultSearch = Color(0xFFF5F5F7);
   static const bgWordSearch = Color(0xFFD7D6FC);
+  static const lineItemListColor = Color(0xFF99A2AD);
+  static const colorNameEmail = Color(0xFF000000);
+  static const colorContentEmail = Color(0xFF6D7885);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/resources/image_paths.dart

@@ -42,6 +42,7 @@ class ImagePaths {
   String get icMore => _getImagePath('ic_more.svg');
   String get icPhotoLibrary => _getImagePath('ic_photo_library.svg');
   String get icEmptyImageDefault => _getImagePath('empty_image_default.svg');
+  String get icUnread => _getImagePath('ic_unread.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/utils/theme_utils.dart

@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 ThemeData appTheme() {
   return ThemeData(
     scaffoldBackgroundColor: Colors.white,
-    fontFamily: ConstantsUI.fontApp,
+    fontFamily: ConstantsUI.fontSFProText,
     appBarTheme: appBarTheme(),
     textTheme: textTheme(),
     visualDensity: VisualDensity.adaptivePlatformDensity,

lib/features/thread/presentation/widgets/email_tile_builder.dart

@@ -4,6 +4,7 @@ import 'dart:ui';
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
@@ -60,157 +61,149 @@ class EmailTileBuilder {
         highlightColor: Colors.transparent),
       child: Container(
         key: Key('thread_tile'),
-        margin: EdgeInsets.only(bottom: 10),
+        margin: EdgeInsets.zero,
-        padding: EdgeInsets.only(top: 10, bottom: 10, left: 25, right: 6),
+        padding: EdgeInsets.only(bottom: 10, left: 20, right: 6),
         alignment: Alignment.center,
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(_selectModeAll == SelectMode.ACTIVE ? 0 : 16),
+          borderRadius: BorderRadius.circular(0),
           color: _getBackgroundColorItem()),
         child: MediaQuery(
           data: MediaQueryData(padding: EdgeInsets.zero),
-          child: ListTile(
+          child: Column(children: [
-            contentPadding: EdgeInsets.zero,
+            ListTile(
-            onTap: () => {
+              contentPadding: EdgeInsets.zero,
-              if (_onOpenEmailActionClick != null) {
+              onTap: () => {
-                _onOpenEmailActionClick!(_presentationEmail)
+                if (_onOpenEmailActionClick != null) {
-              }
+                  _onOpenEmailActionClick!(_presentationEmail)
-            },
+                }
-            onLongPress: () => {
+              },
-              if (_onSelectEmailActionClick != null) {
+              onLongPress: () => {
-                _onSelectEmailActionClick!(_presentationEmail)
+                if (_onSelectEmailActionClick != null) {
-              }
+                  _onSelectEmailActionClick!(_presentationEmail)
-            },
+                }
-            leading: Transform(
+              },
-              transform: Matrix4.translationValues(-10.0, -2.0, 0.0),
+              leading: Transform(
-              child: _buildAvatarIcon()),
+                  transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
-            title: Transform(
+                  child: _buildAvatarIcon()),
-              transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+              title: Transform(
-              child: Row(
+                  transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
-                crossAxisAlignment: CrossAxisAlignment.start,
+                  child: Row(
-                mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                      ? RichTextBuilder(
-                          _getInformationSender(),
-                          '${_searchQuery!.value}',
-                          TextStyle(
-                              fontSize: 14,
-                              color: AppColor.mailboxTextColor,
-                              fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
-                          TextStyle(
-                              fontSize: 14,
-                              color: AppColor.mailboxTextColor,
-                              backgroundColor: AppColor.bgWordSearch,
-                              fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
-                      : Text(
-                          _getInformationSender(),
-                          maxLines: 1,
-                          overflow:TextOverflow.ellipsis,
-                          style: TextStyle(
-                            fontSize: 14,
-                            color: AppColor.mailboxTextColor,
-                            fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
-                  ),
-                  Padding(
-                    padding: EdgeInsets.only(right: 4),
-                    child: Text(
-                      '${_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
-                      maxLines: 1,
-                      overflow:TextOverflow.ellipsis,
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: _presentationEmail.isUnReadEmail() ? AppColor.sentTimeTextColorUnRead : AppColor.baseTextColor)))
-                ],
-              )
-            ),
-            subtitle: Transform(
-              transform: Matrix4.translationValues(-10.0, 8.0, 0.0),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisAlignment: MainAxisAlignment.start,
-                children: [
-                  Padding(
-                    padding: EdgeInsets.only(bottom: 3),
-                    child: Row(
-                      children: [
-                        Expanded(
-                          child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                            ? RichTextBuilder(
-                                '${_presentationEmail.getEmailTitle()}',
-                                '${_searchQuery!.value}',
-                                TextStyle(
-                                    fontSize: 12,
-                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
-                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
-                                TextStyle(
-                                    fontSize: 12,
-                                    backgroundColor: AppColor.bgWordSearch,
-                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
-                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
-                            : Text(
-                                '${_presentationEmail.getEmailTitle()}',
-                                maxLines: 1,
-                                overflow:TextOverflow.ellipsis,
-                                style: TextStyle(
-                                    fontSize: 12,
-                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
-                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
-                        ),
-                        if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
-                          Container(
-                            margin: EdgeInsets.only(left: 8),
-                            padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
-                            constraints: BoxConstraints(maxWidth: 100),
-                            decoration: BoxDecoration(
-                              borderRadius: BorderRadius.circular(10),
-                              color: AppColor.backgroundCounterMailboxColor),
-                            child: Text(
-                              '${_presentationEmail.mailboxName}',
-                              maxLines: 1,
-                              overflow: TextOverflow.ellipsis,
-                              style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-                            )
-                          )
-                      ],
-                    )),
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.center,
                     mainAxisAlignment: MainAxisAlignment.start,
                     children: [
+                      if (_presentationEmail.isUnReadEmail())
+                        Padding(
+                          padding: EdgeInsets.only(top: 6, right: 5),
+                          child: SvgPicture.asset(_imagePaths.icUnread, width: 9, height: 9, fit: BoxFit.fill)),
                       Expanded(
-                        child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                          child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                          ? RichTextBuilder(
+                              ? RichTextBuilder(
-                              '${_presentationEmail.getPartialContent()}',
+                                  _getInformationSender(),
-                              '${_searchQuery!.value}',
+                                  '${_searchQuery!.value}',
-                              TextStyle(fontSize: 12, color: AppColor.baseTextColor),
+                                  TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
-                              TextStyle(fontSize: 12, color: AppColor.baseTextColor, backgroundColor: AppColor.bgWordSearch)).build()
+                                  TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
-                          : Text(
+                              : Text(
-                              '${_presentationEmail.getPartialContent()}',
+                                  _getInformationSender(),
+                                  maxLines: 1,
+                                  overflow:TextOverflow.ellipsis,
+                                  style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
+                      ),
+                      Padding(
+                          padding: EdgeInsets.only(right: 4),
+                          child: Text(
+                              '${_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag())}',
                               maxLines: 1,
                               overflow:TextOverflow.ellipsis,
-                              style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))
+                              style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail)))
-                      ),
+                    ],
-                      if (_presentationEmail.hasAttachment == true)
+                  )
-                        (ButtonBuilder(_imagePaths.icShare)
+              ),
+              subtitle: Transform(
+                  transform: Matrix4.translationValues(-8.0, 8.0, 0.0),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      Padding(
+                          padding: EdgeInsets.zero,
+                          child: Row(
+                            children: [
+                              Expanded(
+                                  child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                                      ? RichTextBuilder(
+                                          '${_presentationEmail.getEmailTitle()}',
+                                          '${_searchQuery!.value}',
+                                          TextStyle(
+                                              fontSize: 13,
+                                              color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.colorNameEmail),
+                                          TextStyle(
+                                              fontSize: 13,
+                                              backgroundColor: AppColor.bgWordSearch,
+                                              color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.colorNameEmail)).build()
+                                      : Text(
+                                          '${_presentationEmail.getEmailTitle()}',
+                                          maxLines: 1,
+                                          overflow:TextOverflow.ellipsis,
+                                          style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail))
+                              ),
+                              if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
+                                Container(
+                                    margin: EdgeInsets.only(left: 8),
+                                    padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
+                                    constraints: BoxConstraints(maxWidth: 100),
+                                    decoration: BoxDecoration(
+                                        borderRadius: BorderRadius.circular(10),
+                                        color: AppColor.backgroundCounterMailboxColor),
+                                    child: Text(
+                                      '${_presentationEmail.mailboxName}',
+                                      maxLines: 1,
+                                      overflow: TextOverflow.ellipsis,
+                                      style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+                                    )
+                                )
+                            ],
+                          )),
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        children: [
+                          Expanded(
+                              child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                                  ? RichTextBuilder(
+                                      '${_presentationEmail.getPartialContent()}',
+                                      '${_searchQuery!.value}',
+                                      TextStyle(fontSize: 13, color: AppColor.colorContentEmail),
+                                      TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build()
+                                  : Text(
+                                      '${_presentationEmail.getPartialContent()}',
+                                      maxLines: 1,
+                                      overflow:TextOverflow.ellipsis,
+                                      style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
+                          ),
+                          if (_presentationEmail.hasAttachment == true)
+                            (ButtonBuilder(_imagePaths.icShare)
+                              ..padding(5)
+                              ..size(20))
+                            .build(),
+                          (ButtonBuilder(_presentationEmail.isFlaggedEmail() ? _imagePaths.icFlagged : _imagePaths.icFlag)
                             ..padding(5)
-                            ..size(20))
+                            ..size(20)
-                          .build(),
+                            ..onPressActionClick(() {
-                      (ButtonBuilder(_presentationEmail.isFlaggedEmail() ? _imagePaths.icFlagged : _imagePaths.icFlag)
-                          ..padding(5)
-                          ..size(20)
-                          ..onPressActionClick(() {
                               if (_onMarkAsStarEmailActionClick != null) {
                                 _onMarkAsStarEmailActionClick!(_presentationEmail);
                               }
                             }))
-                        .build(),
+                          .build(),
+                        ],
+                      )
                     ],
                   )
-                ],
+              ),
-              )
             ),
-          ),
+            Padding(
+              padding: EdgeInsets.only(top: 8, right: 12),
+              child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
+          ]),
         )
       )
     );
@@ -269,21 +262,7 @@ class EmailTileBuilder {
   }
 
   Color _getBackgroundColorItem() {
-    if (_selectModeAll == SelectMode.ACTIVE) {
+    return _responsiveUtils.isMobile(_context) ? AppColor.bgMailboxListMail : Colors.white;
-      if (_presentationEmail.selectMode == SelectMode.ACTIVE) {
-        return AppColor.mailboxSelectedBackgroundColor;
-      } else {
-        return _responsiveUtils.isMobile(_context) ? AppColor.bgMailboxListMail : Colors.white;
-      }
-    } else {
-      if (_responsiveUtils.isMobile(_context)) {
-        return AppColor.bgMailboxListMail;
-      } else if (_responsiveUtils.isDesktop(_context)) {
-        return _selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : Colors.white;
-      } else {
-        return Colors.white;
-      }
-    }
   }
 
   String _getInformationSender() {

model/lib/extensions/presentation_email_extension.dart

@@ -38,7 +38,8 @@ extension PresentationEmailExtension on PresentationEmail {
         replyTo: replyTo,
         mailboxIds: mailboxIds,
         mailboxNames: mailboxNames,
-        selectMode: selectMode == SelectMode.INACTIVE ? SelectMode.ACTIVE : SelectMode.INACTIVE
+        selectMode: selectMode == SelectMode.INACTIVE ? SelectMode.ACTIVE : SelectMode.INACTIVE,
+        avatarColors: avatarColors,
     );
   }
 
@@ -59,7 +60,8 @@ extension PresentationEmailExtension on PresentationEmail {
       replyTo: replyTo,
       mailboxIds: mailboxIds,
       mailboxNames: mailboxNames,
-      selectMode: selectMode
+      selectMode: selectMode,
+      avatarColors: avatarColors,
     );
   }
 

pubspec.yaml

@@ -182,3 +182,12 @@ flutter:
         - asset: assets/fonts/CircularStd/CircularStd-Medium.otf
           weight: 500
         - asset: assets/fonts/CircularStd/CircularStd-Book.otf
+    - family: SFProText
+      fonts:
+        - asset: assets/fonts/SFProText/SF-Pro-Text-Bold.otf
+          weight: 700
+        - asset: assets/fonts/SFProText/SF-Pro-Text-Semibold.otf
+          weight: 600
+        - asset: assets/fonts/SFProText/SF-Pro-Text-Medium.ttf
+          weight: 500
+        - asset: assets/fonts/SFProText/SF-Pro-Text-Regular.ttf