From 91fa39705d97d6b0587e4dc7e83fb4c3b345f5a1 Mon Sep 17 00:00:00 2001
From: Xaviju <xaviju@gmail.com>
Date: Mon, 17 Feb 2025 16:03:13 +0100
Subject: [PATCH] :recycle: Switch contextual notification component (#5874)

---
 frontend/src/app/main/ui/auth/login.cljs                   | 7 +++----
 .../main/ui/ds/notifications/shared/notification_pill.scss | 2 +-
 frontend/src/app/main/ui/notifications.cljs                | 7 ++++---
 frontend/src/app/main/ui/workspace/tokens/form.cljs        | 7 +++----
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index 10bf80d3b5..9f20747f17 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -18,6 +18,7 @@
    [app.main.ui.components.button-link :as bl]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.components.link :as lk]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.icons :as i]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
@@ -158,10 +159,8 @@
 
     [:*
      (when-let [message @error]
-       [:& context-notification
-        {:level :error
-         :content message
-         :role "alert"}])
+       [:> context-notification*
+        {:level :error} message])
 
      [:& fm/form {:on-submit on-submit
                   :class (stl/css :login-form)
diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss
index 200dd1e6ed..ebfa14102d 100644
--- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss
+++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss
@@ -14,7 +14,7 @@
   --notification-bg-color: var(--color-background-primary);
   --notification-fg-color: var(--color-foreground-primary);
   --notification-border-color: var(--color-background-quaternary);
-  --notification-padding: var(--sp-l);
+  --notification-padding: var(--sp-m);
   --notification-icon-color: var(--color-foreground-secondary);
   --notification-icon-margin: var(--sp-xxs);
 
diff --git a/frontend/src/app/main/ui/notifications.cljs b/frontend/src/app/main/ui/notifications.cljs
index 43087580c7..5f19792d64 100644
--- a/frontend/src/app/main/ui/notifications.cljs
+++ b/frontend/src/app/main/ui/notifications.cljs
@@ -21,8 +21,8 @@
   []
   (let [notification (mf/deref ref:notification)
         on-close     (mf/use-fn #(st/emit! (ntf/hide)))
-        context?     (and (nil? (:timeout notification))
-                          (nil? (:actions notification)))
+        actionable?     (and (nil? (:timeout notification))
+                             (nil? (:actions notification)))
         inline?      (or (= :inline (:type notification))
                          (= :floating (:position notification)))
         toast?       (or (= :toast (:type notification))
@@ -44,7 +44,8 @@
           :links (:links notification)
           :content (:content notification)}]
 
-        context?
+        ;; This should be substited with the actionable-notification* component
+        actionable?
         [:& context-notification
          {:level (or (:level notification) :info)
           :links (:links notification)
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 61fa8fe99a..5b6f11d398 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -19,7 +19,7 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
-   [app.main.ui.notifications.context-notification :refer [context-notification]]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
    [app.main.ui.workspace.tokens.changes :as wtch]
@@ -498,9 +498,8 @@
 
        (when (and warning-name-change? (= action "edit"))
          [:div {:class (stl/css :warning-name-change-notification-wrapper)}
-          [:> context-notification
-           {:level :warning
-            :content (tr "workspace.token.warning-name-change")}]])]
+          [:> context-notification*
+           {:level :warning :appearance :ghost} (tr "workspace.token.warning-name-change")]])]
 
       [:div {:class (stl/css :input-row)}
        [:> input-tokens*