From 1af2ec0b79e97a51f3baf7e519df52bedb218675 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Thu, 22 Feb 2024 08:26:22 +0100
Subject: [PATCH] :recycle: Update notification component
---
.../common/refactor/themes/light-theme.scss | 1 -
.../app/main/data/workspace/libraries.cljs | 10 +-
frontend/src/app/main/ui.cljs | 2 +-
frontend/src/app/main/ui/auth/login.cljs | 5 +-
frontend/src/app/main/ui/auth/register.cljs | 4 +-
.../src/app/main/ui/dashboard/import.cljs | 15 +-
.../src/app/main/ui/dashboard/import.scss | 33 +---
frontend/src/app/main/ui/messages.cljs | 146 ++++--------------
.../notifications/context_notification.cljs | 62 ++++++++
.../notifications/context_notification.scss | 85 ++++++++++
.../ui/notifications/inline_notification.cljs | 49 ++++++
.../ui/notifications/inline_notification.scss | 79 ++++++++++
.../ui/notifications/toast_notification.cljs | 72 +++++++++
.../toast_notification.scss} | 143 +++++------------
.../app/main/ui/settings/change_email.cljs | 4 +-
.../app/main/ui/settings/delete_account.cljs | 4 +-
16 files changed, 440 insertions(+), 274 deletions(-)
create mode 100644 frontend/src/app/main/ui/notifications/context_notification.cljs
create mode 100644 frontend/src/app/main/ui/notifications/context_notification.scss
create mode 100644 frontend/src/app/main/ui/notifications/inline_notification.cljs
create mode 100644 frontend/src/app/main/ui/notifications/inline_notification.scss
create mode 100644 frontend/src/app/main/ui/notifications/toast_notification.cljs
rename frontend/src/app/main/ui/{messages.scss => notifications/toast_notification.scss} (59%)
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 448e7e5f8..cd9b6e61c 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -24,7 +24,6 @@
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
-
--color-success-background: var(--status-color-success-200);
--color-success-foreground: var(--status-color-success-500);
diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs
index 8c6845de5..216a20a4a 100644
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -1131,12 +1131,12 @@
:controls :inline-actions
:links [{:label (tr "workspace.updates.more-info")
:callback do-more-info}]
- :actions [{:label (tr "workspace.updates.update")
- :type :primary
- :callback do-update}
- {:label (tr "workspace.updates.dismiss")
+ :actions [{:label (tr "workspace.updates.dismiss")
:type :secondary
- :callback do-dismiss}]
+ :callback do-dismiss}
+ {:label (tr "workspace.updates.update")
+ :type :primary
+ :callback do-update}]
:tag :sync-dialog)))))))
(defn component-changed
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 88f10e293..69c83db69 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -173,6 +173,6 @@
(if edata
[:& static/exception-page {:data edata}]
[:*
- [:& msgs/notifications]
+ [:& msgs/notifications-hub]
(when route
[:& main-page {:route route :profile profile}])])]]))
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index e8d282815..3c61eb174 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -19,7 +19,7 @@
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
[app.main.ui.icons :as i]
- [app.main.ui.messages :as msgs]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.keyboard :as k]
@@ -158,10 +158,9 @@
[:*
(when-let [message @error]
[:div {:class (stl/css :error-wrapper)}
- [:& msgs/inline-notification
+ [:& context-notification
{:type :warning
:content message
- :on-close #(reset! error nil)
:data-test "login-banner"
:role "alert"}]])
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 988c92ad2..cf578e4bc 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -18,7 +18,7 @@
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
[app.main.ui.icons :as i]
- [app.main.ui.messages :as msgs]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :refer [tr tr-html]]
[app.util.router :as rt]
[beicon.v2.core :as rx]
@@ -28,7 +28,7 @@
(mf/defc demo-warning
[_]
[:div {:class (stl/css :banner)}
- [:& msgs/inline-notification
+ [:& context-notification
{:type :warning
:content (tr "auth.demo-warning")}]])
diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs
index e2f63f5c3..8bca69f80 100644
--- a/frontend/src/app/main/ui/dashboard/import.cljs
+++ b/frontend/src/app/main/ui/dashboard/import.cljs
@@ -19,6 +19,7 @@
[app.main.store :as st]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.icons :as i]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.main.worker :as uw]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@@ -385,14 +386,12 @@
(when (and (= :importing (:status @state)) (not pending-import?))
(if (> warning-files 0)
- [:div {:class (stl/css-case :feedback-banner true
- :warning true)}
- [:div {:class (stl/css :icon)} i/msg-warning-refactor]
- [:div {:class (stl/css :message)} (tr "dashboard.import.import-warning" warning-files success-files)]]
-
- [:div {:class (stl/css :feedback-banner)}
- [:div {:class (stl/css :icon)} i/msg-success-refactor]
- [:div {:class (stl/css :message)} (tr "dashboard.import.import-message" (i18n/c (if (some? template) 1 success-files)))]]))
+ [:& context-notification
+ {:type :warning
+ :content (tr "dashboard.import.import-warning" warning-files success-files)}]
+ [:& context-notification
+ {:type :success
+ :content (tr "dashboard.import.import-message" (i18n/c (if (some? template) 1 success-files)))}]))
(for [file files]
(let [editing? (and (some? (:file-id file))
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index d58824239..6d0f183fe 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -29,39 +29,12 @@
.modal-content {
@include bodyMedTipography;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: $s-16;
margin-bottom: $s-24;
}
-.feedback-banner {
- @include flexRow;
- height: $s-32;
- width: 100%;
- margin-bottom: $s-24;
- border-radius: $br-8;
- background-color: var(--alert-background-color-success);
- color: var(--alert-text-foreground-color-success);
-
- .icon {
- @include flexCenter;
- height: $s-24;
- width: $s-24;
- svg {
- @extend .button-icon;
- stroke: var(--alert-icon-foreground-color-success);
- }
- }
- .message {
- @include bodyMedTipography;
- }
- &.warning {
- background-color: var(--alert-background-color-warning);
- color: var(--alert-text-foreground-color-warning);
- .icon svg {
- stroke: var(--alert-icon-foreground-color-warning);
- }
- }
-}
-
.action-buttons {
@extend .modal-action-btns;
}
diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs
index 5c493aa27..42c90159e 100644
--- a/frontend/src/app/main/ui/messages.cljs
+++ b/frontend/src/app/main/ui/messages.cljs
@@ -5,128 +5,44 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.messages
- (:require-macros [app.main.style :as stl])
(:require
- [app.common.data :as d]
- [app.common.data.macros :as dm]
- [app.common.uuid :as uuid]
[app.main.data.messages :as dmsg]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.link-button :as lb]
- [app.main.ui.icons :as i]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
+ [app.main.ui.notifications.inline-notification :refer [inline-notification]]
+ [app.main.ui.notifications.toast-notification :refer [toast-notification]]
[rumext.v2 :as mf]))
-(mf/defc banner
- [{:keys [type position status controls content links actions on-close data-test role] :as props}]
- [:div {:class (stl/css-case :banner true
- :warning (= type :warning)
- :error (= type :error)
- :success (= type :success)
- :info (= type :info)
- :fixed (= position :fixed)
- :floating (= position :floating)
- :inline (= position :inline)
- :hide (= status :hide))}
- [:div {:class (stl/css :wrapper)}
- [:div {:class (stl/css :icon)}
- (case type
- :warning i/msg-neutral-refactor
- :error i/delete-text-refactor
- :success i/status-tick-refactor
- :info i/help-refactor
- i/delete-text-refactor)]
-
- [:div {:class (stl/css-case :content true
- :inline-actions (= controls :inline-actions)
- :bottom-actions (= controls :bottom-actions))
- :data-test data-test
- :role role}
- [:span {:class (stl/css :text)}
- content
- (for [[index link] (d/enumerate links)]
- [:* {:key (dm/str "link-" index)}
- " " [:& lb/link-button {:class (stl/css :link)
- :on-click (:callback link)
- :value (:label link)}]])]
-
- (when (or (= controls :bottom-actions) (= controls :inline-actions))
-
- [:div {:class (stl/css :actions)}
- (for [action actions]
- [:button {:key (uuid/next)
- :class (stl/css-case :action-btn true
- :primary (= :primary (:type action))
- :secondary (= :secondary (:type action))
- :danger (= :danger (:type action)))
- :on-click (:callback action)}
- (:label action)])])]
-
- (when (= controls :close)
- [:button {:class (stl/css :btn-close)
- :on-click on-close} i/close-refactor])]])
-
-(mf/defc notifications
+(mf/defc notifications-hub
[]
(let [message (mf/deref refs/message)
on-close #(st/emit! dmsg/hide)
- _ (prn "message" message)]
+
+ toast-message {:type (or (:type message) :info)
+ :links (:links message)
+ :on-close on-close
+ :content (:content message)}
+
+ inline-message {:actions (:actions message)
+ :links (:links message)
+ :content (:content message)}
+
+ context-message {:actions (:actions message)
+ :links (:links message)
+ :content (:content message)}
+
+ ;; TODO review this options
+ is-toast-msg (some? (:timeout message))
+ actions? (some? (:actions message))
+ inline? (and (some? (:position message)) (= :floating (:position message)))
+ close? (and (some? (:controls message)) (= :close (:controls message)))]
+
(when message
- [:& banner (assoc message
- :position (or (:position message) :fixed)
- :controls (if (some? (:controls message))
- (:controls message)
- :close)
- :on-close on-close)])))
-
-(mf/defc inline-notification
- {::mf/wrap [mf/memo]}
- [{:keys [type content on-close actions data-test role] :as props}]
- [:& banner {:type type
- :position :inline
- :status :visible
- :controls (if (some? on-close)
- :close
- (if (some? actions)
- :bottom-actions
- :none))
- :content content
- :on-close on-close
- :actions actions
- :data-test data-test
- :role role}])
-
-
-(mf/defc context-notification
- {::mf/wrap [mf/memo]}
- [{:keys [type content on-close actions data-test role] :as props}]
- [:& banner {:type type
- :position :inline
- :status :visible
- :controls (if (some? on-close)
- :close
- (if (some? actions)
- :bottom-actions
- :none))
- :content content
- :on-close on-close
- :actions actions
- :data-test data-test
- :role role}])
-
-(mf/defc toast-notification
- {::mf/wrap [mf/memo]}
- [{:keys [type content on-close actions data-test role] :as props}]
- [:& banner {:type type
- :position :floating
- :status :visible
- :controls (if (some? on-close)
- :close
- (if (some? actions)
- :bottom-actions
- :none))
- :content content
- :on-close on-close
- :actions actions
- :data-test data-test
- :role role}])
+ (cond
+ (and close? is-toast-msg)
+ [:& toast-notification toast-message]
+ (and actions? inline?)
+ [:& inline-notification inline-message]
+ :else
+ [:& context-notification context-message]))))
diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs
new file mode 100644
index 000000000..22405850b
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/context_notification.cljs
@@ -0,0 +1,62 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.notifications.context-notification
+ (:require-macros [app.main.style :as stl])
+ (:require
+ [app.common.data :as d]
+ [app.common.data.macros :as dm]
+ [app.main.ui.components.link-button :as lb]
+ [app.main.ui.icons :as i]
+ [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+ (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+(def ^:private error-icon
+ (i/icon-xref :delete-text-refactor (stl/css :icon)))
+
+(def ^:private success-icon
+ (i/icon-xref :status-tick-refactor (stl/css :icon)))
+
+(def ^:private info-icon
+ (i/icon-xref :help-refactor (stl/css :icon)))
+
+(defn get-icon-by-type
+ [type]
+ (case type
+ :warning neutral-icon
+ :error error-icon
+ :success success-icon
+ :info info-icon
+ neutral-icon))
+
+(mf/defc context-notification
+ "They are persistent, informative and non-actionable.
+ They are contextual messages in specific areas off the app"
+
+ {::mf/props :obj}
+ [{:keys [type content links] :as props}]
+
+ [:aside {:class (stl/css-case :context-notification true
+ :warning (= type :warning)
+ :error (= type :error)
+ :success (= type :success)
+ :info (= type :info))}
+
+ (get-icon-by-type type)
+
+ [:div {:class (stl/css :context-text)}
+ content]
+
+ [:nav {:class (stl/css :link-nav)}
+ (for [[index link] (d/enumerate links)]
+ ;; TODO Review this component
+ [:& lb/link-button {:class (stl/css :link)
+ :on-click (:callback link)
+ :value (:label link)
+ :key (dm/str "link-" index)}])]])
+
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
new file mode 100644
index 000000000..937588018
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -0,0 +1,85 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.context-notification {
+ --bg-color: var(--alert-background-color-default);
+ --fg-color: var(--alert-text-foreground-color-default);
+ --icon-color: var(--alert-icon-foreground-color-default);
+ --border-color: var(--alert-border-color-default);
+ display: grid;
+ grid-template-columns: $s-16 auto 1fr;
+ gap: $s-8;
+ min-height: $s-32;
+ width: 100%;
+ padding: $s-8 $s-8 $s-8 $s-16;
+ border: $s-1 solid var(--border-color);
+ border-radius: $br-12;
+ background-color: var(--bg-color);
+}
+
+.warning {
+ --bg-color: var(--alert-background-color-warning);
+ --fg-color: var(--alert-text-foreground-color-warning);
+ --icon-color: var(--alert-icon-foreground-color-warning);
+ --border-color: var(--alert-border-color-warning);
+}
+
+.success {
+ --bg-color: var(--alert-background-color-success);
+ --fg-color: var(--alert-text-foreground-color-success);
+ --icon-color: var(--alert-icon-foreground-color-success);
+ --border-color: var(--alert-border-color-success);
+}
+
+.info {
+ --bg-color: var(--alert-background-color-info);
+ --fg-color: var(--alert-text-foreground-color-info);
+ --icon-color: var(--alert-icon-foreground-color-info);
+ --border-color: var(--alert-border-color-info);
+}
+
+.default {
+ --bg-color: var(--alert-background-color-default);
+ --fg-color: var(--alert-text-foreground-color-default);
+ --icon-color: var(--alert-icon-foreground-color-default);
+ --border-color: var(--alert-border-color-default);
+}
+
+.error {
+ --bg-color: var(--alert-background-color-error);
+ --fg-color: var(--alert-text-foreground-color-error);
+ --icon-color: var(--alert-icon-foreground-color-error);
+ --border-color: var(--alert-border-color-error);
+}
+
+.icon {
+ @extend .button-icon;
+ height: 100%;
+ stroke: var(--icon-color);
+}
+
+.link-nav {
+ align-self: center;
+ height: $s-24;
+ margin: 0;
+}
+
+.context-text {
+ @include bodyMedTipography;
+ align-self: center;
+ color: var(--fg-color);
+ margin: auto 0;
+}
+
+.link {
+ @include bodyMedTipography;
+ align-self: center;
+ height: $s-16;
+ margin: 0;
+ color: var(--modal-link-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.cljs b/frontend/src/app/main/ui/notifications/inline_notification.cljs
new file mode 100644
index 000000000..eb42ae22c
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/inline_notification.cljs
@@ -0,0 +1,49 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.notifications.inline-notification
+ (:require-macros [app.main.style :as stl])
+ (:require
+ [app.common.data :as d]
+ [app.common.data.macros :as dm]
+ [app.common.uuid :as uuid]
+ [app.main.ui.components.link-button :as lb]
+ [app.main.ui.icons :as i]
+ [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+ (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+
+(mf/defc inline-notification
+ "They are persistent messages and report a special situation
+ of the application and require user interaction to disappear."
+
+ {::mf/props :obj}
+ [{:keys [content actions links] :as props}]
+ [:aside {:class (stl/css :inline-notification)}
+ neutral-icon
+
+ [:div {:class (stl/css :inline-text)}
+ content]
+
+ (when (some? links)
+ [:nav {:class (stl/css :link-nav)}
+ (for [[index link] (d/enumerate links)]
+ [:& lb/link-button {:key (dm/str "link-" index)
+ :class (stl/css :link)
+ :on-click (:callback link)
+ :value (:label link)}])])
+
+ [:div {:class (stl/css :actions)}
+ (for [action actions]
+ [:button {:key (uuid/next)
+ :class (stl/css-case :action-btn true
+ :primary (= :primary (:type action))
+ :secondary (= :secondary (:type action))
+ :danger (= :danger (:type action)))
+ :on-click (:callback action)}
+ (:label action)])]])
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss
new file mode 100644
index 000000000..542ee8dd8
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/inline_notification.scss
@@ -0,0 +1,79 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.inline-notification {
+ --bg-color: var(--alert-background-color-default);
+ --fg-color: var(--alert-text-foreground-color-default);
+ --icon-color: var(--alert-icon-foreground-color-default);
+ --border-color: var(--alert-border-color-default);
+ @include alertShadow;
+ position: absolute;
+ top: $s-72;
+ left: 0;
+ right: 0;
+ display: grid;
+ grid-template-columns: $s-16 auto 1fr auto;
+ gap: $s-8;
+ min-height: $s-48;
+ min-width: $s-640;
+ max-width: $s-712;
+ padding: $s-8 $s-8 $s-8 $s-16;
+ margin-inline: auto;
+ border: $s-1 solid var(--border-color);
+ border-radius: $br-12;
+ z-index: $z-index-modal;
+ background-color: var(--bg-color);
+ color: var(--fg-color);
+}
+
+.icon {
+ @extend .button-icon;
+ height: 100%;
+ stroke: var(--icon-color);
+}
+
+.inline-text {
+ @include bodyMedTipography;
+ align-self: center;
+}
+
+.link {
+ @include bodyMedTipography;
+ margin: 0;
+ height: 100%;
+ color: var(--modal-link-foreground-color);
+}
+
+.actions {
+ display: grid;
+ grid-template-columns: none;
+ grid-auto-flow: column;
+ gap: $s-8;
+ align-self: center;
+}
+
+.action-btn {
+ @extend .button-tertiary;
+ @include uppercaseTitleTipography;
+ min-height: $s-32;
+ min-width: $s-32;
+ padding: $s-8 $s-24;
+ border: $s-1 solid transparent;
+}
+
+.action-btn.primary {
+ @extend .button-primary;
+}
+
+.action-btn.secondary {
+ @extend .button-secondary;
+}
+
+.action-btn.danger {
+ @extend .modal-danger-btn;
+}
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.cljs b/frontend/src/app/main/ui/notifications/toast_notification.cljs
new file mode 100644
index 000000000..86ccdb639
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/toast_notification.cljs
@@ -0,0 +1,72 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.notifications.toast-notification
+ (:require-macros [app.main.style :as stl])
+ (:require
+ [app.common.data :as d]
+ [app.common.data.macros :as dm]
+ [app.main.ui.components.link-button :as lb]
+ [app.main.ui.icons :as i]
+ [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+ (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+(def ^:private error-icon
+ (i/icon-xref :delete-text-refactor (stl/css :icon)))
+
+(def ^:private success-icon
+ (i/icon-xref :status-tick-refactor (stl/css :icon)))
+
+(def ^:private info-icon
+ (i/icon-xref :help-refactor (stl/css :icon)))
+
+(def ^:private close-icon
+ (i/icon-xref :close-refactor (stl/css :close-icon)))
+
+(defn get-icon-by-type
+ [type]
+ (case type
+ :warning neutral-icon
+ :error error-icon
+ :success success-icon
+ :info info-icon
+ neutral-icon))
+
+(mf/defc toast-notification
+ "These are ephemeral elements that disappear when
+ the close button is pressed,
+ the page is refreshed,
+ the page is navigated to another page or
+ after 7 seconds, which is enough time to be read,
+ except for error messages that require user interaction."
+
+ {::mf/props :obj}
+ [{:keys [type content on-close links] :as props}]
+
+ [:aside {:class (stl/css-case :toast-notification true
+ :warning (= type :warning)
+ :error (= type :error)
+ :success (= type :success)
+ :info (= type :info))}
+
+ (get-icon-by-type type)
+
+ [:div {:class (stl/css :text)}
+ content]
+
+ (when (some? links)
+ [:nav {:class (stl/css :link-nav)}
+ (for [[index link] (d/enumerate links)]
+ [:& lb/link-button {:key (dm/str "link-" index)
+ :class (stl/css :link)
+ :on-click (:callback link)
+ :value (:label link)}])])
+
+ [:button {:class (stl/css :btn-close)
+ :on-click on-close}
+ close-icon]])
diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss
similarity index 59%
rename from frontend/src/app/main/ui/messages.scss
rename to frontend/src/app/main/ui/notifications/toast_notification.scss
index 7bc0297ec..2fe9cf1a0 100644
--- a/frontend/src/app/main/ui/messages.scss
+++ b/frontend/src/app/main/ui/notifications/toast_notification.scss
@@ -6,18 +6,27 @@
@import "refactor/common-refactor.scss";
-.banner {
- --bg-color: var(--alert-background-color-error);
- --fg-color: var(--alert-text-foreground-color-error);
- --icon-color: var(--alert-icon-foreground-color-error);
- --border-color: var(--alert-border-color-error);
- position: relative;
- display: flex;
- align-items: center;
- border-radius: $br-8;
- background-color: var(--bg-color);
+.toast-notification {
+ --bg-color: var(--alert-background-color-default);
+ --fg-color: var(--alert-text-foreground-color-default);
+ --icon-color: var(--alert-icon-foreground-color-default);
+ --border-color: var(--alert-border-color-default);
+ @include alertShadow;
+ position: fixed;
+ top: $s-16;
+ right: $s-16;
+ display: grid;
+ grid-template-columns: $s-16 auto 1fr auto;
+ gap: $s-8;
+ min-height: $s-32;
+ min-width: $s-500;
+ max-width: calc(10 * $s-100);
+ padding: $s-8 $s-8 $s-8 $s-16;
border: $s-1 solid var(--border-color);
+ background-color: var(--bg-color);
+ border-radius: $br-12;
color: var(--fg-color);
+ z-index: $z-index-alert;
}
.warning {
@@ -48,76 +57,15 @@
--border-color: var(--alert-border-color-default);
}
-.banner.info .icon {
- --icon-color: var(--alert-icon-foreground-color-info);
+.error {
+ --bg-color: var(--alert-background-color-error);
+ --fg-color: var(--alert-text-foreground-color-error);
+ --icon-color: var(--alert-icon-foreground-color-error);
+ --border-color: var(--alert-border-color-error);
}
-.banner.info:hover .icon {
- --fg-color: var(--alert-text-foreground-color-neutral);
-}
-
-.wrapper {
- display: flex;
- align-items: center;
- gap: $s-8;
- min-height: $s-32;
- width: 100%;
- padding: $s-8 0 $s-8 $s-16;
-}
-
-.icon {
- @include flexCenter;
- height: 100%;
- svg {
- @extend .button-icon;
- stroke: var(--icon-color);
- }
-}
-
-.fixed {
- @include alertShadow;
- position: fixed;
- top: $s-16;
- right: $s-16;
- display: flex;
- align-items: center;
- height: $s-48;
- min-width: $s-500;
- max-width: calc(10 * $s-100);
- padding-inline-start: $s-16;
- z-index: $z-index-alert;
-}
-
-.floating {
- @include alertShadow;
- position: absolute;
- min-height: $s-32;
- top: $s-72;
- left: 0;
- right: 0;
- width: $s-640;
- margin-inline: auto;
- z-index: $z-index-modal;
-}
-
-.inline {
- min-height: $s-32;
- width: 100%;
-}
-
-.hide {
- display: none;
-}
-
-.content {
- @include flexRow;
- gap: $s-8;
- flex-grow: 1;
-}
-
-.text {
- @include bodyMedTipography;
- flex-grow: 1;
+.link-nav {
+ height: $s-24;
}
.link {
@@ -126,31 +74,15 @@
margin: 0;
}
-.actions {
- @include flexRow;
- gap: $s-8;
+.icon {
+ @extend .button-icon;
+ height: 100%;
+ stroke: var(--icon-color);
}
-.action-btn {
- @extend .button-tertiary;
- @include uppercaseTitleTipography;
- min-height: $s-32;
- min-width: $s-32;
- svg {
- @extend .button-icon-small;
- }
- &.primary {
- @extend .button-primary;
- padding: $s-8 $s-24;
- }
- &.secondary {
- @extend .button-secondary;
- padding: $s-8 $s-24;
- }
- &.danger {
- @extend .modal-danger-btn;
- padding: $s-8 $s-24;
- }
+.text {
+ @include bodyMedTipography;
+ align-self: center;
}
.btn-close {
@@ -159,8 +91,9 @@
height: 100%;
min-width: $s-32;
background-color: transparent;
- svg {
- @extend .button-icon;
- stroke: var(--icon-color);
- }
+}
+
+.close-icon {
+ @extend .button-icon;
+ stroke: var(--icon-color);
}
diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs
index 1009f612e..ae2494963 100644
--- a/frontend/src/app/main/ui/settings/change_email.cljs
+++ b/frontend/src/app/main/ui/settings/change_email.cljs
@@ -17,7 +17,7 @@
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
- [app.main.ui.messages :as msgs]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
[cljs.spec.alpha :as s]
@@ -110,7 +110,7 @@
:on-click on-close} i/close-refactor]]
[:div {:class (stl/css :modal-content)}
- [:& msgs/inline-notification
+ [:& context-notification
{:type :info
:content (tr "modals.change-email.info" (:email profile))}]
diff --git a/frontend/src/app/main/ui/settings/delete_account.cljs b/frontend/src/app/main/ui/settings/delete_account.cljs
index 46ccd257e..11d83fe19 100644
--- a/frontend/src/app/main/ui/settings/delete_account.cljs
+++ b/frontend/src/app/main/ui/settings/delete_account.cljs
@@ -12,7 +12,7 @@
[app.main.data.users :as du]
[app.main.store :as st]
[app.main.ui.icons :as i]
- [app.main.ui.messages :as msgs]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
[rumext.v2 :as mf]))
@@ -47,7 +47,7 @@
:on-click on-close} i/close-refactor]]
[:div {:class (stl/css :modal-content)}
- [:& msgs/inline-notification
+ [:& context-notification
{:type :warning
:content (tr "modals.delete-account.info")}]]