🐛 Fix modal hint as context notification (#6276)

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

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

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

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

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]]

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

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

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;

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;