From 697a542754cddd1ff769e71bc0be40ac25fa1c1c Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 27 Feb 2024 11:59:07 +0100 Subject: [PATCH] :lipstick: Add final design to alert messages --- common/src/app/common/colors.cljc | 19 ++- frontend/src/app/main/ui/export.cljs | 121 ++++++++++-------- frontend/src/app/main/ui/export.scss | 104 +++++++++------ frontend/src/app/main/ui/messages.cljs | 7 +- .../notifications/context_notification.cljs | 19 ++- .../notifications/context_notification.scss | 16 +-- .../ui/notifications/inline_notification.cljs | 22 ++-- .../ui/notifications/inline_notification.scss | 25 ++-- .../ui/notifications/toast_notification.cljs | 18 +-- .../ui/notifications/toast_notification.scss | 21 ++- frontend/src/app/main/ui/viewer/header.cljs | 4 +- .../src/app/main/ui/workspace/presence.scss | 1 + .../app/main/ui/workspace/right_header.cljs | 5 +- .../app/main/ui/workspace/right_header.scss | 8 +- .../main/ui/workspace/shapes/path/common.cljs | 2 +- .../main/ui/workspace/shapes/path/editor.cljs | 10 +- .../main/ui/workspace/viewport/guides.cljs | 2 +- 17 files changed, 221 insertions(+), 183 deletions(-) diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc index 7274b78a4..69de60bd5 100644 --- a/common/src/app/common/colors.cljc +++ b/common/src/app/common/colors.cljc @@ -13,25 +13,22 @@ [cuerdas.core :as str])) (def black "#000000") -(def canvas "#E8E9EA") + (def default-layout "#DE4762") -(def gray-10 "#E3E3E3") (def gray-20 "#B1B2B5") -(def gray-30 "#7B7D85") -(def gray-40 "#64666A") -(def gray-50 "#303236") (def info "#59B9E2") (def test "#fabada") (def white "#FFFFFF") -(def primary "#31EFB8") -(def danger "#E65244") (def warning "#FC8802") ;; new-css-system colors -(def new-primary "#91fadb") -(def new-danger "#ff4986") -(def new-warning "#ff9b49") -(def canvas-background "#1d1f20") +(def new-primary "#7efff5") +(def new-danger "#ff3277") +(def new-warning "#fe4811") +(def new-primary-light "#6911d4") +(def background-quaternary "#2e3434") +(def background-quaternary-light "#eef0f2") +(def canvas "#E8E9EA") (def names {"aliceblue" "#f0f8ff" diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index 35dcc244d..711d4474b 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -25,6 +25,15 @@ [cuerdas.core :as str] [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 [{:keys [exports title cmd no-selection]}] (let [lstate (mf/deref refs/export) @@ -198,25 +207,34 @@ (mf/defc export-progress-widget {::mf/wrap [mf/memo]} [] - (let [state (mf/deref refs/export) - error? (:error state) - healthy? (:healthy? state) - detail-visible? (:detail-visible state) - widget-visible? (:widget-visible state) - progress (:progress state) - exports (:exports state) - total (count exports) - complete? (= progress total) - circ (* 2 Math/PI 12) - pct (- circ (* circ (/ progress total))) + (let [state (mf/deref refs/export) + profile (mf/deref refs/profile) + theme (or (:theme profile) "default") + is-default-theme? (= "default" theme) + error? (:error state) + healthy? (:healthy? state) + detail-visible? (:detail-visible state) + widget-visible? (:widget-visible state) + progress (:progress state) + exports (:exports state) + total (count exports) + complete? (= progress total) + circ (* 2 Math/PI 12) + pct (- circ (* circ (/ progress total))) pwidth (if error? 280 (/ (* progress 280) total)) color (cond 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) + + background-clr (if is-default-theme? + clr/background-quaternary + clr/background-quaternary-light) title (cond error? (tr "workspace.options.exporting-object-error") complete? (tr "workspace.options.exporting-complete") @@ -233,57 +251,60 @@ (when widget-visible? [:div {:class (stl/css :export-progress-widget) :on-click toggle-detail-visibility} - [:svg {:width "32" :height "32"} - [:circle {:r "12" - :cx "16" - :cy "16" + [:svg {:width "24" :height "24"} + [:circle {:r "10" + :cx "12" + :cy "12" :fill "transparent" - :stroke clr/gray-40 + :stroke background-clr :stroke-width "4"}] - [:circle {:r "12" - :cx "16" - :cy "16" + [:circle {:r "10" + :cx "12" + :cy "12" :fill "transparent" :stroke color :stroke-width "4" :stroke-dasharray (dm/str circ " " circ) :stroke-dashoffset pct - :transform "rotate(-90 16,16)" + :transform "rotate(-90 12,12)" :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]) (when detail-visible? - [:div {:class (stl/css :export-progress-modal-overlay)} - [:div {:class (stl/css :export-progress-modal-container)} - [:div {:class (stl/css :export-progress-modal-header)} - [:p {:class (stl/css :export-progress-modal-title)} - [:span {:class (stl/css :title-text)} - title] - (if error? - [:button {:class (stl/css :retry-btn) - :on-click retry-last-export} - (tr "workspace.options.retry")] + [:div {:class (stl/css-case :export-progress-modal true + :has-error error?)} + (if error? + error-icon + neutral-icon) - [:p {:class (stl/css :progress)} - (dm/str progress " / " total)])] + [:p {:class (stl/css :export-progress-title)} + 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) - :on-click toggle-detail-visibility} - i/close-refactor]] + [:p {:class (stl/css :progress)} + (dm/str progress " / " total)])] - [:svg {:class (stl/css :progress-bar) - :height 5 - :width 280} - [:g - [:path {:d "M0 0 L280 0" - :stroke clr/black - :stroke-width 30}] - [:path {:d (dm/str "M0 0 L280 0") - :stroke color - :stroke-width 30 - :fill "transparent" - :stroke-dasharray 280 - :stroke-dashoffset (- 280 pwidth) - :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])) + [:button {:class (stl/css :progress-close-button) + :on-click toggle-detail-visibility} + close-icon] + + (when-not error? + [:svg {:class (stl/css :progress-bar) + :height 4 + :width 280} + [:g + [:path {:d "M0 0 L280 0" + :stroke background-clr + :stroke-width 30}] + [:path {:d (dm/str "M0 0 L280 0") + :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]) diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index 9918499e9..125f8235f 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -6,69 +6,101 @@ @import "refactor/common-refactor.scss"; -.export-progress-modal-overlay { - display: flex; - justify-content: center; - position: fixed; +// PROGRESS WIDGET +.export-progress-widget { + @include flexCenter; + 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; 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; - z-index: $z-index-20; + z-index: $z-index-modal; overflow: hidden; } -.export-progress-modal-container { - display: flex; - flex-direction: column; - justify-content: space-around; - height: 100%; - width: 100%; -} -.export-progress-modal-header { - display: flex; - align-items: center; - justify-content: stretch; - padding: $s-8; +.has-error { + --export-modal-bg-color: var(--alert-background-color-error); + --export-modal-fg-color: var(--alert-text-foreground-color-error); + --export-modal-icon-color: var(--alert-icon-foreground-color-error); + --export-modal-border-color: var(--alert-border-color-error); + grid-template-areas: "icon text close"; + gap: $s-8; + padding-block: $s-8; } -.export-progress-modal-title { - display: flex; - flex-grow: 1; - padding: 0; - margin: 0; +.icon { + @extend .button-icon; + grid-area: icon; + align-self: center; + margin-inline-start: $s-8; + stroke: var(--export-modal-icon-color); } -.title-text { - @include flexCenter; - @include bodyLargeTypography; +.export-progress-title { + @include bodyMedTipography; + display: grid; + grid-template-columns: auto 1fr; + gap: $s-8; + grid-area: text; + align-self: center; padding: 0; margin: 0; - color: var(--modal-title-foreground-color); - padding-left: $s-4; + color: var(--export-modal-fg-color); } + .progress { - @include bodyLargeTypography; + @include bodyMedTipography; padding-left: $s-8; margin: 0; + align-self: center; color: var(--modal-text-foreground-color); } + .retry-btn { - @extend .button-tertiary; + @include buttonStyle; @include bodyMedTipography; + display: inline; + text-align: left; + color: var(--modal-link-foreground-color); + margin: 0; + padding: 0; } -.modal-close-button { - @extend .button-tertiary; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } +.progress-close-button { + @include buttonStyle; + padding: 0; + margin-inline-end: $s-8; } + +.close-icon { + @extend .button-icon; + stroke: var(--export-modal-icon-color); +} + .progress-bar { margin-top: 0; + grid-area: bar; } +// EXPORT MODAL .modal-overlay { @extend .modal-overlay-base; &.transparent { diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs index bee7305e1..56c481fb2 100644 --- a/frontend/src/app/main/ui/messages.cljs +++ b/frontend/src/app/main/ui/messages.cljs @@ -29,13 +29,12 @@ :links (:links message) :content (:content message)} - context-message {:actions (:actions message) + context-message {:type (or (:type message) :info) :links (:links message) :content (:content message)} - ;; TODO review this options - 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-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))))] (when message (cond diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs index d5d96e3d5..cdd9a1d10 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/notifications/context_notification.cljs @@ -56,14 +56,13 @@ [:div {:class (stl/css :context-text) :dangerouslySetInnerHTML (when is-html #js {:__html content})} (when-not is-html - content)] - - (when (some? links) - [:nav {:class (stl/css :link-nav)} - (for [[index link] (d/enumerate links)] - ;; TODO Review this component - [:& lb/link-button {:class (stl/css :link) - :on-click (:callback link) - :value (:label link) - :key (dm/str "link-" index)}])])]) + [:* + content + (when (some? links) + (for [[index link] (d/enumerate links)] + ;; TODO Review this component + [:& lb/link-button {:class (stl/css :link) + :on-click (:callback link) + :value (:label link) + :key (dm/str "link-" index)}]))])]]) diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss index eb01af8a7..67e047955 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.scss +++ b/frontend/src/app/main/ui/notifications/context_notification.scss @@ -7,16 +7,18 @@ @import "refactor/common-refactor.scss"; .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-icon-color: var(--alert-icon-foreground-color-default); --context-notification-border-color: var(--alert-border-color-default); + box-sizing: border-box; display: grid; - grid-template-columns: $s-16 auto 1fr; + grid-template-columns: $s-16 1fr; gap: $s-8; min-height: $s-32; + height: fit-content; width: 100%; - padding: $s-8 $s-8 $s-8 $s-16; + padding: $s-8; border: $s-1 solid var(--context-notification-border-color); border-radius: $br-8; background-color: var(--context-notification-bg-color); @@ -63,12 +65,6 @@ stroke: var(--context-notification-icon-color); } -.link-nav { - align-self: center; - height: $s-24; - margin: 0; -} - .context-text { @include bodyMedTipography; align-self: center; @@ -84,6 +80,8 @@ .contain-html .context-text a { @include bodyMedTipography; align-self: center; + display: inline; + text-align: left; height: $s-16; margin: 0; color: var(--modal-link-foreground-color); diff --git a/frontend/src/app/main/ui/notifications/inline_notification.cljs b/frontend/src/app/main/ui/notifications/inline_notification.cljs index eb42ae22c..85bd77e98 100644 --- a/frontend/src/app/main/ui/notifications/inline_notification.cljs +++ b/frontend/src/app/main/ui/notifications/inline_notification.cljs @@ -11,11 +11,8 @@ [app.common.data.macros :as dm] [app.common.uuid :as uuid] [app.main.ui.components.link-button :as lb] - [app.main.ui.icons :as i] [rumext.v2 :as mf])) -(def ^:private neutral-icon - (i/icon-xref :msg-neutral-refactor (stl/css :icon))) (mf/defc inline-notification @@ -25,18 +22,17 @@ {::mf/props :obj} [{:keys [content actions links] :as props}] [:aside {:class (stl/css :inline-notification)} - neutral-icon - [:div {:class (stl/css :inline-text)} - 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)}])]) + 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)}])])] [:div {:class (stl/css :actions)} (for [action actions] diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss index f70b77c6d..9c82672d0 100644 --- a/frontend/src/app/main/ui/notifications/inline_notification.scss +++ b/frontend/src/app/main/ui/notifications/inline_notification.scss @@ -9,7 +9,6 @@ .inline-notification { --inline-notification-bg-color: var(--alert-background-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); @include alertShadow; position: absolute; @@ -17,12 +16,13 @@ left: 0; right: 0; display: grid; - grid-template-columns: $s-16 auto 1fr auto; - gap: $s-8; + grid-template-columns: 1fr auto; + gap: $s-24; min-height: $s-48; min-width: $s-640; - max-width: $s-712; - padding: $s-8 $s-8 $s-8 $s-16; + width: fit-content; + max-width: $s-960; + padding: $s-8; margin-inline: auto; border: $s-1 solid var(--inline-notification-border-color); border-radius: $br-8; @@ -31,17 +31,15 @@ color: var(--inline-notification-fg-color); } -.icon { - @extend .button-icon; - height: 100%; - stroke: var(--inline-notification-icon-color); -} - .inline-text { @include bodyMedTipography; align-self: center; } +.link-nav { + display: inline; +} + .link { @include bodyMedTipography; margin: 0; @@ -53,15 +51,16 @@ display: grid; grid-template-columns: none; grid-auto-flow: column; - gap: $s-8; align-self: center; + gap: $s-8; } .action-btn { - @extend .button-tertiary; + @extend .button-secondary; @include uppercaseTitleTipography; min-height: $s-32; min-width: $s-32; + width: fit-content; padding: $s-8 $s-24; border: $s-1 solid transparent; } diff --git a/frontend/src/app/main/ui/notifications/toast_notification.cljs b/frontend/src/app/main/ui/notifications/toast_notification.cljs index 2d26c956e..a43e5d5af 100644 --- a/frontend/src/app/main/ui/notifications/toast_notification.cljs +++ b/frontend/src/app/main/ui/notifications/toast_notification.cljs @@ -49,7 +49,6 @@ [{:keys [type content on-close links] :as props}] [:aside {:class (stl/css-case :toast-notification true - :with-links (some? links) :warning (= type :warning) :error (= type :error) :success (= type :success) @@ -58,15 +57,16 @@ (get-icon-by-type type) [: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) :on-click on-close} diff --git a/frontend/src/app/main/ui/notifications/toast_notification.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss index 61e72b929..aa85942be 100644 --- a/frontend/src/app/main/ui/notifications/toast_notification.scss +++ b/frontend/src/app/main/ui/notifications/toast_notification.scss @@ -19,9 +19,9 @@ grid-template-columns: $s-16 1fr auto; gap: $s-8; min-height: $s-32; - min-width: $s-500; - max-width: calc(10 * $s-100); - padding: $s-8 $s-8 $s-8 $s-16; + min-width: $s-228; + max-width: $s-400; + padding: $s-8; border: $s-1 solid var(--toast-notification-border-color); background-color: var(--toast-notification-bg-color); border-radius: $br-8; @@ -29,10 +29,6 @@ z-index: $z-index-alert; } -.with-links { - grid-template-columns: $s-16 auto 1fr auto; -} - .warning { --toast-notification-bg-color: var(--alert-background-color-warning); --toast-notification-fg-color: var(--alert-text-foreground-color-warning); @@ -69,7 +65,7 @@ } .link-nav { - height: $s-24; + display: inline; } .link { @@ -80,7 +76,7 @@ .icon { @extend .button-icon; - height: 100%; + align-self: flex-start; stroke: var(--toast-notification-icon-color); } @@ -91,9 +87,10 @@ .btn-close { @include buttonStyle; - @include flexCenter; - height: 100%; - min-width: $s-32; + align-self: flex-start; + width: $s-16; + margin: 0; + padding: 0; background-color: transparent; } diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 1a6b19a22..7cef2b214 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -161,6 +161,8 @@ #(st/emit! dv/zoom-to-fit))] [:div {:class (stl/css :options-zone)} + [:& export-progress-widget] + (case section :interactions [:* (when index @@ -169,8 +171,6 @@ :comments [:& comments-menu] [:div {:class (stl/css :view-options)}]) - [:& export-progress-widget] - [:& zoom-widget {:zoom zoom :on-increase handle-increase diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index e1eb243bb..07c883950 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -34,6 +34,7 @@ } } } + .active-users-opened { position: absolute; right: calc(-1 * $s-2); diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 0e46f05ca..83b216e73 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -203,8 +203,9 @@ [:& persistence-state-widget] - [:div {:class (stl/css :separator)}] + [:& export-progress-widget] + [:div {:class (stl/css :separator)}] [:div {:class (stl/css :zoom-section)} [:& zoom-widget-workspace @@ -215,8 +216,6 @@ :on-zoom-fit on-zoom-fit :on-zoom-selected on-zoom-selected}]] - [:& export-progress-widget] - [:div {:class (stl/css :comments-section)} [:button {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment)) diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index f860b1240..4f026eb9d 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -37,6 +37,8 @@ border-radius: $br-8; .label { @include bodyMedTipography; + height: 100%; + padding: $s-8 0; color: var(--button-tertiary-foreground-color-rest); } @@ -180,14 +182,12 @@ .status-icon { @include flexCenter; - width: $s-16; - height: $s-16; + width: $s-24; + height: $s-24; margin: 0; border-radius: $br-circle; svg { @extend .button-icon; - height: $s-12; - width: $s-12; stroke: var(--status-widget-icon-foreground-color); } } diff --git a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs index b6d976a9e..e6dae1f62 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs @@ -13,7 +13,7 @@ [okulary.core :as l] [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 black-color "var(--app-black)") (def white-color "var(--app-white)") diff --git a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs index 36500386c..b6d844db6 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs @@ -89,8 +89,8 @@ :style {:stroke-width (/ point-radius-stroke-width zoom) :stroke (cond (or selected? hover?) pc/black-color preview? pc/secondary-color - :else pc/primary-color) - :fill (cond selected? pc/primary-color + :else pc/accent-color) + :fill (cond selected? pc/accent-color :else pc/white-color)}}] [:circle {:cx x :cy y @@ -150,8 +150,8 @@ :style {:stroke-width (/ handler-stroke-width zoom) :stroke (cond (or selected? hover?) pc/black-color - :else pc/primary-color) - :fill (cond selected? pc/primary-color + :else pc/accent-color) + :fill (cond selected? pc/accent-color :else pc/white-color)}}] [:circle {:cx x :cy y @@ -288,7 +288,7 @@ [:g.path-editor {:ref editor-ref} [:path {:d (upf/format-path content) :style {:fill "none" - :stroke pc/primary-color + :stroke pc/accent-color :strokeWidth (/ 1 zoom)}}] (when (and preview (not drag-handler)) [:& path-preview {:command preview diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index 13ba8503b..23d8de43f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs @@ -26,7 +26,7 @@ (def guide-width 1) (def guide-opacity 0.7) (def guide-opacity-hover 1) -(def guide-color colors/primary) +(def guide-color colors/new-primary) (def guide-pill-width 34) (def guide-pill-height 20) (def guide-pill-corner-radius 4)