Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 15:26:29 -05:00
Code Issues 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
Show stats 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;
// 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

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

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

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

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

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

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

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

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

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

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

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

@ -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")}]])

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

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

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

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

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

@ -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 {

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

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

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

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

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

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

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

@ -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")}]]