Updated toast style

Scille · Dec 4, 2023 · 014bec3 · 014bec3
1 parent 5467d60
commit 014bec3
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/client/src/theme/components/toasts.scss b/client/src/theme/components/toasts.scss
@@ -4,36 +4,58 @@
 
 ion-toast.notification-toast {
   &.ms-info {
-    --ms-notification-toast-text-color: var(--parsec-color-light-primary-600);
+    --ms-notification-toast-text-color: var(--parsec-color-light-primary-700);
     --ms-notification-toast-background-color: var(--parsec-color-light-primary-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-primary-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-primary-500);
   }
 
   &.ms-success {
-    --ms-notification-toast-text-color: var(--parsec-color-light-success-500);
+    --ms-notification-toast-text-color: var(--parsec-color-light-success-700);
     --ms-notification-toast-background-color: var(--parsec-color-light-success-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-success-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-success-500);
   }
 
   &.ms-warning {
-    --ms-notification-toast-text-color: var(--parsec-color-light-warning-500);
+    --ms-notification-toast-text-color: var(--parsec-color-light-warning-700);
     --ms-notification-toast-background-color: var(--parsec-color-light-warning-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-warning-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-warning-500);
   }
 
   &.ms-error {
-    --ms-notification-toast-text-color: var(--parsec-color-light-danger-500);
+    --ms-notification-toast-text-color: var(--parsec-color-light-danger-700);
     --ms-notification-toast-background-color: var(--parsec-color-light-danger-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-danger-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-danger-500);
   }
 
   &.ms-info,
   &.ms-success,
   &.ms-warning,
   &.ms-error {
     --background: var(--ms-notification-toast-background-color);
+    --border-color: var(--ms-notification-toast-border-color);
+    --border-radius: var(--parsec-radius-8);
+    --border-width: 1px;
+    --border-style: solid;
+    --box-shadow: var(--parsec-shadow-light);
+    --button-color: var(--parsec-color-light-secondary-text);
     --color: var(--ms-notification-toast-text-color);
-    --button-color: var(--ms-notification-toast-button-color);
-    --box-shadow: 2px 2px 4px 0px var(--parsec-color-light-secondary-contrast);
+    --max-width: 27rem;
+  }
+
+  &::part(container) {
+    padding-right: .625rem;
+  }
+
+  &::part(button) {
+    padding: .375rem .75rem;
+    font-size: .875rem;
+    min-height: 10px;
+    letter-spacing: 0.015rem;
+  }
+}
+
+.notification-toast {
+  .toast-wrapper {
+      transform: translateY(70px) !important;
   }
 }