From 870fec6bbda13512d9b0725a99640f04fe29a5f6 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Fri, 11 Apr 2025 11:27:30 +0200
Subject: [PATCH] :bug: Fix modal hint as context notification (#6276)

---
 frontend/src/app/main/ui/alert.cljs          | 5 ++++-
 frontend/src/app/main/ui/alert.scss          | 4 ----
 frontend/src/app/main/ui/confirm.cljs        | 5 ++++-
 frontend/src/app/main/ui/confirm.scss        | 4 ----
 frontend/src/app/main/ui/dashboard/team.cljs | 7 ++++---
 frontend/src/app/main/ui/delete_shared.cljs  | 5 ++++-
 frontend/src/app/main/ui/delete_shared.scss  | 4 ----
 frontend/src/app/main/ui/exports/assets.scss | 4 ----
 frontend/src/app/main/ui/exports/files.scss  | 7 +------
 9 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/main/ui/alert.cljs b/frontend/src/app/main/ui/alert.cljs
index 353b6b5be..8dd954249 100644
--- a/frontend/src/app/main/ui/alert.cljs
+++ b/frontend/src/app/main/ui/alert.cljs
@@ -10,6 +10,7 @@
    [app.main.data.modal :as modal]
    [app.main.store :as st]
    [app.main.ui.components.link :as lk]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -72,7 +73,9 @@
          [:h3 {:class (stl/css :modal-scd-msg)} scd-message])
 
        (when (string? hint)
-         [:p {:class (stl/css :modal-hint)} hint])]
+         [:> context-notification* {:level :info
+                                    :appearance :ghost}
+          hint])]
 
       [:div {:class (stl/css :modal-footer)}
        [:div {:class (stl/css :action-buttons)}
diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss
index 97f429474..6955de251 100644
--- a/frontend/src/app/main/ui/alert.scss
+++ b/frontend/src/app/main/ui/alert.scss
@@ -36,10 +36,6 @@
   margin-bottom: $s-24;
 }
 
-.modal-hint {
-  @include bodyLargeTypography;
-}
-
 .action-buttons {
   @extend .modal-action-btns;
 }
diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs
index abb11ea8c..9f97146c8 100644
--- a/frontend/src/app/main/ui/confirm.cljs
+++ b/frontend/src/app/main/ui/confirm.cljs
@@ -9,6 +9,7 @@
   (:require
    [app.main.data.modal :as modal]
    [app.main.store :as st]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -76,7 +77,9 @@
        (when (and (string? scd-message) (not= scd-message ""))
          [:h3 {:class (stl/css :modal-scd-msg)} scd-message])
        (when (string? hint)
-         [:p {:class (stl/css :modal-hint)} hint])
+         [:> context-notification* {:level :info
+                                    :appearance :ghost}
+          hint])
        (when (> (count items) 0)
          [:*
           [:p {:class (stl/css :modal-subtitle)}
diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss
index 0b4b08202..3dfec1110 100644
--- a/frontend/src/app/main/ui/confirm.scss
+++ b/frontend/src/app/main/ui/confirm.scss
@@ -52,10 +52,6 @@
   @include bodyLargeTypography;
 }
 
-.modal-hint {
-  @extend .modal-hint-base;
-}
-
 .action-buttons {
   @extend .modal-action-btns;
 }
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index 595ec985a..b04dfbea0 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -881,9 +881,10 @@
      [:div {:class (stl/css :modal-container)}
       [:& fm/form {:form form :on-submit on-submit}
        [:div {:class (stl/css :modal-header)}
-        (if webhook
-          [:h2 {:class (stl/css :modal-title)} (tr "modals.edit-webhook.title")]
-          [:h2 {:class (stl/css :modal-title)} (tr "modals.create-webhook.title")])
+        [:h2 {:class (stl/css :modal-title)}
+         (if webhook
+           (tr "modals.edit-webhook.title")
+           (tr "modals.create-webhook.title"))]
 
         [:button {:class (stl/css :modal-close-btn)
                   :on-click on-modal-close} i/close]]
diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs
index ec2100937..92fc47fad 100644
--- a/frontend/src/app/main/ui/delete_shared.cljs
+++ b/frontend/src/app/main/ui/delete_shared.cljs
@@ -11,6 +11,7 @@
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
+   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -114,7 +115,9 @@
                       :key (dm/str file-id)}
                  [:span "- " file-name]])]]
             (when (and (string? hint) (not= hint ""))
-              [:h3 {:class (stl/css :modal-hint)} hint])]
+              [:> context-notification* {:level :info
+                                         :appearance :ghost}
+               hint])]
            [:*
             [:h3 {:class (stl/css :modal-msg)} no-files-msg]]))]
 
diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss
index dfd7741f3..c0ee957e6 100644
--- a/frontend/src/app/main/ui/delete_shared.scss
+++ b/frontend/src/app/main/ui/delete_shared.scss
@@ -35,10 +35,6 @@
   margin-bottom: $s-24;
 }
 
-.modal-hint {
-  @extend .modal-hint-base;
-}
-
 .element-list {
   @include bodyLargeTypography;
   color: var(--modal-text-foreground-color);
diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss
index eef0d5516..0af485195 100644
--- a/frontend/src/app/main/ui/exports/assets.scss
+++ b/frontend/src/app/main/ui/exports/assets.scss
@@ -130,10 +130,6 @@
 .no-selection {
   @include bodySmallTypography;
   margin-bottom: $s-24;
-  .modal-hint {
-    @include bodySmallTypography;
-    color: var(--modal-text-foreground-color);
-  }
   .modal-link {
     @include bodyLargeTypography;
     text-decoration: none;
diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss
index adbdf8800..8857bd9c0 100644
--- a/frontend/src/app/main/ui/exports/files.scss
+++ b/frontend/src/app/main/ui/exports/files.scss
@@ -32,14 +32,9 @@
   @extend .modal-close-btn-base;
 }
 
-.modal-content,
-.no-selection {
+.modal-content {
   @include bodySmallTypography;
   margin-bottom: $s-24;
-  .modal-hint {
-    @include bodySmallTypography;
-    color: var(--modal-text-foreground-color);
-  }
   .modal-link {
     @include bodyLargeTypography;
     text-decoration: none;