3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 12:16: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

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