From d62dc3b416b5e8588ab1c172932a3929d5928a5a Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Fri, 31 Jan 2025 12:17:39 +0100
Subject: [PATCH] :lipstick: Improve toast UI visualization (#5727)

---
 frontend/src/app/main/ui/ds/_sizes.scss       |  1 +
 frontend/src/app/main/ui/ds/colors.scss       |  6 ++---
 .../main/ui/ds/notifications/actionable.scss  | 23 +++++++++++--------
 .../app/main/ui/ds/notifications/toast.scss   | 13 +++++++----
 frontend/src/app/main/ui/ds/typography.scss   |  2 +-
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index b6bd14c467..02687aa0c1 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/frontend/src/app/main/ui/ds/_sizes.scss
@@ -19,4 +19,5 @@ $sz-224: px2rem(224);
 $sz-252: px2rem(252);
 $sz-284: px2rem(284);
 $sz-400: px2rem(400);
+$sz-480: px2rem(480);
 $sz-964: px2rem(964);
diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss
index 32d2403dfc..527b854521 100644
--- a/frontend/src/app/main/ui/ds/colors.scss
+++ b/frontend/src/app/main/ui/ds/colors.scss
@@ -16,9 +16,9 @@ $green-200: #a7e8d9;
 $green-500: #2d9f8f;
 $green-950: #0a2927;
 
-$orange-200: #ffc8a8;
-$orange-500: #fe4811;
-$orange-950: #440806;
+$orange-200: #fedeac;
+$orange-500: #fe9c07;
+$orange-950: #3d2501;
 
 $red-200: #ffcada;
 $red-400: #c80857;
diff --git a/frontend/src/app/main/ui/ds/notifications/actionable.scss b/frontend/src/app/main/ui/ds/notifications/actionable.scss
index 745cfbc95f..ca2b2eb0f4 100644
--- a/frontend/src/app/main/ui/ds/notifications/actionable.scss
+++ b/frontend/src/app/main/ui/ds/notifications/actionable.scss
@@ -5,21 +5,26 @@
 // Copyright (c) KALEIDOS INC
 
 @use "../_borders.scss" as *;
-@use "../typography.scss" as t;
+@use "../typography.scss" as *;
 
 .notification {
+  @include use-typography("body-medium");
+
+  --actionable-bg-color: var(--color-background-primary);
+  --actionable-fg-color: var(--color-foreground-primary);
+  --actionable-border-color: var(--color-background-quaternary);
+  --actionable-icon-color: var(--color-foreground-secondary);
+  --actionable-padding: var(--sp-s);
+
   align-items: center;
-  background: var(--color-background-primary);
+  background: var(--actionable-bg-color);
   border-radius: $br-8;
-  border: $b-1 solid var(--color-background-quaternary);
+  border: $b-1 solid var(--actionable-border-color);
+  color: var(--actionable-fg-color);
   display: grid;
   gap: var(--sp-s);
   grid-template-columns: 1fr auto auto;
   justify-content: space-between;
-  padding: var(--sp-s);
-}
-
-.notification-message {
-  @include t.use-typography("body-small");
-  color: var(--color-foreground-primary);
+  padding: var(--actionable-padding);
+  padding-inline-start: var(--sp-l);
 }
diff --git a/frontend/src/app/main/ui/ds/notifications/toast.scss b/frontend/src/app/main/ui/ds/notifications/toast.scss
index 8aec8b198e..5eec0f83c8 100644
--- a/frontend/src/app/main/ui/ds/notifications/toast.scss
+++ b/frontend/src/app/main/ui/ds/notifications/toast.scss
@@ -9,24 +9,26 @@
 @use "../typography.scss" as *;
 
 .toast {
-  @include use-typography("body-small");
+  @include use-typography("body-medium");
 
   --toast-bg-color: var(--color-background-primary);
   --toast-fg-color: var(--color-foreground-primary);
   --toast-border-color: var(--color-background-quaternary);
+  --toast-padding: var(--sp-l);
   --toast-icon-color: var(--color-foreground-secondary);
+  --toast-icon-margin: var(--sp-xxs);
 
-  min-width: $sz-224;
-  height: $sz-32;
+  min-inline-size: $sz-224;
+  max-inline-size: $sz-480;
   background-color: var(--toast-bg-color);
   border: $b-1 solid var(--toast-border-color);
   border-radius: $br-8;
-  padding: 0 var(--sp-s);
+  padding: var(--toast-padding);
 
   display: inline-grid;
   grid-template-columns: auto 1fr auto;
   column-gap: var(--sp-s);
-  align-items: center;
+  align-items: flex-start;
 
   color: var(--toast-fg-color);
 }
@@ -61,6 +63,7 @@
 
 .icon {
   color: var(--toast-icon-color);
+  margin-block-start: var(--toast-icon-margin);
 }
 
 .close-button {
diff --git a/frontend/src/app/main/ui/ds/typography.scss b/frontend/src/app/main/ui/ds/typography.scss
index 2d0174f910..6cb7014877 100644
--- a/frontend/src/app/main/ui/ds/typography.scss
+++ b/frontend/src/app/main/ui/ds/typography.scss
@@ -92,7 +92,7 @@ $_fs-36: px2rem(36);
   font-family: "worksans", "vazirmatn", sans-serif;
   font-optical-sizing: auto;
   font-weight: $_font-weight-regular;
-  line-height: $_font-lineheight-compact;
+  line-height: $_font-lineheight-normal;
   font-size: $_fs-14;
 }