TF-984 Apply new design for toast message when move action

assets/images/ic_undo.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M8.3618 2.35228C8.08285 2.07333 7.63059 2.07333 7.35165 2.35228L3.78022 5.9237C3.50127 6.20265 3.50127 6.65491 3.78022 6.93386L7.35165 10.5053C7.63059 10.7842 8.08285 10.7842 8.3618 10.5053C8.64075 10.2263 8.64075 9.77408 8.3618 9.49513L6.00958 7.14235L10.3567 7.14307C12.5264 7.14307 14.2853 8.90195 14.2853 11.0716C14.2853 13.2413 12.5264 15.0002 10.3567 15.0002H7.14244C6.74795 15.0002 6.42815 15.32 6.42815 15.7145C6.42815 16.109 6.74795 16.4288 7.14244 16.4288H10.3567C13.3154 16.4288 15.7139 14.0303 15.7139 11.0716C15.7139 8.11297 13.3154 5.7145 10.3567 5.7145L6.01101 5.71378L8.3618 3.36243C8.61929 3.10494 8.6391 2.69977 8.42122 2.41957L8.3618 2.35228Z"
+        fill="white" />
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -60,7 +60,7 @@ extension AppColor on Color {
   static const disableSendEmailButtonColor = Color(0xFFA9B4C2);
   static const borderLeftEmailContentColor = Color(0xFFEFEFEF);
   static const toastBackgroundColor = Color(0xFFACAFFF);
-  static const toastSuccessBackgroundColor = Color(0xFF04AA11);
+  static const toastSuccessBackgroundColor = Color(0xFF4BB34B);
   static const toastErrorBackgroundColor = Color(0xFFFF5858);
   static const toastWithActionBackgroundColor = Color(0xFF3F3F3F);
   static const buttonActionToastWithActionColor = Color(0xFF7ADCF8);

core/lib/presentation/resources/image_paths.dart

@@ -161,6 +161,7 @@ class ImagePaths {
   String get icCalendar => _getImagePath('ic_calendar.svg');
   String get icAddEmailForward => _getImagePath('ic_add_email_forwards.svg');
   String get icChevronDownOutline => _getImagePath('ic_chevron_down_outline.svg');
+  String get icUndo => _getImagePath('ic_undo.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/utils/app_toast.dart

@@ -38,37 +38,95 @@ class AppToast {
         gravity: ToastGravity.BOTTOM);
   }
 
-  void showToastWithAction(
+  void showBottomToast(
       BuildContext context,
       String message,
-      String actionName,
+      {
-      Function onActionClick, {double? maxWidth}) {
+        String? actionName,
+        Function? onActionClick,
+        Widget? actionIcon,
+        Widget? leadingIcon,
+        double? maxWidth,
+        Color? backgroundColor,
+        Color? textColor,
+        Color? textActionColor,
+      }
+  ) {
+    var trailingAction;
+
+    if (actionName != null) {
+      if (actionIcon == null) {
+        trailingAction = TextButton(
+          onPressed: () {
+            ToastView.dismiss();
+            onActionClick?.call();
+          },
+          child: Text(
+            actionName,
+            style: TextStyle(
+                fontSize: 15,
+                fontWeight: FontWeight.normal,
+                color: textActionColor ?? AppColor.buttonActionToastWithActionColor),
+          ),
+        );
+      } else {
+        trailingAction = Material(
+          color: Colors.transparent,
+          child: InkWell(
+              onTap: () {
+                ToastView.dismiss();
+                onActionClick?.call();
+              },
+              customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+              child: Padding(
+                padding: EdgeInsets.symmetric(vertical: 6, horizontal: 8),
+                child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      actionIcon,
+                      Text(
+                        actionName,
+                        style: TextStyle(
+                            fontSize: 15,
+                            fontWeight: FontWeight.normal,
+                            color: textActionColor ?? Colors.white),
+                      )
+                    ]
+                ),
+              )),
+        );
+      }
+    }
+
     showToastMessage(
         context,
         message,
         maxWidth: maxWidth,
-        trailing: TextButton(
+        backgroundColor: backgroundColor,
-          onPressed: () {
+        textColor: textColor,
-            ToastView.dismiss();
+        leading: leadingIcon,
-            onActionClick.call();
+        trailing: trailingAction);
-          },
-          child: Text(
-            actionName,
-            style: const TextStyle(fontSize: 16, color: AppColor.buttonActionToastWithActionColor),
-          ),
-        ));
   }
 
