Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

♻️ Update the colors and icon of some toast notification

Browse source
This commit is contained in:
Eva Marco 2024-09-17 12:08:17 +02:00
parent b50fcee079
commit a26deafa75
4 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/info.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 9V5m0 6h0ZM1.333 8.082a6.667 6.667 0 1 1 13.333-.163 6.667 6.667 0 0 1-13.333.163Zh0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 220 B

7
frontend/src/app/main/ui/ds/colors.scss
View file

@ -21,8 +21,7 @@ $orange-500: #fe4811;
$orange-950: #440806; $orange-950: #440806;
$red-200: #ffcada; $red-200: #ffcada;
$red-500: #ff3277; $red-400: #c80857;
$red-700: #c80857;
$red-950: #500124; $red-950: #500124;
$pink-400: #ff6fe0; $pink-400: #ff6fe0;
@ -71,7 +70,7 @@ $grayish-red: #bfbfbf;
--color-background-success: #{$green-200}; --color-background-success: #{$green-200};
--color-accent-warning: #{$orange-500}; --color-accent-warning: #{$orange-500};
--color-background-warning: #{$orange-200}; --color-background-warning: #{$orange-200};
--color-accent-error: #{$red-500}; --color-accent-error: #{$red-400};
--color-background-error: #{$red-200}; --color-background-error: #{$red-200};
--color-accent-info: #{$blue-500}; --color-accent-info: #{$blue-500};
--color-background-info: #{$blue-200}; --color-background-info: #{$blue-200};
@ -103,7 +102,7 @@ $grayish-red: #bfbfbf;
--color-background-success: #{$green-950}; --color-background-success: #{$green-950};
--color-accent-warning: #{$orange-500}; --color-accent-warning: #{$orange-500};
--color-background-warning: #{$orange-950}; --color-background-warning: #{$orange-950};
--color-accent-error: #{$red-700}; --color-accent-error: #{$red-400};
--color-background-error: #{$red-950}; --color-background-error: #{$red-950};
--color-accent-info: #{$blue-500}; --color-accent-info: #{$blue-500};
--color-background-info: #{$blue-950}; --color-background-info: #{$blue-950};

1
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View file

@ -157,6 +157,7 @@
(def ^:icon-id hug-content "hug-content") (def ^:icon-id hug-content "hug-content")
(def ^:icon-id icon "icon") (def ^:icon-id icon "icon")
(def ^:icon-id img "img") (def ^:icon-id img "img")
(def ^:icon-id info "info")
(def ^:icon-id interaction "interaction") (def ^:icon-id interaction "interaction")
(def ^:icon-id join-nodes "join-nodes") (def ^:icon-id join-nodes "join-nodes")
(def ^:icon-id external-link "external-link") (def ^:icon-id external-link "external-link")

2
frontend/src/app/main/ui/ds/notifications/toast.cljs
View file

@ -15,7 +15,7 @@
(def levels (set '("info" "warning" "error" "success"))) (def levels (set '("info" "warning" "error" "success")))
(def ^:private icons-by-level (def ^:private icons-by-level
{"info" i/help {"info" i/info
"warning" i/msg-neutral "warning" i/msg-neutral
"error" i/delete-text "error" i/delete-text
"success" i/status-tick}) "success" i/status-tick})