TF-2189 Only store email to sending queue when offline on iOS

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 0dd22e5c3d300573b13d43fbfe50fc1622e2ab13)

lib/features/composer/presentation/composer_bindings.dart

@@ -177,9 +177,7 @@ class ComposerBindings extends BaseBindings {
     Get.lazyPut(() => ComposerController(
         Get.find<DeviceInfoPlugin>(),
         Get.find<LocalFilePickerInteractor>(),
-        Get.find<SaveEmailAsDraftsInteractor>(),
         Get.find<GetEmailContentInteractor>(),
-        Get.find<UpdateEmailDraftsInteractor>(),
         Get.find<GetAllIdentitiesInteractor>(),
         Get.find<UploadController>(),
         Get.find<RemoveComposerCacheOnWebInteractor>(),

lib/features/composer/presentation/composer_controller.dart

@@ -44,8 +44,6 @@ import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts
 import 'package:tmail_ui_user/features/composer/domain/usecases/download_image_as_base64_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/get_autocomplete_with_device_contact_interactor.dart';
-import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_drafts_interactor.dart';
-import 'package:tmail_ui_user/features/composer/domain/usecases/update_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/email_action_type_extension.dart';
@@ -115,9 +113,7 @@ class ComposerController extends BaseController {
 
   final LocalFilePickerInteractor _localFilePickerInteractor;
   final DeviceInfoPlugin _deviceInfoPlugin;
-  final SaveEmailAsDraftsInteractor _saveEmailAsDraftsInteractor;
   final GetEmailContentInteractor _getEmailContentInteractor;
-  final UpdateEmailDraftsInteractor _updateEmailDraftsInteractor;
   final GetAllIdentitiesInteractor _getAllIdentitiesInteractor;
   final UploadController uploadController;
   final RemoveComposerCacheOnWebInteractor _removeComposerCacheOnWebInteractor;
@@ -174,9 +170,7 @@ class ComposerController extends BaseController {
   ComposerController(
     this._deviceInfoPlugin,
     this._localFilePickerInteractor,
-    this._saveEmailAsDraftsInteractor,
     this._getEmailContentInteractor,
-    this._updateEmailDraftsInteractor,
     this._getAllIdentitiesInteractor,
     this.uploadController,
     this._removeComposerCacheOnWebInteractor,
@@ -894,7 +888,7 @@ class ComposerController extends BaseController {
         ? CreateNewMailboxRequest(Id(_uuid.v1()), PresentationMailbox.outboxMailboxName)
         : null;
 
-      if (PlatformInfo.isAndroid && !networkConnectionController.isNetworkConnectionAvailable()) {
+      if (!networkConnectionController.isNetworkConnectionAvailable()) {
         switch(arguments.sendingEmailActionType) {
           case SendingEmailActionType.create:
             _showConfirmDialogStoreSendingEmail(
@@ -951,7 +945,9 @@ class ComposerController extends BaseController {
   void _showConfirmDialogStoreSendingEmail(SendingEmailArguments sendingEmailArguments) {
     showConfirmDialogAction(
       currentContext!,
-      '',
+      PlatformInfo.isIOS
+        ? AppLocalizations.of(currentContext!).messageDialogOfflineModeOnIOS
+        : '',
       AppLocalizations.of(currentContext!).proceed,
       onConfirmAction: () {
         uploadController.clearInlineFileUploaded();
@@ -969,27 +965,29 @@ class ComposerController extends BaseController {
         fontSize: 15,
         fontWeight: FontWeight.normal
       ),
-      listTextSpan: [
+      listTextSpan: PlatformInfo.isIOS
-        TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailFirst),
+        ? null
-        TextSpan(
+        : [
-          text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailSecond,
+            TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailFirst),
-          style: const TextStyle(
+            TextSpan(
-            color: AppColor.colorTitleSendingItem,
+              text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailSecond,
-            fontSize: 15,
+              style: const TextStyle(
-            fontWeight: FontWeight.w600
+                color: AppColor.colorTitleSendingItem,
-          ),
+                fontSize: 15,
-        ),
+                fontWeight: FontWeight.w600
-        TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailThird),
+              ),
-        TextSpan(
+            ),
-          text: AppLocalizations.of(currentContext!).sendingQueue,
+            TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailThird),
-          style: const TextStyle(
+            TextSpan(
-            color: AppColor.colorTitleSendingItem,
+              text: AppLocalizations.of(currentContext!).sendingQueue,
-            fontSize: 15,
+              style: const TextStyle(
-            fontWeight: FontWeight.w600
+                color: AppColor.colorTitleSendingItem,
-          ),
+                fontSize: 15,
-        ),
+                fontWeight: FontWeight.w600
-        TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailTail)
+              ),
-      ]
+            ),
+            TextSpan(text: AppLocalizations.of(currentContext!).messageDialogWhenStoreSendingEmailTail)
+          ]
     );
   }
 
@@ -1188,13 +1186,16 @@ class ComposerController extends BaseController {
     final userProfile = mailboxDashBoardController.userProfile.value;
     final accountId = mailboxDashBoardController.accountId.value;
     final session = mailboxDashBoardController.sessionCurrent;
+    final draftMailboxId = mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleDrafts];
 
     if (arguments == null ||
+        draftMailboxId == null ||
         userProfile == null ||
         session == null ||
-        accountId == null ||
+        accountId == null
-        arguments.presentationEmail?.id != _emailIdEditing
     ) {
+      logError('ComposerController::saveToDraftAndClose: Param is NULL');
+      uploadController.clearInlineFileUploaded();
       if (PlatformInfo.isWeb) {
         mailboxDashBoardController.closeComposerOverlay();
       } else {
@@ -1203,16 +1204,7 @@ class ComposerController extends BaseController {
       return;
     }
 
-    final isChanged = await _isEmailChanged(
+    if (_emailIdEditing != null && _emailIdEditing != arguments.presentationEmail?.id) {
-      context: context,
-      emailActionType: arguments.emailActionType,
-      presentationEmail: arguments.presentationEmail,
-      mailboxRole: arguments.mailboxRole
-    );
-
-    if (isChanged && context.mounted) {
-      final draftMailboxId = mailboxDashBoardController.mapDefaultMailboxIdByRole[PresentationMailbox.roleDrafts];
-
       final newEmail = await _generateEmail(
         context,
         userProfile,
@@ -1221,28 +1213,47 @@ class ComposerController extends BaseController {
         arguments: arguments,
       );
 
-      if (arguments.emailActionType == EmailActionType.editDraft) {
+      mailboxDashBoardController.updateEmailToDraft(
-        mailboxDashBoardController.consumeState(
+        session: session,
-          _updateEmailDraftsInteractor.execute(
+        accountId: accountId,
-            session,
+        newEmail: newEmail,
-            accountId,
+        oldEmailId: _emailIdEditing!
-            newEmail,
+      );
-            arguments.presentationEmail!.id!
+    } else {
-          )
+      final isChanged = await _isEmailChanged(
-        );
+        context: context,
-      } else {
+        emailActionType: arguments.emailActionType,
-        mailboxDashBoardController.consumeState(
+        presentationEmail: arguments.presentationEmail,
-          _saveEmailAsDraftsInteractor.execute(
+        mailboxRole: arguments.mailboxRole
-            session,
+      );
-            accountId,
+      log('ComposerController::saveToDraftAndClose: isChanged: $isChanged');
-            newEmail
+      if (isChanged && context.mounted) {
-          )
+        final newEmail = await _generateEmail(
+          context,
+          userProfile,
+          asDrafts: true,
+          draftMailboxId: draftMailboxId,
+          arguments: arguments,
         );
+
+        if (arguments.emailActionType == EmailActionType.editDraft &&
+            arguments.presentationEmail?.id != null) {
+          mailboxDashBoardController.updateEmailToDraft(
+            session: session,
+            accountId: accountId,
+            newEmail: newEmail,
+            oldEmailId: arguments.presentationEmail!.id!
+          );
+        } else {
+          mailboxDashBoardController.saveEmailToDraft(
+            session: session,
+            accountId: accountId,
+            email: newEmail
+          );
+        }
       }
-
-      uploadController.clearInlineFileUploaded();
     }
-
+    uploadController.clearInlineFileUploaded();
     if (PlatformInfo.isWeb) {
       mailboxDashBoardController.closeComposerOverlay();
     } else {
@@ -1285,21 +1296,17 @@ class ComposerController extends BaseController {
     );
 
     if (event.emailIdEditing == null) {
-      mailboxDashBoardController.consumeState(
+      mailboxDashBoardController.saveEmailToDraft(
-        _saveEmailAsDraftsInteractor.execute(
+        session: event.session,
-          event.session,
+        accountId: event.accountId,
-          event.accountId,
+        email: newEmail
-          newEmail
-        )
       );
     } else {
-      mailboxDashBoardController.consumeState(
+      mailboxDashBoardController.updateEmailToDraft(
-        _updateEmailDraftsInteractor.execute(
+        session: event.session,
-          event.session,
+        accountId: event.accountId,
-          event.accountId,
+        newEmail: newEmail,
-          newEmail,
+        oldEmailId: event.emailIdEditing!
-          event.emailIdEditing!
-        )
       );
     }
   }

lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart

@@ -7,7 +7,9 @@ import 'package:tmail_ui_user/features/caching/clients/recent_search_cache_clien
 import 'package:tmail_ui_user/features/caching/clients/state_cache_client.dart';
 import 'package:tmail_ui_user/features/composer/data/repository/contact_repository_impl.dart';
 import 'package:tmail_ui_user/features/composer/domain/repository/contact_repository.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/send_email_interactor.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/update_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/email/data/datasource/email_datasource.dart';
 import 'package:tmail_ui_user/features/email/data/datasource/html_datasource.dart';
 import 'package:tmail_ui_user/features/email/data/datasource_impl/email_datasource_impl.dart';
@@ -164,6 +166,8 @@ class MailboxDashBoardBindings extends BaseBindings {
       Get.find<GetAllSendingEmailInteractor>(),
       Get.find<StoreSessionInteractor>(),
       Get.find<EmptySpamFolderInteractor>(),
+      Get.find<SaveEmailAsDraftsInteractor>(),
+      Get.find<UpdateEmailDraftsInteractor>(),
     ));
     Get.put(AdvancedFilterController());
   }
@@ -298,6 +302,14 @@ class MailboxDashBoardBindings extends BaseBindings {
     ));
     SendingQueueInteractorBindings().dependencies();
     Get.lazyPut(() => StoreSessionInteractor(Get.find<SessionRepository>()));
+    Get.lazyPut(() => SaveEmailAsDraftsInteractor(
+      Get.find<EmailRepository>(),
+      Get.find<MailboxRepository>()
+    ));
+    Get.lazyPut(() => UpdateEmailDraftsInteractor(
+      Get.find<EmailRepository>(),
+      Get.find<MailboxRepository>()
+    ));
   }
 
   @override

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -28,7 +28,9 @@ import 'package:tmail_ui_user/features/composer/domain/model/email_request.dart'
 import 'package:tmail_ui_user/features/composer/domain/state/save_email_as_drafts_state.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/send_email_state.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts_state.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/save_email_as_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/domain/usecases/send_email_interactor.dart';
+import 'package:tmail_ui_user/features/composer/domain/usecases/update_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/compose_action_mode.dart';
 import 'package:tmail_ui_user/features/email/domain/model/mark_read_action.dart';
 import 'package:tmail_ui_user/features/email/domain/state/mark_as_email_read_state.dart';
@@ -168,6 +170,8 @@ class MailboxDashBoardController extends ReloadableController {
   final GetAllSendingEmailInteractor _getAllSendingEmailInteractor;
   final StoreSessionInteractor _storeSessionInteractor;
   final EmptySpamFolderInteractor _emptySpamFolderInteractor;
+  final SaveEmailAsDraftsInteractor _saveEmailAsDraftsInteractor;
+  final UpdateEmailDraftsInteractor _updateEmailDraftsInteractor;
 
   GetAllVacationInteractor? _getAllVacationInteractor;
   UpdateVacationInteractor? _updateVacationInteractor;
@@ -243,6 +247,8 @@ class MailboxDashBoardController extends ReloadableController {
     this._getAllSendingEmailInteractor,
     this._storeSessionInteractor,
     this._emptySpamFolderInteractor,
+    this._saveEmailAsDraftsInteractor,
+    this._updateEmailDraftsInteractor,
   ) : super(
     getAuthenticatedAccountInteractor,
     updateAuthenticationAccountInteractor
@@ -1876,7 +1882,9 @@ class MailboxDashBoardController extends ReloadableController {
   }
 
   void _handleStoreSendingEmailSuccess(StoreSendingEmailSuccess success) {
-    addSendingEmailToSendingQueue(success.sendingEmail);
+    if (PlatformInfo.isAndroid) {
+      addSendingEmailToSendingQueue(success.sendingEmail);
+    }
     getAllSendingEmails();
     if (currentOverlayContext != null && currentContext != null) {
       _appToast.showToastSuccessMessage(
@@ -1888,8 +1896,10 @@ class MailboxDashBoardController extends ReloadableController {
   }
 
   void _handleUpdateSendingEmailSuccess(UpdateSendingEmailSuccess success) async {
-    await WorkManagerController().cancelByUniqueId(success.newSendingEmail.sendingId);
+    if (PlatformInfo.isAndroid) {
-    addSendingEmailToSendingQueue(success.newSendingEmail);
+      await WorkManagerController().cancelByUniqueId(success.newSendingEmail.sendingId);
+      addSendingEmailToSendingQueue(success.newSendingEmail);
+    }
     getAllSendingEmails();
   }
 
@@ -2071,6 +2081,36 @@ class MailboxDashBoardController extends ReloadableController {
     draggableAppState.value = DraggableAppState.inActive;
   }
 
+  void saveEmailToDraft({
+    required Session session,
+    required AccountId accountId,
+    required Email email
+  }) {
+    consumeState(
+      _saveEmailAsDraftsInteractor.execute(
+        session,
+        accountId,
+        email
+      )
+    );
+  }
+
+  void updateEmailToDraft({
+    required Session session,
+    required AccountId accountId,
+    required Email newEmail,
+    required EmailId oldEmailId
+  }) {
+    consumeState(
+      _updateEmailDraftsInteractor.execute(
+        session,
+        accountId,
+        newEmail,
+        oldEmailId
+      )
+    );
+  }
+
   @override
   void onClose() {
     _emailReceiveManager.closeEmailReceiveManagerStream();

lib/features/offline_mode/model/sending_state.dart

@@ -29,7 +29,6 @@ enum SendingState {
       case SendingState.waiting:
       case SendingState.running:
       case SendingState.success:
-        return imagePaths.icDelivering;
       case SendingState.canceled:
         return imagePaths.icDelivering;
       case SendingState.error:

lib/features/sending_queue/domain/model/sending_email.dart

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'package:core/core.dart';
 import 'package:core/domain/extensions/datetime_extension.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter_date_range_picker/flutter_date_range_picker.dart';
@@ -109,7 +110,15 @@ class SendingEmail with EquatableMixin {
 
   bool get isRunning => sendingState == SendingState.running;
 
-  bool get isEditableSupported => isWaiting || isRunning || isCanceled;
+  bool get isEditableSupported {
+    if (PlatformInfo.isAndroid) {
+      return isWaiting || isRunning || isCanceled;
+    } else if (PlatformInfo.isIOS) {
+      return isWaiting || isCanceled;
+    } else {
+      return false;
+    }
+  }
 
   @override
   List<Object?> get props => [

lib/features/sending_queue/presentation/extensions/list_sending_email_extension.dart

@@ -20,5 +20,7 @@ extension ListSendingEmailExtension on List<SendingEmail> {
 
   bool isAllSendingStateError() => every((sendingEmail) => sendingEmail.isError);
 
+  bool isAllSendingStateWaitingOrError() => every((sendingEmail) => sendingEmail.isWaiting || sendingEmail.isError);
+
   List<SendingEmail> toSendingStateWaiting() => map((sendingEmail) => sendingEmail.updatingSendingState(SendingState.waiting)).toList();
 }

lib/features/sending_queue/presentation/sending_queue_view.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
@@ -35,13 +36,16 @@ class SendingQueueView extends GetWidget<SendingQueueController> with AppLoaderM
                 );
               }),
               const Divider(color: AppColor.colorDividerComposer, height: 1),
-              Obx(() {
+              if (PlatformInfo.isIOS)
-                if (!controller.isConnectedNetwork) {
+                const BannerMessageSendingQueueWidget()
-                  return const BannerMessageSendingQueueWidget();
+              else
-                } else {
+                Obx(() {
-                  return const SizedBox.shrink();
+                  if (!controller.isConnectedNetwork) {
-                }
+                    return const BannerMessageSendingQueueWidget();
-              }),
+                  } else {
+                    return const SizedBox.shrink();
+                  }
+                }),
               Expanded(child: _buildListSendingEmails(context)),
               Obx(() {
                 if (controller.isAllUnSelected) {

lib/features/sending_queue/presentation/styles/app_bar_sending_queue_widget_style.dart

@@ -0,0 +1,35 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+
+class AppBarSendingQueueWidgetStyle {
+  static const double height = 52;
+  static const double leadingRadius = 15;
+  static const double space = 8;
+  static const double trailingSize = 50;
+
+  static const Color backgroundColor = Colors.white;
+  static const Color iconColor = AppColor.colorTextButton;
+
+  static const EdgeInsetsGeometry leadingPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry selectIconPadding = EdgeInsets.symmetric(horizontal: 10, vertical: 5);
+
+  static EdgeInsetsGeometry getPaddingAppBarByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.symmetric(horizontal: 10);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 24);
+    }
+  }
+
+  static const TextStyle countStyle = TextStyle(
+    fontSize: 17,
+    color: AppColor.colorTextButton
+  );
+  static const TextStyle labelStyle = TextStyle(
+    fontSize: 21,
+    color: Colors.black,
+    fontWeight: FontWeight.bold
+  );
+}

lib/features/sending_queue/presentation/styles/sending_email_tile_style.dart

@@ -0,0 +1,49 @@
+
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
+
+class SendingEmailTileStyle {
+  static const double avatarIconSize = 60;
+  static const double avatarIconRadius = 30;
+  static const double selectIconSize = 24;
+  static const double attachmentIconSize = 20;
+  static const double space = 8;
+  static const double stateRowWidth = 120;
+  static const double stateLabelWidth = 80;
+
+  static const EdgeInsetsGeometry attachmentPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry timeCreatedPadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry statePadding = EdgeInsetsDirectional.only(start: 8);
+  static const EdgeInsetsGeometry statePaddingMobile = EdgeInsetsDirectional.only(top: 8);
+  static EdgeInsets getPaddingItemListViewByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
+  static EdgeInsets getPaddingDividerListViewByResponsiveSize(double width) {
+    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
+      return const EdgeInsets.only(left: 84, right: 8, top: 8);
+    } else {
+      return const EdgeInsets.only(left: 100, right: 24, top: 8);
+    }
+  }
+
+  static TextStyle getTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 15,
+    color: state.getTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.w600
+  );
+  static TextStyle getSubTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 13,
+    color: state.getSubTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.normal
+  );
+  static TextStyle getTimeCreatedTextStyle(SendingState state) => TextStyle(
+    fontSize: 13,
+    color: state.getTitleSendingEmailItemColor(),
+    fontWeight: FontWeight.normal
+  );
+}

lib/features/sending_queue/presentation/styles/sending_state_widget_style.dart

@@ -0,0 +1,17 @@
+
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
+
+class SendingStateWidgetStyle {
+  static const double space = 4;
+  static const double iconSize = 20;
+  static const double radius = 16;
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(horizontal: 8, vertical: 6);
+
+  static TextStyle getTitleTextStyle(SendingState state) => TextStyle(
+    fontSize: 15,
+    color: state.getTitleColor(),
+    fontWeight: FontWeight.normal
+  );
+}

lib/features/sending_queue/presentation/utils/sending_queue_utils.dart

@@ -4,13 +4,7 @@ import 'package:flutter/cupertino.dart';
 
 class SendingQueueUtils {
 
-  static EdgeInsets getPaddingAppBarByResponsiveSize(double width) {
+
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.symmetric(horizontal: 10);
-    } else {
-      return const EdgeInsets.symmetric(horizontal: 24);
-    }
-  }
 
   static EdgeInsets getMarginBannerMessageByResponsiveSize(double width) {
     if (ResponsiveUtils.isMatchedMobileWidth(width)) {
@@ -19,20 +13,4 @@ class SendingQueueUtils {
       return const EdgeInsets.symmetric(horizontal: 24, vertical: 16);
     }
   }
-
-  static EdgeInsets getPaddingItemListViewByResponsiveSize(double width) {
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
-    } else {
-      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
-    }
-  }
-
-  static EdgeInsets getPaddingDividerListViewByResponsiveSize(double width) {
-    if (ResponsiveUtils.isMatchedMobileWidth(width)) {
-      return const EdgeInsets.only(left: 84, right: 8, top: 8);
-    } else {
-      return const EdgeInsets.only(left: 100, right: 24, top: 8);
-    }
-  }
 }

lib/features/sending_queue/presentation/widgets/app_bar_sending_queue_widget.dart

@@ -1,15 +1,14 @@
-
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.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:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart';
-import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/app_bar_sending_queue_widget_style.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class AppBarSendingQueueWidget extends StatelessWidget {
@@ -19,7 +18,9 @@ class AppBarSendingQueueWidget extends StatelessWidget {
   final SelectMode selectMode;
   final List<SendingEmail> listSendingEmailSelected;
 
-  const AppBarSendingQueueWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+
+  AppBarSendingQueueWidget({
     super.key,
     required this.listSendingEmailSelected,
     this.onBackAction,
@@ -29,54 +30,49 @@ class AppBarSendingQueueWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
     return LayoutBuilder(builder: (context, constraints) {
       return Container(
-        height: 52,
+        height: AppBarSendingQueueWidgetStyle.height,
-        color: Colors.white,
+        color: AppBarSendingQueueWidgetStyle.backgroundColor,
-        padding: SendingQueueUtils.getPaddingAppBarByResponsiveSize(constraints.maxWidth),
+        padding: AppBarSendingQueueWidgetStyle.getPaddingAppBarByResponsiveSize(constraints.maxWidth),
         child: Row(
           children: [
             if (selectMode == SelectMode.INACTIVE)
-              buildIconWeb(
+              TMailButtonWidget.fromIcon(
-                icon: SvgPicture.asset(
+                icon: _imagePaths.icMenuMailbox,
-                  imagePaths.icMenuMailbox,
+                backgroundColor: Colors.transparent,
-                  colorFilter: AppColor.colorTextButton.asFilter(),
+                iconColor: AppBarSendingQueueWidgetStyle.iconColor,
-                  fit: BoxFit.fill
+                tooltipMessage: AppLocalizations.of(context).openMailboxMenu,
-                ),
+                onTapActionCallback: onOpenMailboxMenu
-                tooltip: AppLocalizations.of(context).openMailboxMenu,
-                onTap: onOpenMailboxMenu
               )
             else
               Padding(
-                padding: const EdgeInsets.only(left: 8),
+                padding: AppBarSendingQueueWidgetStyle.leadingPadding,
                 child: Material(
                   color: Colors.transparent,
-                  borderRadius: BorderRadius.circular(15),
+                  borderRadius: const BorderRadius.all(Radius.circular(AppBarSendingQueueWidgetStyle.leadingRadius)),
                   child: InkWell(
                     onTap: onBackAction,
-                    borderRadius: BorderRadius.circular(15),
+                    borderRadius: const BorderRadius.all(Radius.circular(AppBarSendingQueueWidgetStyle.leadingRadius)),
                     child: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                      padding: AppBarSendingQueueWidgetStyle.selectIconPadding,
                       child: Row(
                         mainAxisSize: MainAxisSize.min,
                         children: [
                           SvgPicture.asset(
-                            DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icCollapseFolder : imagePaths.icBack,
+                            DirectionUtils.isDirectionRTLByLanguage(context)
-                            colorFilter: AppColor.colorTextButton.asFilter(),
+                              ? _imagePaths.icCollapseFolder
+                              : _imagePaths.icBack,
+                            colorFilter: AppBarSendingQueueWidgetStyle.iconColor.asFilter(),
                             fit: BoxFit.fill
                           ),
-                          const SizedBox(width: 8),
+                          const SizedBox(width: AppBarSendingQueueWidgetStyle.space),
                           Text(
                             listSendingEmailSelected.length.toString(),
                             maxLines: 1,
                             overflow: CommonTextStyle.defaultTextOverFlow,
                             softWrap: CommonTextStyle.defaultSoftWrap,
-                            style: const TextStyle(
+                            style: AppBarSendingQueueWidgetStyle.countStyle
-                              fontSize: 17,
-                              color: AppColor.colorTextButton
-                            )
                           )
                         ]
                       ),
@@ -90,13 +86,9 @@ class AppBarSendingQueueWidget extends StatelessWidget {
               textAlign: TextAlign.center,
               overflow: CommonTextStyle.defaultTextOverFlow,
               softWrap: CommonTextStyle.defaultSoftWrap,
-              style: const TextStyle(
+              style: AppBarSendingQueueWidgetStyle.labelStyle
-                fontSize: 21,
-                color: Colors.black,
-                fontWeight: FontWeight.bold
-              )
             )),
-            const SizedBox(width: 50)
+            const SizedBox(width: AppBarSendingQueueWidgetStyle.trailingSize)
           ],
         ),
       );

lib/features/sending_queue/presentation/widgets/banner_message_sending_queue_widget.dart

@@ -1,6 +1,7 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
@@ -35,7 +36,9 @@ class BannerMessageSendingQueueWidget extends StatelessWidget {
             ),
             const SizedBox(width: 8),
             Expanded(child: Text(
-              AppLocalizations.of(context).bannerMessageSendingQueueView,
+              PlatformInfo.isAndroid
+                ? AppLocalizations.of(context).bannerMessageSendingQueueView
+                : AppLocalizations.of(context).bannerMessageSendingQueueViewOnIOS,
               style: const TextStyle(
                 fontSize: 15,
                 color: Colors.black,

lib/features/sending_queue/presentation/widgets/bottom_bar_sending_queue_widget.dart

@@ -3,6 +3,7 @@ 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/views/button/tmail_button_widget.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/state/button_state.dart';
@@ -18,7 +19,10 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
   final OnHandleSendingEmailActionType? onHandleSendingEmailActionType;
   final bool isConnectedNetwork;
 
-  const BottomBarSendingQueueWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  BottomBarSendingQueueWidget({
     super.key,
     required this.listSendingEmailSelected,
     this.onHandleSendingEmailActionType,
@@ -27,9 +31,6 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-    final responsiveUtils = Get.find<ResponsiveUtils>();
-
     return Container(
       decoration: const BoxDecoration(
         border: Border(top: BorderSide(
@@ -45,7 +46,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
             child: TMailButtonWidget(
               key: Key(SendingEmailActionType.edit.getButtonKey()),
               text: SendingEmailActionType.edit.getButtonTitle(context),
-              icon: imagePaths.icEdit,
+              icon: _imagePaths.icEdit,
               borderRadius: 0,
               backgroundColor: Colors.transparent,
               iconColor: SendingEmailActionType.edit.getButtonIconColor(_isEditable ? ButtonState.enabled : ButtonState.disabled),
@@ -53,7 +54,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                 fontSize: 12,
                 color: SendingEmailActionType.edit.getButtonTitleColor(_isEditable ? ButtonState.enabled : ButtonState.disabled)
               ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
               onTapActionCallback: () {
                 if (_isEditable) {
                   onHandleSendingEmailActionType?.call(
@@ -68,7 +69,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
             child: TMailButtonWidget(
               key: Key(SendingEmailActionType.resend.getButtonKey()),
               text: SendingEmailActionType.resend.getButtonTitle(context),
-              icon: imagePaths.icRefresh,
+              icon: _imagePaths.icRefresh,
               borderRadius: 0,
               backgroundColor: Colors.transparent,
               iconColor: SendingEmailActionType.resend.getButtonIconColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled),
@@ -76,7 +77,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                 fontSize: 12,
                 color: SendingEmailActionType.resend.getButtonTitleColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled)
               ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
               onTapActionCallback: () {
                 if (_isCanResend) {
                   onHandleSendingEmailActionType?.call(SendingEmailActionType.resend, listSendingEmailSelected);
@@ -88,7 +89,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
             child: TMailButtonWidget(
               key: Key(SendingEmailActionType.delete.getButtonKey()),
               text: SendingEmailActionType.delete.getButtonTitle(context),
-              icon: imagePaths.icDeleteComposer,
+              icon: _imagePaths.icDeleteComposer,
               borderRadius: 0,
               backgroundColor: Colors.transparent,
               iconColor: SendingEmailActionType.delete.getButtonIconColor(ButtonState.enabled),
@@ -96,7 +97,7 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
                 fontSize: 12,
                 color: SendingEmailActionType.delete.getButtonTitleColor(ButtonState.enabled)
               ),
-              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              verticalDirection: _responsiveUtils.isPortraitMobile(context),
               onTapActionCallback: () => onHandleSendingEmailActionType?.call(SendingEmailActionType.delete, listSendingEmailSelected),
             ),
           ),
@@ -105,9 +106,28 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
     );
   }
 
-  bool get _isEditable => !isConnectedNetwork &&
+  bool get _isEditable {
-    listSendingEmailSelected.length == 1 &&
+    if (PlatformInfo.isAndroid) {
-    listSendingEmailSelected.first.isEditableSupported;
+      return !isConnectedNetwork &&
+        listSendingEmailSelected.length == 1 &&
+        listSendingEmailSelected.first.isEditableSupported;
+    } else if (PlatformInfo.isIOS) {
+      return listSendingEmailSelected.length == 1 &&
+        listSendingEmailSelected.first.isEditableSupported;
+    } else {
+      return false;
+    }
+  }
 
-  bool get _isCanResend => listSendingEmailSelected.isAllSendingStateError();
+  bool get _isCanResend {
+    if (PlatformInfo.isAndroid) {
+      return listSendingEmailSelected.isAllSendingStateError();
+    } else if (PlatformInfo.isIOS) {
+      return isConnectedNetwork &&
+        listSendingEmailSelected.length == 1 &&
+        (listSendingEmailSelected.first.isWaiting || listSendingEmailSelected.first.isError);
+    } else {
+      return false;
+    }
+  }
 }

lib/features/sending_queue/presentation/widgets/sending_email_tile_widget.dart

@@ -3,6 +3,7 @@ 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/text/text_overflow_builder.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -10,7 +11,7 @@ import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/sending_queue/domain/model/sending_email.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/model/sending_email_action_type.dart';
-import 'package:tmail_ui_user/features/sending_queue/presentation/utils/sending_queue_utils.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/sending_email_tile_style.dart';
 import 'package:tmail_ui_user/features/sending_queue/presentation/widgets/sending_state_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -26,7 +27,9 @@ class SendingEmailTileWidget extends StatelessWidget {
   final OnSelectSendingEmailItemAction? onTapAction;
   final OnSelectLeadingSendingEmailItemAction? onSelectLeadingAction;
 
-  const SendingEmailTileWidget({
+  final _imagePaths = Get.find<ImagePaths>();
+  
+  SendingEmailTileWidget({
     super.key,
     required this.sendingEmail,
     required this.selectMode,
@@ -37,8 +40,6 @@ class SendingEmailTileWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-
     return LayoutBuilder(builder: (context, constraints) {
       return Material(
         color: Colors.transparent,
@@ -49,27 +50,27 @@ class SendingEmailTileWidget extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Padding(
-                padding: SendingQueueUtils.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
+                padding: SendingEmailTileStyle.getPaddingItemListViewByResponsiveSize(constraints.maxWidth),
                 child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                  crossAxisAlignment: _axisAlignment,
                   children: [
                     if (selectMode == SelectMode.ACTIVE)
                       GestureDetector(
                         child: Container(
-                          width: 60,
+                          width: SendingEmailTileStyle.avatarIconSize,
-                          height: 60,
+                          height: SendingEmailTileStyle.avatarIconSize,
                           decoration: const BoxDecoration(
                             color: Colors.white,
-                            borderRadius: BorderRadius.all(Radius.circular(30))
+                            borderRadius: BorderRadius.all(Radius.circular(SendingEmailTileStyle.avatarIconRadius))
                           ),
                           alignment: Alignment.center,
                           child: SvgPicture.asset(
                             sendingEmail.isSelected
-                              ? imagePaths.icSelected
+                              ? _imagePaths.icSelected
-                              : imagePaths.icUnSelected,
+                              : _imagePaths.icUnSelected,
                             fit: BoxFit.fill,
-                            width: 24,
+                            width: SendingEmailTileStyle.selectIconSize,
-                            height: 24
+                            height: SendingEmailTileStyle.selectIconSize
                           ),
                         ),
                         onTap: () => onSelectLeadingAction?.call(sendingEmail),
@@ -77,84 +78,72 @@ class SendingEmailTileWidget extends StatelessWidget {
                     else
                       SvgPicture.asset(
                         sendingEmail.presentationEmail.numberOfAllEmailAddress() == 1
-                          ? sendingEmail.sendingState.getAvatarPersonal(imagePaths)
+                          ? sendingEmail.sendingState.getAvatarPersonal(_imagePaths)
-                          : sendingEmail.sendingState.getAvatarGroup(imagePaths),
+                          : sendingEmail.sendingState.getAvatarGroup(_imagePaths),
                         fit: BoxFit.fill,
-                        width: 60,
+                        width: SendingEmailTileStyle.avatarIconSize,
-                        height: 60,
+                        height: SendingEmailTileStyle.avatarIconSize,
                       ),
-                    const SizedBox(width: 8),
+                    const SizedBox(width: SendingEmailTileStyle.space),
                     Expanded(child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
                         Row(children: [
                           Expanded(child: TextOverflowBuilder(
                             AppLocalizations.of(context).titleRecipientSendingEmail(sendingEmail.presentationEmail.recipientsName()),
-                            style: TextStyle(
+                            style: SendingEmailTileStyle.getTitleTextStyle(sendingEmail.sendingState)
-                              fontSize: 15,
-                              color: sendingEmail.sendingState.getTitleSendingEmailItemColor(),
-                              fontWeight: FontWeight.w600
-                            )
                           )),
                           if (sendingEmail.email.attachments != null && sendingEmail.email.attachments!.isNotEmpty)
                             Padding(
-                              padding: const EdgeInsets.only(left: 8),
+                              padding: SendingEmailTileStyle.attachmentPadding,
                               child: SvgPicture.asset(
-                                imagePaths.icAttachment,
+                                _imagePaths.icAttachment,
-                                width: 20,
+                                width: SendingEmailTileStyle.attachmentIconSize,
-                                height: 20,
+                                height: SendingEmailTileStyle.attachmentIconSize,
                                 fit: BoxFit.fill
                               )
                             ),
                           Padding(
-                            padding: const EdgeInsets.only(left: 8),
+                            padding: SendingEmailTileStyle.timeCreatedPadding,
                             child: Text(
                               sendingEmail.getCreateTimeAt(Localizations.localeOf(context).toLanguageTag()),
                               maxLines: 1,
                               softWrap: CommonTextStyle.defaultSoftWrap,
                               overflow: CommonTextStyle.defaultTextOverFlow,
-                              style: TextStyle(
+                              style: SendingEmailTileStyle.getTimeCreatedTextStyle(sendingEmail.sendingState)
-                                fontSize: 13,
-                                color: sendingEmail.sendingState.getTitleSendingEmailItemColor(),
-                                fontWeight: FontWeight.normal
-                              )
                             )
                           ),
-                          if (!ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                          if (!ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth) && _isShowStateLabel)
                             Container(
-                              margin: const EdgeInsets.only(left: 8),
+                              margin: SendingEmailTileStyle.statePadding,
-                              width: 120,
+                              width: SendingEmailTileStyle.stateRowWidth,
                               child: Row(
                                 mainAxisSize: MainAxisSize.min,
                                 children: [
                                   const Spacer(),
                                   SendingStateWidget(
                                     sendingState: sendingEmail.sendingState,
-                                    constraints: const BoxConstraints(maxWidth: 80),
+                                    constraints: const BoxConstraints(maxWidth: SendingEmailTileStyle.stateLabelWidth),
                                   )
                                 ]
                               )
                             )
                         ]),
-                        const SizedBox(height: 8),
+                        const SizedBox(height: SendingEmailTileStyle.space),
                         TextOverflowBuilder(
                           sendingEmail.presentationEmail.getEmailTitle(),
-                          style: TextStyle(
+                          style: SendingEmailTileStyle.getSubTitleTextStyle(sendingEmail.sendingState)
-                            fontSize: 13,
-                            color: sendingEmail.sendingState.getSubTitleSendingEmailItemColor(),
-                            fontWeight: FontWeight.normal
-                          )
                         ),
-                        if (ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth))
+                        if (ResponsiveUtils.isMatchedMobileWidth(constraints.maxWidth) && _isShowStateLabel)
                           Padding(
-                            padding: const EdgeInsets.only(top: 8),
+                            padding: SendingEmailTileStyle.statePaddingMobile,
                             child: SendingStateWidget(sendingState: sendingEmail.sendingState))
                       ]
                     ))
                 ]),
               ),
               Padding(
-                padding: SendingQueueUtils.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth),
+                padding: SendingEmailTileStyle.getPaddingDividerListViewByResponsiveSize(constraints.maxWidth),
                 child: const Divider(color: AppColor.lineItemListColor, height: 1),
               )
             ],
@@ -163,4 +152,20 @@ class SendingEmailTileWidget extends StatelessWidget {
       );
     });
   }
+
+  bool get _isShowStateLabel {
+    if (PlatformInfo.isIOS) {
+      return !sendingEmail.isWaiting;
+    } else {
+      return true;
+    }
+  }
+
+  CrossAxisAlignment get _axisAlignment {
+    if (PlatformInfo.isIOS) {
+      return _isShowStateLabel ? CrossAxisAlignment.start : CrossAxisAlignment.center;
+    } else {
+      return CrossAxisAlignment.start;
+    }
+  }
 }

lib/features/sending_queue/presentation/widgets/sending_state_widget.dart

@@ -1,16 +1,21 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/loading/cupertino_loading_widget.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/offline_mode/model/sending_state.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+import 'package:tmail_ui_user/features/sending_queue/presentation/styles/sending_state_widget_style.dart';
 
 class SendingStateWidget extends StatelessWidget {
 
   final SendingState sendingState;
   final BoxConstraints? constraints;
 
-  const SendingStateWidget({
+  final _imagePath = Get.find<ImagePaths>();
+
+  SendingStateWidget({
     super.key,
     required this.sendingState,
     this.constraints
@@ -18,25 +23,35 @@ class SendingStateWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imagePath = getBinding<ImagePaths>();
 
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      padding: SendingStateWidgetStyle.padding,
       decoration: BoxDecoration(
         color: sendingState.getBackgroundColor(),
-        borderRadius: const BorderRadius.all(Radius.circular(16))
+        borderRadius: const BorderRadius.all(Radius.circular(SendingStateWidgetStyle.radius))
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          SvgPicture.asset(
+          if (PlatformInfo.isIOS)
-            sendingState.getIcon(imagePath!),
+            if (sendingState == SendingState.running)
-            fit: BoxFit.fill,
+              const CupertinoLoadingWidget(size: SendingStateWidgetStyle.iconSize)
-            width: 20,
+            else
-            height: 20
+              SvgPicture.asset(
-          ),
+                sendingState.getIcon(_imagePath),
-          const SizedBox(width: 4),
+                fit: BoxFit.fill,
+                width: SendingStateWidgetStyle.iconSize,
+                height: SendingStateWidgetStyle.iconSize
+              )
+          else
+            SvgPicture.asset(
+              sendingState.getIcon(_imagePath),
+              fit: BoxFit.fill,
+              width: SendingStateWidgetStyle.iconSize,
+              height: SendingStateWidgetStyle.iconSize
+            ),
+          const SizedBox(width: SendingStateWidgetStyle.space),
           if (constraints != null)
             ConstrainedBox(
               constraints: constraints!,
@@ -45,11 +60,7 @@ class SendingStateWidget extends StatelessWidget {
                 maxLines: 1,
                 overflow: CommonTextStyle.defaultTextOverFlow,
                 softWrap: CommonTextStyle.defaultSoftWrap,
-                style: TextStyle(
+                style: SendingStateWidgetStyle.getTitleTextStyle(sendingState)
-                  fontSize: 15,
-                  color: sendingState.getTitleColor(),
-                  fontWeight: FontWeight.normal
-                )
               ),
             )
           else
@@ -58,11 +69,7 @@ class SendingStateWidget extends StatelessWidget {
               maxLines: 1,
               overflow: CommonTextStyle.defaultTextOverFlow,
               softWrap: CommonTextStyle.defaultSoftWrap,
-              style: TextStyle(
+              style: SendingStateWidgetStyle.getTitleTextStyle(sendingState)
-                fontSize: 15,
-                color: sendingState.getTitleColor(),
-                fontWeight: FontWeight.normal
-              )
             )
         ]
       ),

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2023-10-11T09:37:10.790631",
+  "@@last_modified": "2023-10-19T11:55:20.606226",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -3263,5 +3263,17 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "messageDialogOfflineModeOnIOS": "The message will be in Sending Queue. You can try again when being online.",
+  "@messageDialogOfflineModeOnIOS": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "bannerMessageSendingQueueViewOnIOS": "Messages in the Send Queue mailbox can be sent while online.",
+  "@bannerMessageSendingQueueViewOnIOS": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -3368,4 +3368,18 @@ class AppLocalizations {
       name: 'textSize'
     );
   }
+
+  String get messageDialogOfflineModeOnIOS {
+    return Intl.message(
+      'The message will be in Sending Queue. You can try again when being online.',
+      name: 'messageDialogOfflineModeOnIOS'
+    );
+  }
+
+  String get bannerMessageSendingQueueViewOnIOS {
+    return Intl.message(
+      'Messages in the Send Queue mailbox can be sent while online.',
+      name: 'bannerMessageSendingQueueViewOnIOS'
+    );
+  }
 }