Merge pull request #650 from gobitfly/BIDS-3206/Apply-our-stylings-to…

…-toasts Add `our` style changes to toast messages. BIDS-3206.
gobitfly · Jul 31, 2024 · 25580d8 · 25580d8
2 parents 5154ac6 + d099d04
commit 25580d8
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 87 deletions.
diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss
@@ -23,15 +23,21 @@
   --dark-blue: #2f2e42;
   --purple-blue: #3e4461;
   --light-purple-blue: #545C7E;
-  --blue: #2e82ae;
+  --sky-blue:#cde3ee;
   --light-blue: #66bce9;
-  --melllow-blue: #7DB5EC;
+  --melllow-blue: #7db5eC;
+  --blue: #2e82ae;
+  --dark-blue: #116897;
+  --mint-green: #D3E4D4;
   --flashy-green: #90ed7d;
   --light-green: #4e7451;
   --green: #7dc382;
+  --dark-green: #346f39;
   --flashy-red: #f3454a;
   --light-red: #d42127;
   --dark-red: #ce3438;
+  --bold-red: #b10b11;
+  --pastel-red: #F1C5C6;
   --yellow: #ffd600;
   --light-yellow: #969100;
   --purple: #9747ff;
@@ -133,6 +139,19 @@
   --switch-color-disabled: var(--dark-grey);
   --switch-color-disabled-hover: var(--very-dark-grey-2);
 
+  --toast-background-color-success: var(--dark-green);
+  --toast-background-success-color: var(--mint-green);
+  --toast-border-sucess-color: var(--dark-green);
+
+  --toast-message-info-color: var(--dark-blue);
+  --toast-background-info-color: var(--sky-blue);
+  --toast-border-info-color: var(--dark-blue);
+
+  --toast-message-error-color: var(--bold-red);
+  --toast-background-error-color: var(--pastel-red);
+  --toast-border-error-color: var(--bold-red);
+
+
   &.dark-mode {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
@@ -199,4 +218,4 @@
     --list-hover-background: var(--dark-grey);
     --list-hover-descrete-color: var(--grey);
   }
-}
+}
diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss
@@ -277,6 +277,27 @@ h1 {
   font-weight: var(--button_font_weight);
 }
 
+
 .button_text{
   @include button_text
 }
+
+@mixin text-toast(){
+  font-family:var(--roboto-family);
+  font-size:var(--standard_text_font_size);
+  font-weight: var(--roboto-bold);
+}
+
+.text-toast{
+  @include text-toast
+}
+
+@mixin text-toast-sm(){
+  font-family:var(--roboto-family);
+  font-size: var(--small_text_font_size);
+  font-weight: var(--roboto-regular);
+}
+
+.text-toast-sm{
+  @include text-toast-sm
+}
diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
@@ -245,93 +245,106 @@
 
 // Toast
 // https://primevue.org/toast/
-// TODO: apply our styles
 .p-toast {
   opacity: 1;
+
+  .p-toast-message {
+    margin: var(--content-margin);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius);
+
+    &-content {
+      padding: var(--padding-large);
+      border-width: 0 0 0 6px;
+
+      .p-toast-message-text {
+        margin: 0 0 0 16px;
+      }
+
+      .p-toast-message-icon {
+        font-size: var(--logo_font_size);
+        &.p-icon {
+          width: 16px;
+          height: 16px;
+          align-self: center;
+        }
+      }
+
+      .p-toast-summary {
+        @include text-toast;
+      }
+
+      .p-toast-detail {
+        color: var(--light-black);
+        margin: 8px 0 0 0;
+        @include text-toast-sm;
+      }
+    }
+
+    .p-toast-icon-close {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: transparent;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.5);
+      }
+
+      &:focus-visible {
+        outline: 0 none;
+        outline-offset: 0;
+        box-shadow: 0 0 0 3.2px #a7f3d0;
+      }
+    }
+
+    &.p-toast-message-info {
+      border: solid var(--toast-border-info-color) 1px;
+      background: var(--toast-background-info-color);
+      color: var(--toast-message-info-color);
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: var(--toast-message-info-color);
+      }
+    }
+
+    &.p-toast-message-success {
+      border: solid var(--toast-border-sucess-color) 1px;
+      background: var(--toast-background-success-color);
+      color: var(--toast-background-color-success);
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: var(--toast-background-color-success);
+      }
+    }
+
+    &.p-toast-message-warn {
+      border: solid var(--toast-border-error-color) 1px;
+      background: var(--toast-background-error-color);
+      color: var(--primary-color);
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: var(--primary-color);
+      }
+    }
+
+    &.p-toast-message-error {
+      border: solid var(--toast-border-error-color) 1px;
+      background: var(--toast-background-error-color);
+      color: var(--toast-message-error-color);
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: var(--toast-message-error-color);
+      }
+    }
+  }
 }
-.p-toast .p-toast-message {
-  margin: 0 0 1rem 0;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: var(--border-radius);
-}
-.p-toast .p-toast-message .p-toast-message-content {
-  padding: 1rem;
-  border-width: 0 0 0 6px;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
-  margin: 0 0 0 1rem;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
-  font-size: 2rem;
-}
-.p-toast
-  .p-toast-message
-  .p-toast-message-content
-  .p-toast-message-icon.p-icon {
-  width: 2rem;
-  height: 2rem;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
-  font-weight: 700;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
-  margin: 0.5rem 0 0 0;
-}
-.p-toast .p-toast-message .p-toast-icon-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-toast .p-toast-message .p-toast-icon-close:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-.p-toast .p-toast-message .p-toast-icon-close:focus-visible {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #a7f3d0;
-}
-.p-toast .p-toast-message.p-toast-message-info {
-  background: rgba(219, 234, 254, 0.7);
-  border: solid #3b82f6;
-  border-width: 0 0 0 6px;
-  color: #3b82f6;
-}
-.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
-  color: #3b82f6;
-}
-.p-toast .p-toast-message.p-toast-message-success {
-  background: rgba(228, 248, 240, 0.7);
-  border: solid #1ea97c;
-  border-width: 0 0 0 6px;
-  color: #1ea97c;
-}
-.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
-  color: #1ea97c;
-}
-.p-toast .p-toast-message.p-toast-message-warn {
-  background: rgba(255, 242, 226, 0.7);
-  border: solid #cc8925;
-  border-width: 0 0 0 6px;
-  color: #cc8925;
-}
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
-  color: #cc8925;
-}
-.p-toast .p-toast-message.p-toast-message-error {
-  background: rgba(255, 231, 230, 0.7);
-  border: solid #ff5757;
-  border-width: 0 0 0 6px;
-  color: #ff5757;
-}
-.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
-  color: #ff5757;
-}
+
 
 // Multiselect drop-down