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

💄 Add final design to alert messages

Browse source
This commit is contained in:
Eva Marco 2024-02-27 11:59:07 +01:00 • committed by Andrey Antukh
parent 233e7e7e87
commit 697a542754
17 changed files with 221 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

19
common/src/app/common/colors.cljc
View file

@ -13,25 +13,22 @@
[cuerdas.core :as str])) [cuerdas.core :as str]))
(def black "#000000") (def black "#000000")
(def canvas "#E8E9EA")
(def default-layout "#DE4762") (def default-layout "#DE4762")
(def gray-10 "#E3E3E3")
(def gray-20 "#B1B2B5") (def gray-20 "#B1B2B5")
(def gray-30 "#7B7D85")
(def gray-40 "#64666A")
(def gray-50 "#303236")
(def info "#59B9E2") (def info "#59B9E2")
(def test "#fabada") (def test "#fabada")
(def white "#FFFFFF") (def white "#FFFFFF")
(def primary "#31EFB8")
(def danger "#E65244")
(def warning "#FC8802") (def warning "#FC8802")
;; new-css-system colors ;; new-css-system colors
(def new-primary "#91fadb") (def new-primary "#7efff5")
(def new-danger "#ff4986") (def new-danger "#ff3277")
(def new-warning "#ff9b49") (def new-warning "#fe4811")
(def canvas-background "#1d1f20") (def new-primary-light "#6911d4")
(def background-quaternary "#2e3434")
(def background-quaternary-light "#eef0f2")
(def canvas "#E8E9EA")
(def names (def names
{"aliceblue" "#f0f8ff" {"aliceblue" "#f0f8ff"

121
frontend/src/app/main/ui/export.cljs
View file

@ -25,6 +25,15 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral-refactor (stl/css :icon)))
(def ^:private error-icon
(i/icon-xref :delete-text-refactor (stl/css :icon)))
(def ^:private close-icon
(i/icon-xref :close-refactor (stl/css :close-icon)))
(mf/defc export-multiple-dialog (mf/defc export-multiple-dialog
[{:keys [exports title cmd no-selection]}] [{:keys [exports title cmd no-selection]}]
(let [lstate (mf/deref refs/export) (let [lstate (mf/deref refs/export)
@ -198,25 +207,34 @@
(mf/defc export-progress-widget (mf/defc export-progress-widget
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
(let [state (mf/deref refs/export) (let [state (mf/deref refs/export)
error? (:error state) profile (mf/deref refs/profile)
healthy? (:healthy? state) theme (or (:theme profile) "default")
detail-visible? (:detail-visible state) is-default-theme? (= "default" theme)
widget-visible? (:widget-visible state) error? (:error state)
progress (:progress state) healthy? (:healthy? state)
exports (:exports state) detail-visible? (:detail-visible state)
total (count exports) widget-visible? (:widget-visible state)
complete? (= progress total) progress (:progress state)
circ (* 2 Math/PI 12) exports (:exports state)
pct (- circ (* circ (/ progress total))) total (count exports)
complete? (= progress total)
circ (* 2 Math/PI 12)
pct (- circ (* circ (/ progress total)))
pwidth (if error? pwidth (if error?
280 280
(/ (* progress 280) total)) (/ (* progress 280) total))
color (cond color (cond
error? clr/new-danger error? clr/new-danger
healthy? clr/new-primary healthy? (if is-default-theme?
clr/new-primary
clr/new-primary-light)
(not healthy?) clr/new-warning) (not healthy?) clr/new-warning)
background-clr (if is-default-theme?
clr/background-quaternary
clr/background-quaternary-light)
title (cond title (cond
error? (tr "workspace.options.exporting-object-error") error? (tr "workspace.options.exporting-object-error")
complete? (tr "workspace.options.exporting-complete") complete? (tr "workspace.options.exporting-complete")
@ -233,57 +251,60 @@
(when widget-visible? (when widget-visible?
[:div {:class (stl/css :export-progress-widget) [:div {:class (stl/css :export-progress-widget)
:on-click toggle-detail-visibility} :on-click toggle-detail-visibility}
[:svg {:width "32" :height "32"} [:svg {:width "24" :height "24"}
[:circle {:r "12" [:circle {:r "10"
:cx "16" :cx "12"
:cy "16" :cy "12"
:fill "transparent" :fill "transparent"
:stroke clr/gray-40 :stroke background-clr
:stroke-width "4"}] :stroke-width "4"}]
[:circle {:r "12" [:circle {:r "10"
:cx "16" :cx "12"
:cy "16" :cy "12"
:fill "transparent" :fill "transparent"
:stroke color :stroke color
:stroke-width "4" :stroke-width "4"
:stroke-dasharray (dm/str circ " " circ) :stroke-dasharray (dm/str circ " " circ)
:stroke-dashoffset pct :stroke-dashoffset pct
:transform "rotate(-90 16,16)" :transform "rotate(-90 12,12)"
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]) :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
(when detail-visible? (when detail-visible?
[:div {:class (stl/css :export-progress-modal-overlay)} [:div {:class (stl/css-case :export-progress-modal true
[:div {:class (stl/css :export-progress-modal-container)} :has-error error?)}
[:div {:class (stl/css :export-progress-modal-header)} (if error?
[:p {:class (stl/css :export-progress-modal-title)} error-icon
[:span {:class (stl/css :title-text)} neutral-icon)
title]
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export}
(tr "workspace.options.retry")]
[:p {:class (stl/css :progress)} [:p {:class (stl/css :export-progress-title)}
(dm/str progress " / " total)])] title
(if error?
[:button {:class (stl/css :retry-btn)
:on-click retry-last-export}
(tr "workspace.options.retry")]
[:button {:class (stl/css :modal-close-button) [:p {:class (stl/css :progress)}
:on-click toggle-detail-visibility} (dm/str progress " / " total)])]
i/close-refactor]]
[:svg {:class (stl/css :progress-bar) [:button {:class (stl/css :progress-close-button)
:height 5 :on-click toggle-detail-visibility}
:width 280} close-icon]
[:g
[:path {:d "M0 0 L280 0" (when-not error?
:stroke clr/black [:svg {:class (stl/css :progress-bar)
:stroke-width 30}] :height 4
[:path {:d (dm/str "M0 0 L280 0") :width 280}
:stroke color [:g
:stroke-width 30 [:path {:d "M0 0 L280 0"
:fill "transparent" :stroke background-clr
:stroke-dasharray 280 :stroke-width 30}]
:stroke-dashoffset (- 280 pwidth) [:path {:d (dm/str "M0 0 L280 0")
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])) :stroke color
:stroke-width 30
:fill "transparent"
:stroke-dasharray 280
:stroke-dashoffset (- 280 pwidth)
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])])]))
(def ^:const options [:all :merge :detach]) (def ^:const options [:all :merge :detach])

104
frontend/src/app/main/ui/export.scss
View file

@ -6,69 +6,101 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.export-progress-modal-overlay { // PROGRESS WIDGET
display: flex; .export-progress-widget {
justify-content: center; @include flexCenter;
position: fixed; width: $s-28;
height: $s-28;
}
// PROGRESS MODAL
.export-progress-modal {
--export-modal-bg-color: var(--alert-background-color-default);
--export-modal-fg-color: var(--alert-text-foreground-color-default);
--export-modal-icon-color: var(--alert-icon-foreground-color-default);
--export-modal-border-color: var(--alert-border-color-default);
position: absolute;
right: $s-16; right: $s-16;
top: $s-48; top: $s-48;
background-color: var(--modal-background-color); display: grid;
grid-template-columns: $s-24 1fr $s-24;
grid-template-areas:
"icon text close"
"bar bar bar";
gap: $s-4 $s-8;
padding-block-start: $s-8;
background-color: var(--export-modal-bg-color);
border: $s-1 solid var(--export-modal-border-color);
border-radius: $br-8; border-radius: $br-8;
z-index: $z-index-20; z-index: $z-index-modal;
overflow: hidden; overflow: hidden;
} }
.export-progress-modal-container { .has-error {
display: flex; --export-modal-bg-color: var(--alert-background-color-error);
flex-direction: column; --export-modal-fg-color: var(--alert-text-foreground-color-error);
justify-content: space-around; --export-modal-icon-color: var(--alert-icon-foreground-color-error);
height: 100%; --export-modal-border-color: var(--alert-border-color-error);
width: 100%; grid-template-areas: "icon text close";
} gap: $s-8;
.export-progress-modal-header { padding-block: $s-8;
display: flex;
align-items: center;
justify-content: stretch;
padding: $s-8;
} }
.export-progress-modal-title { .icon {
display: flex; @extend .button-icon;
flex-grow: 1; grid-area: icon;
padding: 0; align-self: center;
margin: 0; margin-inline-start: $s-8;
stroke: var(--export-modal-icon-color);
} }
.title-text { .export-progress-title {
@include flexCenter; @include bodyMedTipography;
@include bodyLargeTypography; display: grid;
grid-template-columns: auto 1fr;
gap: $s-8;
grid-area: text;
align-self: center;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: var(--modal-title-foreground-color); color: var(--export-modal-fg-color);
padding-left: $s-4;
} }
.progress { .progress {
@include bodyLargeTypography; @include bodyMedTipography;
padding-left: $s-8; padding-left: $s-8;
margin: 0; margin: 0;
align-self: center;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.retry-btn { .retry-btn {
@extend .button-tertiary; @include buttonStyle;
@include bodyMedTipography; @include bodyMedTipography;
display: inline;
text-align: left;
color: var(--modal-link-foreground-color);
margin: 0;
padding: 0;
} }
.modal-close-button { .progress-close-button {
@extend .button-tertiary; @include buttonStyle;
svg { padding: 0;
@extend .button-icon-small; margin-inline-end: $s-8;
stroke: var(--icon-foreground);
}
} }
.close-icon {
@extend .button-icon;
stroke: var(--export-modal-icon-color);
}
.progress-bar { .progress-bar {
margin-top: 0; margin-top: 0;
grid-area: bar;
} }
// EXPORT MODAL
.modal-overlay { .modal-overlay {
@extend .modal-overlay-base; @extend .modal-overlay-base;
&.transparent { &.transparent {

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

@ -29,13 +29,12 @@
:links (:links message) :links (:links message)
:content (:content message)} :content (:content message)}
context-message {:actions (:actions message) context-message {:type (or (:type message) :info)
:links (:links message) :links (:links message)
:content (:content message)} :content (:content message)}
;; TODO review this options is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message))) is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
(when message (when message
(cond (cond

19
frontend/src/app/main/ui/notifications/context_notification.cljs
View file

@ -56,14 +56,13 @@
[:div {:class (stl/css :context-text) [:div {:class (stl/css :context-text)
:dangerouslySetInnerHTML (when is-html #js {:__html content})} :dangerouslySetInnerHTML (when is-html #js {:__html content})}
(when-not is-html (when-not is-html
content)] [:*
content
(when (some? links) (when (some? links)
[:nav {:class (stl/css :link-nav)} (for [[index link] (d/enumerate links)]
(for [[index link] (d/enumerate links)] ;; TODO Review this component
;; TODO Review this component [:& lb/link-button {:class (stl/css :link)
[:& lb/link-button {:class (stl/css :link) :on-click (:callback link)
:on-click (:callback link) :value (:label link)
:value (:label link) :key (dm/str "link-" index)}]))])]])
:key (dm/str "link-" index)}])])])

16
frontend/src/app/main/ui/notifications/context_notification.scss
View file

@ -7,16 +7,18 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.context-notification { .context-notification {
---context-notification-bg-color: var(--alert-background-color-default); --context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default); --context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default); --context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default); --context-notification-border-color: var(--alert-border-color-default);
box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: $s-16 auto 1fr; grid-template-columns: $s-16 1fr;
gap: $s-8; gap: $s-8;
min-height: $s-32; min-height: $s-32;
height: fit-content;
width: 100%; width: 100%;
padding: $s-8 $s-8 $s-8 $s-16; padding: $s-8;
border: $s-1 solid var(--context-notification-border-color); border: $s-1 solid var(--context-notification-border-color);
border-radius: $br-8; border-radius: $br-8;
background-color: var(--context-notification-bg-color); background-color: var(--context-notification-bg-color);
@ -63,12 +65,6 @@
stroke: var(--context-notification-icon-color); stroke: var(--context-notification-icon-color);
} }
.link-nav {
align-self: center;
height: $s-24;
margin: 0;
}
.context-text { .context-text {
@include bodyMedTipography; @include bodyMedTipography;
align-self: center; align-self: center;
@ -84,6 +80,8 @@
.contain-html .context-text a { .contain-html .context-text a {
@include bodyMedTipography; @include bodyMedTipography;
align-self: center; align-self: center;
display: inline;
text-align: left;
height: $s-16; height: $s-16;
margin: 0; margin: 0;
color: var(--modal-link-foreground-color); color: var(--modal-link-foreground-color);

22
frontend/src/app/main/ui/notifications/inline_notification.cljs
View file

@ -11,11 +11,8 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.ui.components.link-button :as lb] [app.main.ui.components.link-button :as lb]
[app.main.ui.icons :as i]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral-refactor (stl/css :icon)))
(mf/defc inline-notification (mf/defc inline-notification
@ -25,18 +22,17 @@
{::mf/props :obj} {::mf/props :obj}
[{:keys [content actions links] :as props}] [{:keys [content actions links] :as props}]
[:aside {:class (stl/css :inline-notification)} [:aside {:class (stl/css :inline-notification)}
neutral-icon
[:div {:class (stl/css :inline-text)} [:div {:class (stl/css :inline-text)}
content]
(when (some? links) content
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)] (when (some? links)
[:& lb/link-button {:key (dm/str "link-" index) [:nav {:class (stl/css :link-nav)}
:class (stl/css :link) (for [[index link] (d/enumerate links)]
:on-click (:callback link) [:& lb/link-button {:key (dm/str "link-" index)
:value (:label link)}])]) :class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])]
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
(for [action actions] (for [action actions]

25
frontend/src/app/main/ui/notifications/inline_notification.scss
View file

@ -9,7 +9,6 @@
.inline-notification { .inline-notification {
--inline-notification-bg-color: var(--alert-background-color-default); --inline-notification-bg-color: var(--alert-background-color-default);
--inline-notification-fg-color: var(--alert-text-foreground-color-default); --inline-notification-fg-color: var(--alert-text-foreground-color-default);
--inline-notification-icon-color: var(--alert-icon-foreground-color-default);
--inline-notification-border-color: var(--alert-border-color-default); --inline-notification-border-color: var(--alert-border-color-default);
@include alertShadow; @include alertShadow;
position: absolute; position: absolute;
@ -17,12 +16,13 @@
left: 0; left: 0;
right: 0; right: 0;
display: grid; display: grid;
grid-template-columns: $s-16 auto 1fr auto; grid-template-columns: 1fr auto;
gap: $s-8; gap: $s-24;
min-height: $s-48; min-height: $s-48;
min-width: $s-640; min-width: $s-640;
max-width: $s-712; width: fit-content;
padding: $s-8 $s-8 $s-8 $s-16; max-width: $s-960;
padding: $s-8;
margin-inline: auto; margin-inline: auto;
border: $s-1 solid var(--inline-notification-border-color); border: $s-1 solid var(--inline-notification-border-color);
border-radius: $br-8; border-radius: $br-8;
@ -31,17 +31,15 @@
color: var(--inline-notification-fg-color); color: var(--inline-notification-fg-color);
} }
.icon {
@extend .button-icon;
height: 100%;
stroke: var(--inline-notification-icon-color);
}
.inline-text { .inline-text {
@include bodyMedTipography; @include bodyMedTipography;
align-self: center; align-self: center;
} }
.link-nav {
display: inline;
}
.link { .link {
@include bodyMedTipography; @include bodyMedTipography;
margin: 0; margin: 0;
@ -53,15 +51,16 @@
display: grid; display: grid;
grid-template-columns: none; grid-template-columns: none;
grid-auto-flow: column; grid-auto-flow: column;
gap: $s-8;
align-self: center; align-self: center;
gap: $s-8;
} }
.action-btn { .action-btn {
@extend .button-tertiary; @extend .button-secondary;
@include uppercaseTitleTipography; @include uppercaseTitleTipography;
min-height: $s-32; min-height: $s-32;
min-width: $s-32; min-width: $s-32;
width: fit-content;
padding: $s-8 $s-24; padding: $s-8 $s-24;
border: $s-1 solid transparent; border: $s-1 solid transparent;
} }

18
frontend/src/app/main/ui/notifications/toast_notification.cljs
View file

@ -49,7 +49,6 @@
[{:keys [type content on-close links] :as props}] [{:keys [type content on-close links] :as props}]
[:aside {:class (stl/css-case :toast-notification true [:aside {:class (stl/css-case :toast-notification true
:with-links (some? links)
:warning (= type :warning) :warning (= type :warning)
:error (= type :error) :error (= type :error)
:success (= type :success) :success (= type :success)
@ -58,15 +57,16 @@
(get-icon-by-type type) (get-icon-by-type type)
[:div {:class (stl/css :text)} [:div {:class (stl/css :text)}
content] content
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])]
(when (some? links)
[:nav {:class (stl/css :link-nav)}
(for [[index link] (d/enumerate links)]
[:& lb/link-button {:key (dm/str "link-" index)
:class (stl/css :link)
:on-click (:callback link)
:value (:label link)}])])
[:button {:class (stl/css :btn-close) [:button {:class (stl/css :btn-close)
:on-click on-close} :on-click on-close}

21
frontend/src/app/main/ui/notifications/toast_notification.scss
View file

@ -19,9 +19,9 @@
grid-template-columns: $s-16 1fr auto; grid-template-columns: $s-16 1fr auto;
gap: $s-8; gap: $s-8;
min-height: $s-32; min-height: $s-32;
min-width: $s-500; min-width: $s-228;
max-width: calc(10 * $s-100); max-width: $s-400;
padding: $s-8 $s-8 $s-8 $s-16; padding: $s-8;
border: $s-1 solid var(--toast-notification-border-color); border: $s-1 solid var(--toast-notification-border-color);
background-color: var(--toast-notification-bg-color); background-color: var(--toast-notification-bg-color);
border-radius: $br-8; border-radius: $br-8;
@ -29,10 +29,6 @@
z-index: $z-index-alert; z-index: $z-index-alert;
} }
.with-links {
grid-template-columns: $s-16 auto 1fr auto;
}
.warning { .warning {
--toast-notification-bg-color: var(--alert-background-color-warning); --toast-notification-bg-color: var(--alert-background-color-warning);
--toast-notification-fg-color: var(--alert-text-foreground-color-warning); --toast-notification-fg-color: var(--alert-text-foreground-color-warning);
@ -69,7 +65,7 @@
} }
.link-nav { .link-nav {
height: $s-24; display: inline;
} }
.link { .link {
@ -80,7 +76,7 @@
.icon { .icon {
@extend .button-icon; @extend .button-icon;
height: 100%; align-self: flex-start;
stroke: var(--toast-notification-icon-color); stroke: var(--toast-notification-icon-color);
} }
@ -91,9 +87,10 @@
.btn-close { .btn-close {
@include buttonStyle; @include buttonStyle;
@include flexCenter; align-self: flex-start;
height: 100%; width: $s-16;
min-width: $s-32; margin: 0;
padding: 0;
background-color: transparent; background-color: transparent;
} }

4
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -161,6 +161,8 @@
#(st/emit! dv/zoom-to-fit))] #(st/emit! dv/zoom-to-fit))]
[:div {:class (stl/css :options-zone)} [:div {:class (stl/css :options-zone)}
[:& export-progress-widget]
(case section (case section
:interactions [:* :interactions [:*
(when index (when index
@ -169,8 +171,6 @@
:comments [:& comments-menu] :comments [:& comments-menu]
[:div {:class (stl/css :view-options)}]) [:div {:class (stl/css :view-options)}])
[:& export-progress-widget]
[:& zoom-widget [:& zoom-widget
{:zoom zoom {:zoom zoom
:on-increase handle-increase :on-increase handle-increase

1
frontend/src/app/main/ui/workspace/presence.scss
View file

@ -34,6 +34,7 @@
} }
} }
} }
.active-users-opened { .active-users-opened {
position: absolute; position: absolute;
right: calc(-1 * $s-2); right: calc(-1 * $s-2);

5
frontend/src/app/main/ui/workspace/right_header.cljs
View file

@ -203,8 +203,9 @@
[:& persistence-state-widget] [:& persistence-state-widget]
[:div {:class (stl/css :separator)}] [:& export-progress-widget]
[:div {:class (stl/css :separator)}]
[:div {:class (stl/css :zoom-section)} [:div {:class (stl/css :zoom-section)}
[:& zoom-widget-workspace [:& zoom-widget-workspace
@ -215,8 +216,6 @@
:on-zoom-fit on-zoom-fit :on-zoom-fit on-zoom-fit
:on-zoom-selected on-zoom-selected}]] :on-zoom-selected on-zoom-selected}]]
[:& export-progress-widget]
[:div {:class (stl/css :comments-section)} [:div {:class (stl/css :comments-section)}
[:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) [:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))

8
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -37,6 +37,8 @@
border-radius: $br-8; border-radius: $br-8;
.label { .label {
@include bodyMedTipography; @include bodyMedTipography;
height: 100%;
padding: $s-8 0;
color: var(--button-tertiary-foreground-color-rest); color: var(--button-tertiary-foreground-color-rest);
} }
@ -180,14 +182,12 @@
.status-icon { .status-icon {
@include flexCenter; @include flexCenter;
width: $s-16; width: $s-24;
height: $s-16; height: $s-24;
margin: 0; margin: 0;
border-radius: $br-circle; border-radius: $br-circle;
svg { svg {
@extend .button-icon; @extend .button-icon;
height: $s-12;
width: $s-12;
stroke: var(--status-widget-icon-foreground-color); stroke: var(--status-widget-icon-foreground-color);
} }
} }

2
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
View file

@ -13,7 +13,7 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def primary-color "var(--color-accent-tertiary)") (def accent-color "var(--color-accent-tertiary)")
(def secondary-color "var(--color-accent-quaternary)") (def secondary-color "var(--color-accent-quaternary)")
(def black-color "var(--app-black)") (def black-color "var(--app-black)")
(def white-color "var(--app-white)") (def white-color "var(--app-white)")

10
frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
View file

@ -89,8 +89,8 @@
:style {:stroke-width (/ point-radius-stroke-width zoom) :style {:stroke-width (/ point-radius-stroke-width zoom)
:stroke (cond (or selected? hover?) pc/black-color :stroke (cond (or selected? hover?) pc/black-color
preview? pc/secondary-color preview? pc/secondary-color
:else pc/primary-color) :else pc/accent-color)
:fill (cond selected? pc/primary-color :fill (cond selected? pc/accent-color
:else pc/white-color)}}] :else pc/white-color)}}]
[:circle {:cx x [:circle {:cx x
:cy y :cy y
@ -150,8 +150,8 @@
:style {:stroke-width (/ handler-stroke-width zoom) :style {:stroke-width (/ handler-stroke-width zoom)
:stroke (cond (or selected? hover?) pc/black-color :stroke (cond (or selected? hover?) pc/black-color
:else pc/primary-color) :else pc/accent-color)
:fill (cond selected? pc/primary-color :fill (cond selected? pc/accent-color
:else pc/white-color)}}] :else pc/white-color)}}]
[:circle {:cx x [:circle {:cx x
:cy y :cy y
@ -288,7 +288,7 @@
[:g.path-editor {:ref editor-ref} [:g.path-editor {:ref editor-ref}
[:path {:d (upf/format-path content) [:path {:d (upf/format-path content)
:style {:fill "none" :style {:fill "none"
:stroke pc/primary-color :stroke pc/accent-color
:strokeWidth (/ 1 zoom)}}] :strokeWidth (/ 1 zoom)}}]
(when (and preview (not drag-handler)) (when (and preview (not drag-handler))
[:& path-preview {:command preview [:& path-preview {:command preview

2
frontend/src/app/main/ui/workspace/viewport/guides.cljs
View file

@ -26,7 +26,7 @@
(def guide-width 1) (def guide-width 1)
(def guide-opacity 0.7) (def guide-opacity 0.7)
(def guide-opacity-hover 1) (def guide-opacity-hover 1)
(def guide-color colors/primary) (def guide-color colors/new-primary)
(def guide-pill-width 34) (def guide-pill-width 34)
(def guide-pill-height 20) (def guide-pill-height 20)
(def guide-pill-corner-radius 4) (def guide-pill-corner-radius 4)