3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-11 02:46:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update colors for alerts

Browse source
This commit is contained in:
Eva Marco 2024-02-14 17:03:15 +01:00 • committed by Andrey Antukh
parent f91a8b371a
commit de0cd5aa04
14 changed files with 158 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -57,16 +57,19 @@
--la-quaternary: #ff6fe0; --la-quaternary: #ff6fe0;
// STATUS COLOR // STATUS COLOR
--status-color-success-50: #f0f8ff; --status-color-success-200: #a7e8d9;
--status-color-success-500: #2d9f8f; --status-color-success-500: #2d9f8f;
--status-color-success-950: #0a2927; --status-color-success-950: #0a2927;
--status-color-warning-50: #fff4ed;
--status-color-warning-200: #ffc8a8;
--status-color-warning-500: #fe4811; --status-color-warning-500: #fe4811;
--status-color-warning-950: #440806; --status-color-warning-950: #440806;
--status-color-error-50: #fff0f3;
--status-color-error-200: #ffcada;
--status-color-error-500: #ff3277; --status-color-error-500: #ff3277;
--status-color-error-950: #500124; --status-color-error-950: #500124;
--status-color-info-50: #f0f8ff;
--status-color-info-200: #bae3fd;
--status-color-info-500: #0e9be9; --status-color-info-500: #0e9be9;
--status-color-info-950: #082c49; --status-color-info-950: #082c49;
// Status color default will change with theme and will be defined on theme files // Status color default will change with theme and will be defined on theme files

33
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -311,15 +311,30 @@
--modal-separator-backogrund-color: var(--color-background-quaternary); --modal-separator-backogrund-color: var(--color-background-quaternary);
// ALERTS NOTIFICATION TOAST & STATUS WIDGET // ALERTS NOTIFICATION TOAST & STATUS WIDGET
--alert-background-color-success: var(--status-color-success-500); --alert-background-color-success: var(--color-success-background);
--alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme --alert-text-foreground-color-success: var(--color-foreground-primary);
--alert-background-color-warning: var(--status-color-warning-500); --alert-icon-foreground-color-success: var(--color-success-foreground);
--alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme --alert-border-color-success: var(--color-success-foreground);
--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-warning: var(--color-warning-background);
--alert-background-color-neutral: var(--color-background-quaternary); --alert-text-foreground-color-warning: var(--color-foreground-primary);
--alert-foreground-color-neutral: var(--color-foreground-secondary); --alert-icon-foreground-color-warning: var(--color-warning-foreground);
--alert-foreground-color-neutral-active: var(--color-foreground-primary); --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-background-color-success: var();
--notification-foreground-color-success: var(); --notification-foreground-color-success: var();

12
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -24,6 +24,18 @@
--color-accent-quaternary: var(--da-quaternary); --color-accent-quaternary: var(--da-quaternary);
--color-component-highlight: var(--da-secondary); --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); --overlay-color: var(--db-primary-60);
--shadow-color: var(--db-secondary-30); --shadow-color: var(--db-secondary-30);

13
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -24,6 +24,19 @@
--color-accent-quaternary: var(--la-quaternary); --color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary); --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); --overlay-color: var(--lb-primary-60);
--shadow-color: var(--lf-secondary-40); --shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;

8
frontend/src/app/main/ui/auth/common.scss
View file