-  void showToastMessage(BuildContext context, String message, {
+  void showToastMessage(
-    Widget? leading, Widget? trailing, double? maxWidth
+    BuildContext context,
+    String message, {
+    Color? textColor,
+    Widget? leading,
+    Widget? trailing,
+    double? maxWidth,
+    Color? backgroundColor
   }) {
     TMailToast.showToast(
         message,
         context,
         width: maxWidth,
         toastPosition: ToastPosition.BOTTOM,
-        textStyle: TextStyle(fontSize: 16, color: Colors.white),
+        textStyle: TextStyle(
-        backgroundColor: AppColor.toastWithActionBackgroundColor,
+            fontSize: 15,
+            fontWeight: FontWeight.normal,
+            color: textColor ?? Colors.white),
+        backgroundColor: backgroundColor ?? AppColor.toastWithActionBackgroundColor,
         trailing: trailing != null
           ? Padding(
               padding: const EdgeInsets.only(left: 8),
@@ -79,7 +137,7 @@ class AppToast {
                 padding: const EdgeInsets.only(right: 8),
                 child: PointerInterceptor(child: leading))
             : null,
-        toastBorderRadius: 5.0,
+        toastBorderRadius: 10.0,
         toastDuration: 3
     );
   }

lib/features/email/presentation/email_controller.dart

@@ -481,17 +481,28 @@ class EmailController extends BaseController with AppLoaderMixin {
     mailboxDashBoardController.dispatchState(Right(success));
 
     if (success.moveAction == MoveAction.moving && currentContext != null && currentOverlayContext != null) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
-          currentOverlayContext!,
+        currentOverlayContext!,
-          success.emailActionType.getToastMessageMoveToMailboxSuccess(currentContext!, destinationPath: success.destinationPath),
+        success.emailActionType.getToastMessageMoveToMailboxSuccess(currentContext!, destinationPath: success.destinationPath),
-          AppLocalizations.of(currentContext!).undo_action, () {
+        actionName: AppLocalizations.of(currentContext!).undo,
-        _revertedToOriginalMailbox(MoveToMailboxRequest(
+        onActionClick: () {
+          _revertedToOriginalMailbox(MoveToMailboxRequest(
               [success.emailId],
               success.destinationMailboxId,
               success.currentMailboxId,
               MoveAction.undo,
               success.emailActionType));
-          },
+        },
+        leadingIcon: SvgPicture.asset(
+            imagePaths.icFolderMailbox,
+            width: 24,
+            height: 24,
+            color: Colors.white,
+            fit: BoxFit.fill),
+        backgroundColor: AppColor.toastSuccessBackgroundColor,
+        textColor: Colors.white,
+        textActionColor: Colors.white,
+        actionIcon: SvgPicture.asset(imagePaths.icUndo),
         maxWidth: responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -400,11 +400,19 @@ class MailboxController extends BaseMailboxController {
 
   void _createNewMailboxSuccess(CreateNewMailboxSuccess success) {
     if (currentOverlayContext != null && currentContext != null) {
-      _appToast.showToastWithIcon(
+      _appToast.showBottomToast(
           currentOverlayContext!,
-          textColor: AppColor.toastSuccessBackgroundColor,
+          AppLocalizations.of(currentContext!).new_mailbox_is_created(success.newMailbox.name?.name ?? ''),
-          message: AppLocalizations.of(currentContext!).new_mailbox_is_created(success.newMailbox.name?.name ?? ''),
+          leadingIcon: SvgPicture.asset(
-          icon: _imagePaths.icFolderMailbox);
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!));
     }
 
     refreshMailboxChanges(currentMailboxState: success.currentMailboxState);
@@ -418,11 +426,19 @@ class MailboxController extends BaseMailboxController {
         messageError = exception.description ?? AppLocalizations.of(currentContext!).create_new_mailbox_failure;
       }
 
-      _appToast.showToastWithIcon(
+      _appToast.showBottomToast(
           currentOverlayContext!,
-          message: messageError,
+          messageError,
-          iconColor: AppColor.toastErrorBackgroundColor,
+          leadingIcon: SvgPicture.asset(
-          icon: _imagePaths.icNotConnection);
+              _imagePaths.icNotConnection,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastErrorBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!));
     }
   }
 
@@ -761,18 +777,28 @@ class MailboxController extends BaseMailboxController {
     if (success.moveAction == MoveAction.moving
         && currentOverlayContext != null
         && currentContext != null) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           AppLocalizations.of(currentContext!).moved_to_mailbox(
               success.destinationMailboxName?.name ?? AppLocalizations.of(currentContext!).allMailboxes),
-          AppLocalizations.of(currentContext!).undo_action,
+          actionName: AppLocalizations.of(currentContext!).undo,
-          () {
+          onActionClick: () {
             _undoMovingMailbox(MoveMailboxRequest(
                 success.mailboxIdSelected,
                 MoveAction.undo,
                 destinationMailboxId: success.parentId,
                 parentId: success.destinationMailboxId));
           },
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!));
     }
 

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

@@ -448,11 +448,21 @@ class MailboxDashBoardController extends ReloadableController {
 
   void _saveEmailAsDraftsSuccess(SaveEmailAsDraftsSuccess success) {
     if (currentContext != null && currentOverlayContext != null) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           AppLocalizations.of(currentContext!).drafts_saved,
-          AppLocalizations.of(currentContext!).discard,
+          actionName: AppLocalizations.of(currentContext!).discard,
-          () => _discardEmail(success.emailAsDrafts),
+          onActionClick: () => _discardEmail(success.emailAsDrafts),
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icMailboxDrafts,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }
@@ -464,10 +474,11 @@ class MailboxDashBoardController extends ReloadableController {
 
   void _moveToMailboxSuccess(MoveToMailboxSuccess success) {
     if (success.moveAction == MoveAction.moving && currentContext != null && currentOverlayContext != null) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           success.emailActionType.getToastMessageMoveToMailboxSuccess(currentContext!, destinationPath: success.destinationPath),
-          AppLocalizations.of(currentContext!).undo_action, () {
+          actionName: AppLocalizations.of(currentContext!).undo,
+          onActionClick: () {
             _revertedToOriginalMailbox(MoveToMailboxRequest(
                 [success.emailId],
                 success.destinationMailboxId,
@@ -475,6 +486,16 @@ class MailboxDashBoardController extends ReloadableController {
                 MoveAction.undo,
                 success.emailActionType));
           },
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }
@@ -673,13 +694,13 @@ class MailboxDashBoardController extends ReloadableController {
         currentOverlayContext != null &&
         emailActionType != null &&
         moveAction == MoveAction.moving) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           emailActionType.getToastMessageMoveToMailboxSuccess(
               currentContext!,
               destinationPath: destinationPath),
-          AppLocalizations.of(currentContext!).undo_action,
+          actionName: AppLocalizations.of(currentContext!).undo,
-          () {
+          onActionClick: () {
             final newCurrentMailboxId = destinationMailboxId;
             final newDestinationMailboxId = currentMailboxId;
             if (newCurrentMailboxId != null && newDestinationMailboxId != null) {
@@ -692,6 +713,16 @@ class MailboxDashBoardController extends ReloadableController {
                   destinationPath: destinationPath));
             }
           },
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }

lib/features/thread/presentation/thread_controller.dart

@@ -701,10 +701,11 @@ class ThreadController extends BaseController {
 
     if (currentContext != null && currentOverlayContext != null
         && emailActionType != null && moveAction == MoveAction.moving) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           emailActionType.getToastMessageMoveToMailboxSuccess(currentContext!, destinationPath: destinationPath),
-          AppLocalizations.of(currentContext!).undo_action, () {
+          actionName: AppLocalizations.of(currentContext!).undo,
+          onActionClick: () {
             final newCurrentMailboxId = destinationMailboxId;
             final newDestinationMailboxId = currentMailboxId;
             if (newCurrentMailboxId != null && newDestinationMailboxId != null) {
@@ -717,6 +718,16 @@ class ThreadController extends BaseController {
                   destinationPath: destinationPath));
             }
           },
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }
@@ -1101,10 +1112,11 @@ class ThreadController extends BaseController {
     mailboxDashBoardController.dispatchState(Right(success));
 
     if (success.moveAction == MoveAction.moving && currentContext != null && currentOverlayContext != null) {
-      _appToast.showToastWithAction(
+      _appToast.showBottomToast(
           currentOverlayContext!,
           AppLocalizations.of(currentContext!).moved_to_mailbox(success.destinationPath ?? ''),
-          AppLocalizations.of(currentContext!).undo_action, () {
+          actionName: AppLocalizations.of(currentContext!).undo,
+          onActionClick: () {
             _revertedToOriginalMailbox(MoveToMailboxRequest(
                 [success.emailId],
                 success.destinationMailboxId,
@@ -1112,6 +1124,16 @@ class ThreadController extends BaseController {
                 MoveAction.undo,
                 success.emailActionType));
           },
+          leadingIcon: SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: 24,
+              height: 24,
+              color: Colors.white,
+              fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
           maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!)
       );
     }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-10-10T22:38:31.310368",
+  "@@last_modified": "2022-10-10T23:39:00.642884",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -414,8 +414,8 @@
       "destinationMailboxPath": {}
     }
   },
-  "undo_action": "UNDO",
+  "undo": "Undo",
-  "@undo_action": {
+  "@undo": {
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}

lib/main/localizations/app_localizations.dart

@@ -432,10 +432,10 @@ class AppLocalizations {
     );
   }
 
-  String get undo_action {
+  String get undo {
     return Intl.message(
-        'UNDO',
+        'Undo',
-        name: 'undo_action'
+        name: 'undo'
     );
   }