♻️ Switch contextual notification component (#5874)

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)

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);
 

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)

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*