@ -8,13 +8,13 @@
.auth-form { .auth-form {
width: 100%; width: 100%;
padding-bottom: $s-16; padding-block-end: $s-16;
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-12; gap: $s-12;
margin-bottom: $s-24; margin-block-end: $s-24;
} }
} }
@ -23,6 +23,10 @@
margin: $s-24 0; margin: $s-24 0;
} }
.error-wrapper {
padding-block-end: $s-8;
}
.auth-title { .auth-title {
@include bigTitleTipography; @include bigTitleTipography;
color: $df-primary; color: $df-primary;

13
frontend/src/app/main/ui/auth/login.cljs
View file

@ -157,12 +157,13 @@
[:* [:*
(when-let [message @error] (when-let [message @error]
[:& msgs/inline-banner [:div {:class (stl/css :error-wrapper)}
{:type :warning [:& msgs/inline-notification
:content message {:type :warning
:on-close #(reset! error nil) :content message
:data-test "login-banner" :on-close #(reset! error nil)
:role "alert"}]) :data-test "login-banner"
:role "alert"}]])
[:& fm/form {:on-submit on-submit :form form} [:& fm/form {:on-submit on-submit :form form}
[:div {:class (stl/css :fields-row)} [:div {:class (stl/css :fields-row)}

2
frontend/src/app/main/ui/auth/register.cljs
View file

@ -28,7 +28,7 @@
(mf/defc demo-warning (mf/defc demo-warning
[_] [_]
[:div {:class (stl/css :banner)} [:div {:class (stl/css :banner)}
[:& msgs/inline-banner [:& msgs/inline-notification
{:type :warning {:type :warning
:content (tr "auth.demo-warning")}]]) :content (tr "auth.demo-warning")}]])

4
frontend/src/app/main/ui/components/forms.scss
View file

@ -329,10 +329,10 @@
&.invalid { &.invalid {
background-color: var(--status-widget-background-color-error); background-color: var(--status-widget-background-color-error);
.text { .text {
color: var(--alert-foreground-color-error); color: var(--alert-text-foreground-color-error);
} }
.icon svg { .icon svg {
stroke: var(--alert-foreground-color-error); stroke: var(--alert-icon-foreground-color-error);
} }
} }
} }

8
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -39,7 +39,7 @@
margin-bottom: $s-24; margin-bottom: $s-24;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--alert-background-color-success); background-color: var(--alert-background-color-success);
color: var(--alert-foreground-color-success); color: var(--alert-text-foreground-color-success);
.icon { .icon {
@include flexCenter; @include flexCenter;
@ -47,7 +47,7 @@
width: $s-24; width: $s-24;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--alert-foreground-color-success); stroke: var(--alert-icon-foreground-color-success);
} }
} }
.message { .message {
@ -55,9 +55,9 @@
} }
&.warning { &.warning {
background-color: var(--alert-background-color-warning); background-color: var(--alert-background-color-warning);
color: var(--alert-foreground-color-warning); color: var(--alert-text-foreground-color-warning);
.icon svg { .icon svg {
stroke: var(--alert-foreground-color-warning); stroke: var(--alert-icon-foreground-color-warning);
} }
} }
} }

