From de0cd5aa042df1a97f1d73f1617614a20ea7b917 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 14 Feb 2024 17:03:15 +0100 Subject: [PATCH] :recycle: Update colors for alerts --- .../styles/common/refactor/color-defs.scss | 11 ++-- .../styles/common/refactor/design-tokens.scss | 33 ++++++++--- .../common/refactor/themes/default-theme.scss | 12 ++++ .../common/refactor/themes/light-theme.scss | 13 +++++ frontend/src/app/main/ui/auth/common.scss | 8 ++- frontend/src/app/main/ui/auth/login.cljs | 13 +++-- frontend/src/app/main/ui/auth/register.cljs | 2 +- .../src/app/main/ui/components/forms.scss | 4 +- .../src/app/main/ui/dashboard/import.scss | 8 +-- frontend/src/app/main/ui/dashboard/team.scss | 4 +- frontend/src/app/main/ui/messages.cljs | 49 +++++++++++++--- frontend/src/app/main/ui/messages.scss | 56 ++++++++++++------- .../app/main/ui/settings/change_email.cljs | 2 +- .../app/main/ui/settings/delete_account.cljs | 2 +- 14 files changed, 158 insertions(+), 59 deletions(-) diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 22fa83699..da1f0d784 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -57,16 +57,19 @@ --la-quaternary: #ff6fe0; // STATUS COLOR - --status-color-success-50: #f0f8ff; + --status-color-success-200: #a7e8d9; --status-color-success-500: #2d9f8f; --status-color-success-950: #0a2927; - --status-color-warning-50: #fff4ed; + + --status-color-warning-200: #ffc8a8; --status-color-warning-500: #fe4811; --status-color-warning-950: #440806; - --status-color-error-50: #fff0f3; + + --status-color-error-200: #ffcada; --status-color-error-500: #ff3277; --status-color-error-950: #500124; - --status-color-info-50: #f0f8ff; + + --status-color-info-200: #bae3fd; --status-color-info-500: #0e9be9; --status-color-info-950: #082c49; // Status color default will change with theme and will be defined on theme files diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 6c0cf1e85..0dc66a551 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -311,15 +311,30 @@ --modal-separator-backogrund-color: var(--color-background-quaternary); // ALERTS NOTIFICATION TOAST & STATUS WIDGET - --alert-background-color-success: var(--status-color-success-500); - --alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme - --alert-background-color-warning: var(--status-color-warning-500); - --alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme - --alert-background-color-error: var(--status-color-error-500); - --alert-foreground-color-error: var(--app-white); // We don't want this color to change with theme - --alert-background-color-neutral: var(--color-background-quaternary); - --alert-foreground-color-neutral: var(--color-foreground-secondary); - --alert-foreground-color-neutral-active: var(--color-foreground-primary); + --alert-background-color-success: var(--color-success-background); + --alert-text-foreground-color-success: var(--color-foreground-primary); + --alert-icon-foreground-color-success: var(--color-success-foreground); + --alert-border-color-success: var(--color-success-foreground); + + --alert-background-color-warning: var(--color-warning-background); + --alert-text-foreground-color-warning: var(--color-foreground-primary); + --alert-icon-foreground-color-warning: var(--color-warning-foreground); + --alert-border-color-warning: var(--color-warning-foreground); + + --alert-background-color-error: var(--color-error-background); + --alert-text-foreground-color-error: var(--color-foreground-primary); + --alert-icon-foreground-color-error: var(--color-error-foreground); + --alert-border-color-error: var(--color-error-foreground); + + --alert-background-color-info: var(--color-info-background); + --alert-text-foreground-color-info: var(--color-foreground-primary); + --alert-icon-foreground-color-info: var(--color-info-foreground); + --alert-border-color-info: var(--color-info-foreground); + + --alert-background-color-default: var(--color-background-primary); + --alert-text-foreground-color-default: var(--color-foreground-primary); + --alert-icon-foreground-color-default: var(--color-foreground-primary); + --alert-border-color-default: var(--color-background-quaternary); --notification-background-color-success: var(); --notification-foreground-color-success: var(); diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 8f7dd0172..432906c9e 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -24,6 +24,18 @@ --color-accent-quaternary: var(--da-quaternary); --color-component-highlight: var(--da-secondary); + --color-success-background: var(--status-color-success-950); + --color-success-foreground: var(--status-color-success-500); + + --color-warning-background: var(--status-color-warning-950); + --color-warning-foreground: var(--status-color-warning-500); + + --color-error-background: var(--status-color-error-950); + --color-error-foreground: var(--status-color-error-500); + + --color-info-background: var(--status-color-info-950); + --color-info-foreground: var(--status-color-info-500); + --overlay-color: var(--db-primary-60); --shadow-color: var(--db-secondary-30); diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index 86e3ae7c8..448e7e5f8 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -24,6 +24,19 @@ --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); + + --color-warning-background: var(--status-color-warning-200); + --color-warning-foreground: var(--status-color-warning-500); + + --color-error-background: var(--status-color-error-200); + --color-error-foreground: var(--status-color-error-500); + + --color-info-background: var(--status-color-info-200); + --color-info-foreground: var(--status-color-info-500); + --overlay-color: var(--lb-primary-60); --shadow-color: var(--lf-secondary-40); --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss index db99ba8fa..23e2ba11c 100644 --- a/frontend/src/app/main/ui/auth/common.scss +++ b/frontend/src/app/main/ui/auth/common.scss @@ -8,13 +8,13 @@ .auth-form { width: 100%; - padding-bottom: $s-16; + padding-block-end: $s-16; form { display: flex; flex-direction: column; gap: $s-12; - margin-bottom: $s-24; + margin-block-end: $s-24; } } @@ -23,6 +23,10 @@ margin: $s-24 0; } +.error-wrapper { + padding-block-end: $s-8; +} + .auth-title { @include bigTitleTipography; color: $df-primary; diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index bd5804b24..e8d282815 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -157,12 +157,13 @@ [:* (when-let [message @error] - [:& msgs/inline-banner - {:type :warning - :content message - :on-close #(reset! error nil) - :data-test "login-banner" - :role "alert"}]) + [:div {:class (stl/css :error-wrapper)} + [:& msgs/inline-notification + {:type :warning + :content message + :on-close #(reset! error nil) + :data-test "login-banner" + :role "alert"}]]) [:& fm/form {:on-submit on-submit :form form} [:div {:class (stl/css :fields-row)} diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 121d2523d..988c92ad2 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -28,7 +28,7 @@ (mf/defc demo-warning [_] [:div {:class (stl/css :banner)} - [:& msgs/inline-banner + [:& msgs/inline-notification {:type :warning :content (tr "auth.demo-warning")}]]) diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 433d61cdf..e393efadf 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -329,10 +329,10 @@ &.invalid { background-color: var(--status-widget-background-color-error); .text { - color: var(--alert-foreground-color-error); + color: var(--alert-text-foreground-color-error); } .icon svg { - stroke: var(--alert-foreground-color-error); + stroke: var(--alert-icon-foreground-color-error); } } } diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index 3b50b0e33..d58824239 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -39,7 +39,7 @@ margin-bottom: $s-24; border-radius: $br-8; background-color: var(--alert-background-color-success); - color: var(--alert-foreground-color-success); + color: var(--alert-text-foreground-color-success); .icon { @include flexCenter; @@ -47,7 +47,7 @@ width: $s-24; svg { @extend .button-icon; - stroke: var(--alert-foreground-color-success); + stroke: var(--alert-icon-foreground-color-success); } } .message { @@ -55,9 +55,9 @@ } &.warning { background-color: var(--alert-background-color-warning); - color: var(--alert-foreground-color-warning); + color: var(--alert-text-foreground-color-warning); .icon svg { - stroke: var(--alert-foreground-color-warning); + stroke: var(--alert-icon-foreground-color-warning); } } } diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index c5f266131..8245e8182 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -608,7 +608,7 @@ height: $s-24; svg { @extend .button-icon; - stroke: var(--alert-foreground-color-error); + stroke: var(--alert-icon-foreground-color-error); } } .message { @@ -632,7 +632,7 @@ height: $s-24; svg { @extend .button-icon; - stroke: var(--alert-foreground-color-warning); + stroke: var(--alert-icon-foreground-color-warning); } } .message { diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs index 1d64e4225..5c493aa27 100644 --- a/frontend/src/app/main/ui/messages.cljs +++ b/frontend/src/app/main/ui/messages.cljs @@ -31,11 +31,11 @@ [:div {:class (stl/css :wrapper)} [:div {:class (stl/css :icon)} (case type - :warning i/msg-warning-refactor - :error i/msg-error-refactor - :success i/msg-success-refactor - :info i/msg-neutral-refactor - i/msg-error-refactor)] + :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) @@ -69,7 +69,8 @@ (mf/defc notifications [] (let [message (mf/deref refs/message) - on-close #(st/emit! dmsg/hide)] + on-close #(st/emit! dmsg/hide) + _ (prn "message" message)] (when message [:& banner (assoc message :position (or (:position message) :fixed) @@ -78,7 +79,7 @@ :close) :on-close on-close)]))) -(mf/defc inline-banner +(mf/defc inline-notification {::mf/wrap [mf/memo]} [{:keys [type content on-close actions data-test role] :as props}] [:& banner {:type type @@ -95,3 +96,37 @@ :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}]) diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss index da126d3c9..7bc0297ec 100644 --- a/frontend/src/app/main/ui/messages.scss +++ b/frontend/src/app/main/ui/messages.scss @@ -8,54 +8,69 @@ .banner { --bg-color: var(--alert-background-color-error); - --fg-color: var(--alert-foreground-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); + border: $s-1 solid var(--border-color); color: var(--fg-color); } .warning { --bg-color: var(--alert-background-color-warning); - --fg-color: var(--alert-foreground-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-foreground-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-neutral); - --fg-color: var(--alert-foreground-color-neutral-active); + --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); } .banner.info .icon { - --fg-color: var(--alert-foreground-color-neutral); + --icon-color: var(--alert-icon-foreground-color-info); } .banner.info:hover .icon { - --fg-color: var(--alert-foreground-color-neutral); + --fg-color: var(--alert-text-foreground-color-neutral); } .wrapper { display: flex; align-items: center; - padding: $s-8 $s-8 $s-8 $s-16; gap: $s-8; - height: 100%; + min-height: $s-32; width: 100%; + padding: $s-8 0 $s-8 $s-16; } .icon { @include flexCenter; height: 100%; - width: $s-16; svg { @extend .button-icon; - stroke: var(--fg-color); + stroke: var(--icon-color); } } @@ -69,7 +84,7 @@ height: $s-48; min-width: $s-500; max-width: calc(10 * $s-100); - padding-left: $s-16; + padding-inline-start: $s-16; z-index: $z-index-alert; } @@ -81,13 +96,12 @@ left: 0; right: 0; width: $s-640; - margin-left: auto; - margin-right: auto; + margin-inline: auto; z-index: $z-index-modal; } .inline { - min-height: $s-40; + min-height: $s-32; width: 100%; } @@ -140,11 +154,13 @@ } .btn-close { - @extend .button-tertiary; - height: $s-32; - width: $s-32; + @include buttonStyle; + @include flexCenter; + height: 100%; + min-width: $s-32; + background-color: transparent; svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); + @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 f50a7bf6d..1009f612e 100644 --- a/frontend/src/app/main/ui/settings/change_email.cljs +++ b/frontend/src/app/main/ui/settings/change_email.cljs @@ -110,7 +110,7 @@ :on-click on-close} i/close-refactor]] [:div {:class (stl/css :modal-content)} - [:& msgs/inline-banner + [:& msgs/inline-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 2eddcca23..46ccd257e 100644 --- a/frontend/src/app/main/ui/settings/delete_account.cljs +++ b/frontend/src/app/main/ui/settings/delete_account.cljs @@ -47,7 +47,7 @@ :on-click on-close} i/close-refactor]] [:div {:class (stl/css :modal-content)} - [:& msgs/inline-banner + [:& msgs/inline-notification {:type :warning :content (tr "modals.delete-account.info")}]]