feat(toastr): New toastr design

src/assets/ico/sprite.svg

@@ -467,4 +467,14 @@
   </defs>
 </symbol>
 
+<symbol id="toastError" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/>
+<path d="M28.8169 27.5179C29.3593 28.0603 29.3241 28.9749 28.7383 29.5607C28.1525 30.1464 27.2379 30.1816 26.6955 29.6392L10.9821 13.9257C10.4397 13.3833 10.4748 12.4688 11.0606 11.883C11.6464 11.2972 12.561 11.262 13.1034 11.8044L28.8169 27.5179Z" fill="#FF0000"/>
+</symbol>
+
+<symbol id="toastSuccess" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 21.1364L17.3889 27.5L23.1944 20.5L29 13.5" stroke="#47C562" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+
 </svg>

src/assets/ico/toast-error.svg

+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/>
+<path d="M28.8169 27.5179C29.3593 28.0603 29.3241 28.9749 28.7383 29.5607C28.1525 30.1464 27.2379 30.1816 26.6955 29.6392L10.9821 13.9257C10.4397 13.3833 10.4748 12.4688 11.0606 11.883C11.6464 11.2972 12.561 11.262 13.1034 11.8044L28.8169 27.5179Z" fill="#FF0000"/>
+</svg>

src/assets/ico/toast-info.svg

+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 20.5C34 28.232 27.732 34.5 20 34.5C12.268 34.5 6 28.232 6 20.5C6 12.768 12.268 6.5 20 6.5C27.732 6.5 34 12.768 34 20.5ZM20.0001 18.9999C20.8285 18.9999 21.5001 19.6715 21.5001 20.4999V27.4999C21.5001 28.3284 20.8285 28.9999 20.0001 29C19.1717 29 18.5001 28.3284 18.5001 27.5V20.4999C18.5001 19.6715 19.1717 18.9999 20.0001 18.9999ZM20 16.362C21.0665 16.362 21.931 15.4975 21.931 14.431C21.931 13.3645 21.0665 12.4999 20 12.4999C18.9335 12.4999 18.069 13.3645 18.069 14.431C18.069 15.4975 18.9335 16.362 20 16.362Z" fill="#2F96B4"/>
+</svg>

src/assets/ico/toast-success.svg

+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 21.1364L17.3889 27.5L23.1944 20.5L29 13.5" stroke="#47C562" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/scss/_color.scss

@@ -15,6 +15,7 @@ $grey-8: #f8f8f8;
 $red: #da3635;
 $red-dark: #b85959;
 $red-1: #f35453;
+$red-error: #ff0000;
 /* GOLD */
 $gold: #bd9e6a;
 /* form colors */

src/styles.scss

@@ -75,6 +75,45 @@ a {
 .bold {
   font-weight: bold !important;
 }
+//Toastr
+.ngx-toastr {
+  &.toast-success {
+    background: white;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+    color: $grey-1;
+    border: solid 3px $green-1;
+    &::after {
+      content: url('/assets/ico/toast-success.svg') !important;
+      position: absolute !important;
+      top: 14px !important;
+      left: 5px !important;
+    }
+  }
+  &.toast-error {
+    background: white;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+    color: $grey-1;
+    border: solid 3px $red-error;
+    &::after {
+      content: url('assets/ico/toast-error.svg') !important;
+      position: absolute !important;
+      top: 14px !important;
+      left: 5px !important;
+    }
+  }
+  &.toast-info {
+    background: white;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+    color: $grey-1;
+    border: solid 3px $blue;
+    &::after {
+      content: url('assets/ico/toast-info.svg') !important;
+      position: absolute !important;
+      top: 30px !important;
+      left: 5px !important;
+    }
+  }
+}
 
 // Containers
 .content-container {