4
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -608,7 +608,7 @@
height: $s-24; height: $s-24;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--alert-foreground-color-error); stroke: var(--alert-icon-foreground-color-error);
} }
} }
.message { .message {
@ -632,7 +632,7 @@
height: $s-24; height: $s-24;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--alert-foreground-color-warning); stroke: var(--alert-icon-foreground-color-warning);
} }
} }
.message { .message {

49
frontend/src/app/main/ui/messages.cljs
View file

@ -31,11 +31,11 @@
[:div {:class (stl/css :wrapper)} [:div {:class (stl/css :wrapper)}
[:div {:class (stl/css :icon)} [:div {:class (stl/css :icon)}
(case type (case type
:warning i/msg-warning-refactor :warning i/msg-neutral-refactor
:error i/msg-error-refactor :error i/delete-text-refactor
:success i/msg-success-refactor :success i/status-tick-refactor
:info i/msg-neutral-refactor :info i/help-refactor
i/msg-error-refactor)] i/delete-text-refactor)]
[:div {:class (stl/css-case :content true [:div {:class (stl/css-case :content true
:inline-actions (= controls :inline-actions) :inline-actions (= controls :inline-actions)
@ -69,7 +69,8 @@
(mf/defc notifications (mf/defc notifications
[] []
(let [message (mf/deref refs/message) (let [message (mf/deref refs/message)
on-close #(st/emit! dmsg/hide)] on-close #(st/emit! dmsg/hide)
_ (prn "message" message)]
(when message (when message
[:& banner (assoc message [:& banner (assoc message
:position (or (:position message) :fixed) :position (or (:position message) :fixed)
@ -78,7 +79,7 @@
:close) :close)
:on-close on-close)]))) :on-close on-close)])))
(mf/defc inline-banner (mf/defc inline-notification
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [type content on-close actions data-test role] :as props}] [{:keys [type content on-close actions data-test role] :as props}]
[:& banner {:type type [:& banner {:type type
@ -95,3 +96,37 @@
:data-test data-test :data-test data-test
:role role}]) :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}])

56
frontend/src/app/main/ui/messages.scss
View file

@ -8,54 +8,69 @@
.banner { .banner {
--bg-color: var(--alert-background-color-error); --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; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--bg-color); background-color: var(--bg-color);
border: $s-1 solid var(--border-color);
color: var(--fg-color); color: var(--fg-color);
} }
.warning { .warning {
--bg-color: var(--alert-background-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 { .success {
--bg-color: var(--alert-background-color-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 { .info {
--bg-color: var(--alert-background-color-neutral); --bg-color: var(--alert-background-color-info);
--fg-color: var(--alert-foreground-color-neutral-active); --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 { .banner.info .icon {
--fg-color: var(--alert-foreground-color-neutral); --icon-color: var(--alert-icon-foreground-color-info);
} }
.banner.info:hover .icon { .banner.info:hover .icon {
--fg-color: var(--alert-foreground-color-neutral); --fg-color: var(--alert-text-foreground-color-neutral);
} }
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
padding: $s-8 $s-8 $s-8 $s-16;
gap: $s-8; gap: $s-8;
height: 100%; min-height: $s-32;
width: 100%; width: 100%;
padding: $s-8 0 $s-8 $s-16;
} }
.icon { .icon {
@include flexCenter; @include flexCenter;
height: 100%; height: 100%;
width: $s-16;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--fg-color); stroke: var(--icon-color);
} }
} }
@ -69,7 +84,7 @@
height: $s-48; height: $s-48;
min-width: $s-500; min-width: $s-500;
max-width: calc(10 * $s-100); max-width: calc(10 * $s-100);
padding-left: $s-16; padding-inline-start: $s-16;
z-index: $z-index-alert; z-index: $z-index-alert;
} }
@ -81,13 +96,12 @@
left: 0; left: 0;
right: 0; right: 0;
width: $s-640; width: $s-640;
margin-left: auto; margin-inline: auto;
margin-right: auto;
z-index: $z-index-modal; z-index: $z-index-modal;
} }
.inline { .inline {
min-height: $s-40; min-height: $s-32;
width: 100%; width: 100%;
} }
@ -140,11 +154,13 @@
} }
.btn-close { .btn-close {
@extend .button-tertiary; @include buttonStyle;
height: $s-32; @include flexCenter;
width: $s-32; height: 100%;
min-width: $s-32;
background-color: transparent;
svg { svg {
@extend .button-icon-small; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--icon-color);
} }
} }

2
frontend/src/app/main/ui/settings/change_email.cljs
View file

@ -110,7 +110,7 @@
:on-click on-close} i/close-refactor]] :on-click on-close} i/close-refactor]]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:& msgs/inline-banner [:& msgs/inline-notification
{:type :info {:type :info
:content (tr "modals.change-email.info" (:email profile))}] :content (tr "modals.change-email.info" (:email profile))}]

2
frontend/src/app/main/ui/settings/delete_account.cljs
View file

@ -47,7 +47,7 @@
:on-click on-close} i/close-refactor]] :on-click on-close} i/close-refactor]]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:& msgs/inline-banner [:& msgs/inline-notification
{:type :warning {:type :warning
:content (tr "modals.delete-account.info")}]] :content (tr "modals.delete-account.info")}]]