fix: Toast messages look wrong (#2800)

Flagsmith · Sep 22, 2023 · f003732 · f003732 · vercel · Sep 22, 2023
1 parent 60b0fb1
commit f003732
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/frontend/web/project/toast.js b/frontend/web/project/toast.js
@@ -2,7 +2,9 @@ import cn from 'classnames'
 
 const themeClassNames = {
   danger: 'alert-danger',
+  info: 'alert-info',
   success: 'alert',
+  warning: 'alert-warning',
 }
 
 const Message = class extends React.Component {

diff --git a/frontend/web/styles/_variables.scss b/frontend/web/styles/_variables.scss
@@ -84,7 +84,7 @@ $alert-danger-bg: $bt-brand-red;
 $alert-danger-border: $bt-brand-red;
 $alert-danger-text: rgb(255, 255, 255);
 
-$alert-warning-bg: $warning-alfa-8;
+$alert-warning-bg: $warning-solid-alert;
 $alert-warning-border: $bt-brand-yellow;
 
 $body-bg: #fff;

diff --git a/frontend/web/styles/components/_toast.scss b/frontend/web/styles/components/_toast.scss
@@ -17,7 +17,7 @@
 	top: 0;
 	right: 15px;
 	width: 250px;
-	background: $success-alfa-8;
+	background: $success-solid-alert;
 	font-weight: 500;
 	border: 1px solid $success;
 }
diff --git a/frontend/web/styles/new/_variables-new.scss b/frontend/web/styles/new/_variables-new.scss
@@ -44,6 +44,15 @@ $black-alpha-16: rgba(0, 0, 0, 0.16);
 $black-alpha-32: rgba(0, 0, 0, 0.32);
 $secondary-alfa-16: rgba(247, 213, 110, 0.16);
 $success-alfa-8: rgba(39, 171, 149, 0.08);
+$success-solid-alert: rgba(238, 248, 247);
+$info-solid-alert: rgba(236, 249, 252);
+$warning-solid-alert: rgba(255, 248, 240);
+$danger-solid-alert: rgba(254, 239, 241);
+
+$success-solid-dark-alert: rgba(17, 32, 46);
+$info-solid-dark-alert: rgba(15, 32, 52);
+$warning-solid-dark-alert: rgba(34, 31, 39);
+$danger-solid-dark-alert: rgba(34, 23, 40);
 
 $bg-light200: #fafafb;
 $bg-light300: #eff1f4;
@@ -239,9 +248,9 @@ $checkbox-hover-border-color: $primary;
 $checkbox-checked-hover-border-color: $primary600;
 
 //Alert
-$alert-info-bg: $info-alfa-8;
+$alert-info-bg: $info-solid-alert;
 $alert-info-border-color: $info;
-$alert-danger-bg: $danger-alfa-8;
+$alert-danger-bg: $danger-solid-alert;
 $alert-danger-border-color: $danger;
 $alert-warning-border-color: $warning;
 $alert-color: $text-icon-grey;

diff --git a/frontend/web/styles/project/_alert.scss b/frontend/web/styles/project/_alert.scss
@@ -84,8 +84,10 @@
 .dark {
   .alert {
     color: $alert-color-dark;
+    background-color: $success-solid-dark-alert;
   }
   .alert-info {
+    background-color: $info-solid-dark-alert;
     .title {
       color: $text-icon-light;
     }
@@ -96,6 +98,12 @@
       color: $text-icon-light;
     }
   }
+  .alert-warning {
+    background-color: $warning-solid-dark-alert;
+  }
+  .alert-danger{
+    background-color: $danger-solid-dark-alert
+  }
   .announcement {
     .close-btn {
       color: $alert-color-dark;