Merge branch 'feat/toaster-refine-5124' into 'master'

Toast notification style updates #5124 See merge request minds/front!1782
Minds · Feb 25, 2022 · da9e27b · da9e27b
2 parents 13a5158 + 2cf5377
commit da9e27b
Showing 1 changed file with 27 additions and 22 deletions.
diff --git a/src/app/common/components/form-toast/form-toast.component.ng.scss b/src/app/common/components/form-toast/form-toast.component.ng.scss
@@ -27,23 +27,30 @@
     box-sizing: border-box;
     width: 100%;
     border-radius: 2px;
-    opacity: 0.85;
     transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
-    color: #7d7d82;
-    background-color: #fff;
-    box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.5);
     overflow: hidden;
     max-height: 500px;
-    &:hover {
-      opacity: 1;
+
+    @include m-theme() {
+      color: themed($m-textColor--primary);
+    }
+
+    @include m-on-theme(light) {
+      background-color: #fff;
+    }
+    @include m-on-theme(dark) {
+      background-color: #1e242a;
     }
+
     p {
-      font-size: 17px;
-      line-height: 19px;
+      font-size: 14px;
+      line-height: 17px;
       flex-grow: 1;
-      margin: 20px 18px 20px 22px;
+      margin: 20px 18px 20px 0;
       word-wrap: break-word;
       overflow: hidden;
+      font-weight: 500;
     }
   }
   .m-formToast__spacer {
@@ -55,38 +62,36 @@
     justify-content: center;
     align-items: center;
     i {
-      font-size: 20px;
+      font-size: 24px;
     }
     &:not(.m-formToast__iconWrapper--close) {
       align-self: stretch;
       min-width: 58px;
-      i {
-        color: #fff;
-      }
     }
   }
-  .m-formToast__iconWrapper--success {
-    background-color: #59a05e;
+  .m-formToast__iconWrapper--success i {
+    color: #59a05e;
   }
-  .m-formToast__iconWrapper--error {
-    background-color: #ca4a34;
+  .m-formToast__iconWrapper--error i {
+    color: #ca4a34;
   }
-  .m-formToast__iconWrapper--warning {
-    background-color: #d49538;
+  .m-formToast__iconWrapper--warning i {
+    color: #d49538;
   }
-  .m-formToast__iconWrapper--info {
-    background-color: #5a91bb;
+  .m-formToast__iconWrapper--info i {
+    color: #5a91bb;
   }
   .m-formToast__iconWrapper--close {
     cursor: pointer;
     align-self: start;
-    margin: 18.5px 19px 0 0;
+    margin: 16px 19px 0 0;
     transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
     &:hover {
       transform: scale(1.1);
     }
     i {
       opacity: 0.8;
+      font-size: 24px;
     }
   }