fixes #108 Message status change

src/components/Toast/index.jsx

@@ -8,30 +8,48 @@ import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 
 import './index.scss';
-
+import { Translation } from 'react-i18next';
 const Toast = () => {
   return <ToastContainer hideProgressBar={true} />;
 };
 
 const notify = (msg, type = 'success') => {
   switch (type) {
     case 'error':
-      toast.error(msg, {
-        className: 'bg-noti-bg-error fw-bold text-noti-error ps-2',
-        icon: () => <img alt="error" src="/assets/images/error.png" />,
-      });
+      toast.error(
+        <div>
+          <Translation ns="common">{(t) => <div>{t('txt_error')}</div>}</Translation>
+          <div className="fw-normal">{msg}</div>
+        </div>,
+        {
+          className: 'bg-noti-bg-error fw-bold text-noti-error px-2 py-1',
+          icon: () => <img alt="error" src="/assets/images/error.png" />,
+        }
+      );
       break;
     case 'warn':
-      toast.warn(msg, {
-        className: 'bg-noti-bg-warn fw-bold text-noti-warn ps-2',
-        icon: () => <img alt="warn" src="/assets/images/warn.png" />,
-      });
+      toast.warn(
+        <div>
+          <Translation ns="common">{(t) => <div>{t('txt_warning')}</div>}</Translation>
+          <div className="fw-normal">{msg}</div>
+        </div>,
+        {
+          className: 'bg-noti-bg-warn fw-bold text-noti-warn px-2 py-1',
+          icon: () => <img alt="warn" src="/assets/images/warn.png" />,
+        }
+      );
       break;
     case 'success':
-      toast.success(msg, {
-        className: 'bg-noti-bg-success text-green fw-bold ps-2',
-        icon: () => <img alt="success" src="/assets/images/success.png" />,
-      });
+      toast.success(
+        <div>
+          <Translation ns="common">{(t) => <div>{t('txt_successful')}</div>}</Translation>
+          <div className="fw-normal">{msg}</div>
+        </div>,
+        {
+          className: 'bg-noti-bg-success text-green fw-bold px-2 py-1',
+          icon: () => <img alt="success" src="/assets/images/success.png" />,
+        }
+      );
       break;
     case 'promise':
       toast.promise(
@@ -48,7 +66,7 @@ const notify = (msg, type = 'success') => {
                   >
                     <span className="visually-hidden">Loading...</span>
                   </div>
-                  <span className="ps-2">Loading</span>
+                  <span className="p-15 pe-2">Loading</span>
                 </div>
               );
             },

src/components/Toast/index.scss

@@ -39,13 +39,7 @@ $rt-color-success: $green !default;
     color: $white !important;
   }
 }
-.Toastify__close-button {
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  align-self: unset !important;
-  opacity: 1 !important;
-}
+
 .Toastify__close-button > svg {
   width: 19px !important;
   height: 19px !important;
@@ -59,3 +53,54 @@ $rt-color-success: $green !default;
 .text-noti-error > .Toastify__close-button {
   color: $noti-error !important;
 }
+
+.Toastify__toast-container {
+  .Toastify__toast-theme--light {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-repeat: repeat;
+      background-size: cover;
+      -webkit-mask-image: url('../../../public/assets/images/toast_bg.svg');
+      mask-image: url('../../../public/assets/images/toast_bg.svg');
+      z-index: 0;
+    }
+    &.Toastify__toast--success {
+      &:before {
+        background-color: $success;
+      }
+    }
+    &.Toastify__toast--warning {
+      &:before {
+        background-color: $noti-warn;
+      }
+    }
+    &.Toastify__toast--error {
+      &:before {
+        background-color: $noti-error;
+      }
+    }
+  }
+}
+
+.Toastify {
+  .Toastify__toast-icon {
+    width: auto;
+    height: 48px;
+    margin-inline-end: 16px;
+  }
+  .Toastify__close-button {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    align-self: flex-start !important;
+    opacity: 1 !important;
+  }
+  .Toastify__toast-body {
+    padding: 0;
+  }
+}

src/translations/dk/common.json

@@ -330,5 +330,8 @@
   "txt_recommend":"Anbefale",
   "txt_required":"Påkrævet",
   "txt_remember_me":"Husk mig",
-  "txt_by": "ved"
+  "txt_by": "ved",
+  "txt_warning": "Advarsel",
+  "txt_successful": "Vellykket",
+  "txt_error": "Fejl"
 }

src/translations/en/common.json

@@ -330,5 +330,8 @@
   "txt_recommend":"Recommend",
   "txt_required":"Required",
   "txt_remember_me":"Remember me",
-  "txt_by": "by"
+  "txt_by": "by",
+  "txt_warning": "Warning",
+  "txt_successful": "Successful",
+  "txt_error": "Error"
 }

src/translations/th/common.json

@@ -330,5 +330,9 @@
   "txt_recommend":"แนะนำ",
   "txt_required":"ที่จำเป็น",
   "txt_remember_me":"จดจำฉัน",
-  "txt_by": "โดย"
+  "txt_by": "โดย",
+  "txt_warning": "คำเตือน",
+  "txt_successful": "ประสบความสำเร็จ",
+  "txt_error": "ข้อผิดพลาด"
 }
+

src/translations/vi/common.json

@@ -330,5 +330,8 @@
   "txt_recommend":"Đề xuất",
   "txt_required":"Bắt buộc",
   "txt_remember_me":"Ghi nhớ",
-  "txt_by": "bởi"
+  "txt_by": "bởi",
+  "txt_warning": "Cảnh báo",
+  "txt_successful": "Thành công",
+  "txt_error": "Lỗi"
 }