diff --git a/frontend/resources/images/icons/bug-refactor.svg b/frontend/resources/images/icons/bug-refactor.svg new file mode 100644 index 000000000..0da547da5 --- /dev/null +++ b/frontend/resources/images/icons/bug-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index ece4421f6..1181b5004 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -50,7 +50,7 @@ $color-gray-60: #1f1f1f; // UI colors $color-select: #1fdea7; -$color-distance: #db00ff; +$color-distance: #ff6fe0; $color-snap: #d383da; // Mixing Color variable for creating both light and dark colors diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 76cf29754..b96decc6d 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -162,6 +162,16 @@ } } +.button-icon-selected { + outline: none; + border: $s-1 solid transparent; + background-color: var(--button-tertiary-background-color-hover); + color: var(--button-tertiary-foreground-color-active); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } +} + .button-radio { @include buttonStyle; @include flexCenter; @@ -321,6 +331,7 @@ } &:hover { + border: $s-1 solid var(--input-background-color-hover); span { color: var(--input-foreground-color); } @@ -619,6 +630,7 @@ height: $s-24; width: $s-24; border-radius: $br-circle; + margin-left: calc(-1 * $s-4); img { border-radius: $br-circle; border: $s-2 solid var(--user-count-foreground-color); @@ -823,7 +835,7 @@ max-height: $s-300; padding: $s-2; margin: 0; - margin-top: $s-4; + margin-top: $s-1; border-radius: $br-8; z-index: $z-index-3; overflow-y: auto; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index cbaaba240..d5e21d58e 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -221,8 +221,8 @@ --empty-message-background-color: var(--color-background-tertiary); --empty-message-foreground-color: var(--color-foreground-secondary); - --user-count-background-color: var(--color-background-secondary); - --user-count-foreground-color: var(--color-accent-primary); + --user-count-background-color: var(--color-accent-primary); + --user-count-foreground-color: var(--color-background-secondary); // COLORPICKER --colorpicker-details-color: var(--color-background-quaternary); diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index d5e088c12..578b69720 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -101,6 +101,15 @@ box-sizing: border-box; } +@mixin hiddenElement { + cursor: default; + pointer-events: none; + box-sizing: border-box; + color: var(--input-foreground-color-disabled); + stroke: var(--input-foreground-color-disabled); + background-color: transparent; +} + @keyframes spin-animation { 0% { transform: rotate(0deg); diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs index 67612ebf8..95a1cb6d3 100644 --- a/frontend/src/app/config.cljs +++ b/frontend/src/app/config.cljs @@ -131,9 +131,9 @@ (= candidate platform)) (defn resolve-profile-photo-url - [{:keys [photo-id fullname name] :as profile}] + [{:keys [photo-id fullname name color] :as profile}] (if (nil? photo-id) - (avatars/generate {:name (or fullname name)}) + (avatars/generate {:name (or fullname name) :color color}) (dm/str (u/join public-uri "assets/by-id/" photo-id)))) (defn resolve-team-photo-url diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 9066ffa13..798e228c3 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -123,17 +123,17 @@ ;; --- Handle: Presence (def ^:private presence-palette - #{"#02bf51" ; darkpastelgreen text white - "#00fa9a" ; mediumspringgreen text black - "#b22222" ; firebrick text white - "#ff8c00" ; darkorage text white - "#ffd700" ; gold text black - "#ba55d3" ; mediumorchid text white - "#dda0dd" ; plum text black - "#008ab8" ; blueNCS text white - "#00bfff" ; deepskyblue text white - "#ff1493" ; deeppink text white - "#ffafda" ; carnationpink text black + #{"#82e590" ; green + "#7ad7c5" ; blue-green + "#75cafc" ; blue + "#a9bdfa" ; blue-purple + "#cbaaff" ; purple + "#f49ef7" ; pink + "#faa6b7" ; salmon + "#f9b489" ; orange + "#fdcd79" ; soft-orange + "#dee563" ; yellow + "#b1e96f" ; yellow-green }) (defn handle-presence @@ -158,10 +158,7 @@ (assoc :updated-at (dt/now)) (assoc :version version) (update :color update-color presence) - (assoc :text-color (if (contains? ["#00fa9a" "#ffd700" "#dda0dd" "#ffafda"] - (update-color (:color presence) presence)) - "#000" - "#fff")))) + (assoc :text-color "#000"))) (update-presence [presence] (-> presence diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index bb8785b92..7703ebf41 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -85,6 +85,7 @@ .big-text { @include inspectValue; + color: var(--palette-text-color); height: $s-16; } diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index bd9931d28..dab4bb13c 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -205,7 +205,7 @@ [:li {:key (str element-id "-" index) :class (stl/css-case :dropdown-element true - :is-selected (= value current-value)) + :is-selected (= (dm/str value) current-value)) :data-value value :on-click select-item} [:span {:class (stl/css :label)} label] diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index 890e6b06d..e3d038456 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -36,7 +36,7 @@ } .dropdown-element { @extend .dropdown-element-base; - color: var(--menu-foreground-color); + color: var(--menu-foreground-color-rest); .label { flex-grow: 1; width: 100%; @@ -52,6 +52,7 @@ } &.is-selected { + color: var(--menu-foreground-color); .check-icon svg { stroke: var(--menu-foreground-color); visibility: visible; diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index ba9b52baa..291e239cf 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -51,7 +51,6 @@ } .checked-element { @extend .dropdown-element-base; - .icon { @include flexCenter; height: $s-24; diff --git a/frontend/src/app/main/ui/components/shape_icon_refactor.cljs b/frontend/src/app/main/ui/components/shape_icon_refactor.cljs index 3ed99b6b9..6d3789613 100644 --- a/frontend/src/app/main/ui/components/shape_icon_refactor.cljs +++ b/frontend/src/app/main/ui/components/shape_icon_refactor.cljs @@ -22,12 +22,13 @@ (case (:type shape) :frame (cond (and (ctl/flex-layout? shape) (ctl/col? shape)) - i/flex-vertical-refactor - - (and (ctl/flex-layout? shape) (ctl/row? shape)) i/flex-horizontal-refactor - ;; TODO: GRID ICON + (and (ctl/flex-layout? shape) (ctl/row? shape)) + i/flex-vertical-refactor + + (ctl/grid-layout? shape) + i/flex-grid-refactor :else i/board-refactor) @@ -35,7 +36,7 @@ :image i/img-refactor :line (if (cts/has-images? shape) i/img-refactor i/path-refactor) :circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor) - :path (if (cts/has-images? shape) i/img-refactor i/curve-refactor) + :path (if (cts/has-images? shape) i/img-refactor i/path-refactor) :rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor) :text i/text-refactor :group (if (:masked-group shape) diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 20071dfd5..aff9e778f 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -307,6 +307,7 @@ (def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor)) (def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor)) (def boolean-union-refactor (icon-xref :boolean-union-refactor)) +(def bug-refactor (icon-xref :bug-refactor)) (def clip-content-refactor (icon-xref :clip-content-refactor)) (def clipboard-refactor (icon-xref :clipboard-refactor)) (def close-refactor (icon-xref :close-refactor)) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 6c2acae8b..81cc27129 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.left-toolbar - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.geom.point :as gpt] [app.common.media :as cm] @@ -77,8 +77,8 @@ read-only? (mf/use-ctx ctx/workspace-read-only?) show-palette-btn? (and (not ^boolean read-only?) (not ^boolean new-css-system)) - - hide-toolbar? (mf/deref refs/toolbar-visibility) + rulers? (mf/deref refs/rules?) + hide-toolbar? (mf/deref refs/toolbar-visibility) interrupt (mf/use-fn #(st/emit! :interrupt)) @@ -145,15 +145,16 @@ (if new-css-system (when-not ^boolean read-only? - [:aside {:class (dom/classnames (css :main-toolbar) true - (css :hidden-toolbar) hide-toolbar?)} - [:ul {:class (css :main-toolbar-options)} + [:aside {:class (stl/css-case :main-toolbar true + :not-rulers-present (not rulers?) + :hidden-toolbar hide-toolbar?)} + [:ul {:class (stl/css :main-toolbar-options)} [:li [:button {:title (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) - :class (when (and (nil? selected-drawtool) - (not edition)) "selected") + :class (stl/css-case :selected (and (nil? selected-drawtool) + (not edition))) :on-click interrupt} i/move-refactor]] [:* @@ -161,7 +162,7 @@ [:button {:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) - :class (when (= selected-drawtool :frame) "selected") + :class (stl/css-case :selected (= selected-drawtool :frame)) :on-click select-drawtool :data-tool "frame" :data-test "artboard-btn"} @@ -170,7 +171,7 @@ [:button {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) :aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) - :class (when (= selected-drawtool :rect) "selected") + :class (stl/css-case :selected (= selected-drawtool :rect)) :on-click select-drawtool :data-tool "rect" :data-test "rect-btn"} @@ -179,7 +180,7 @@ [:button {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) - :class (when (= selected-drawtool :circle) "selected") + :class (stl/css-case :selected (= selected-drawtool :circle)) :on-click select-drawtool :data-tool "circle" :data-test "ellipse-btn"} @@ -188,7 +189,7 @@ [:button {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) - :class (when (= selected-drawtool :text) "selected") + :class (stl/css-case :selected (= selected-drawtool :text)) :on-click select-drawtool :data-tool "text"} i/text-refactor]] @@ -199,7 +200,7 @@ [:button {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) - :class (when (= selected-drawtool :curve) "selected") + :class (stl/css-case :selected (= selected-drawtool :curve)) :on-click select-drawtool :data-tool "curve" :data-test "curve-btn"} @@ -208,30 +209,32 @@ [:button {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) - :class (when (= selected-drawtool :path) "selected") + :class (stl/css-case :selected (= selected-drawtool :path)) :on-click select-drawtool :data-tool "path" :data-test "path-btn"} - i/pentool-refactor]]]] - [:button {:class (dom/classnames (css :toolbar-handler) true) - :on-click toggle-toolbar} - [:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]] + i/path-refactor]] - [:ul {:class (dom/classnames (css :main-toolbar-panels) true)} + (when *assert* + [:li + [:button + {:title "Debugging tool" + :class (stl/css-case :selected (contains? layout :debug-panel)) + :on-click toggle-debug-panel} + i/bug-refactor]])]] + + [:button {:class (stl/css :toolbar-handler) + :on-click toggle-toolbar} + [:div {:class (stl/css :toolbar-handler-btn)}]] + + [:ul {:class (stl/css :main-toolbar-panels)} [:li [:button {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts)) :class (when (contains? layout :shortcuts) "selected") :on-click toggle-shortcuts} - i/shortcut] - - (when *assert* - [:button - {:title "Debugging tool" - :class (when (contains? layout :debug-panel) "selected") - :on-click toggle-debug-panel} - i/bug])]]]) + i/shortcut]]]]) [:aside.left-toolbar [:ul.left-toolbar-options diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.scss b/frontend/src/app/main/ui/workspace/left_toolbar.scss index d0ed4f50d..a821534c0 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/left_toolbar.scss @@ -47,9 +47,16 @@ @extend .button-icon; stroke: var(--color-foreground-secondary); } + &.selected { + background-color: var(--button-radio-background-color-active); + svg { + stroke: var(--button-radio-foreground-color-active); + } + } } } } + .toolbar-handler { @include flexCenter; @include buttonStyle; @@ -68,6 +75,7 @@ background-color: var(--palette-handler-background-color); } } + &.hidden-toolbar { top: $s-20; height: $s-16; @@ -77,6 +85,12 @@ opacity: $op-0; } } + &.not-rulers-present { + top: $s-8; + &.hidden-toolbar { + top: $s-0; + } + } ul.main-toolbar-panels { display: none; diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index b47e5337a..56853ad43 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -81,12 +81,7 @@ stroke: var(--icon-foreground); } &.selected { - border: $s-2 solid var(--palette-btn-border-color-selected); - background-color: var(--palette-btn-background-color-selected); - color: var(--palette-btn-foreground-color-selected); - svg { - stroke: var(--palette-btn-foreground-color-selected); - } + @extend .button-icon-selected; } &:hover { border: $s-2 solid transparent; diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs index a4c9f4c1e..62d128ba2 100644 --- a/frontend/src/app/main/ui/workspace/presence.cljs +++ b/frontend/src/app/main/ui/workspace/presence.cljs @@ -19,13 +19,14 @@ (mf/defc session-widget [{:keys [session profile index] :as props}] - [:li.tooltip.tooltip-bottom - {:class (stl/css :session-icon) - :style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0))} - :alt (:fullname profile)} - [:img {:alt (:fullname profile) - :style {:border-color (:color session)} - :src (cfg/resolve-profile-photo-url profile)}]]) + (let [profile (assoc profile :color (:color session))] + [:li {:class (stl/css :session-icon) + :style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0)), + "background-color" (:color session)} + :title (:fullname profile)} + [:img {:alt (:fullname profile) + :style {:background-color (:color session)} + :src (cfg/resolve-profile-photo-url profile)}]])) (mf/defc active-sessions {::mf/wrap [mf/memo]} @@ -56,7 +57,7 @@ :on-blur close-users-widget} [:ul {:class (stl/css :active-users-list)} (when (< 2 num-users) - [:span {:class (stl/css :users-num)} num-users]) + [:li [:span {:class (stl/css :users-num)} num-users]]) (for [session user-ids] [:& session-widget {:session session diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index 9dee5f8b9..e1eb243bb 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -13,8 +13,8 @@ flex-direction: row-reverse; justify-content: flex-end; align-items: center; - margin: 0 0 0 $s-4; - padding: $s-4; + margin: 0; + padding: 0 $s-4; border-radius: $br-8; .active-users-list { display: flex; @@ -24,24 +24,20 @@ .users-num { @extend .user-icon; - height: $s-28; - width: $s-28; background-color: var(--user-count-background-color); color: var(--user-count-foreground-color); - margin-left: calc(-1 * $s-4); z-index: $z-index-2; - margin-top: calc(-1 * $s-1); + border: $s-2 solid var(--user-count-foreground-color); } .session-icon { @extend .user-icon; - margin-left: calc(-1 * $s-4); } } } .active-users-opened { position: absolute; - right: calc(-1 * $s-4); - top: calc(-1 * $s-4); + right: calc(-1 * $s-2); + top: calc(-1 * $s-2); padding: $s-8; margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0; background-color: var(--menu-background-color); diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 2ff54d9bf..78b410c61 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -104,8 +104,7 @@ :class (stl/css-case :zoom-widget true :selected open?) :title (tr "workspace.header.zoom")} - [:span {:class (stl/css :label)} zoom] - [:span {:class (stl/css :icon)} i/arrow-refactor]] + [:span {:class (stl/css :label)} zoom]] [:& dropdown {:show open? :on-close close-dropdown} [:ul {:class (stl/css :dropdown)} [:li {:class (stl/css :basic-zoom-bar)} @@ -202,6 +201,9 @@ [:div {:class (stl/css :users-section)} [:& active-sessions]] + [:& persistence-state-widget] + + [:div {:class (stl/css :zoom-section)} [:& zoom-widget-workspace {:zoom zoom @@ -211,7 +213,6 @@ :on-zoom-fit on-zoom-fit :on-zoom-selected on-zoom-selected}]] - [:& persistence-state-widget] [:& export-progress-widget] [:div {:class (stl/css :comments-section)} @@ -232,6 +233,7 @@ :history-button true) :on-click toggle-history} i/history-refactor]]) + [:a {:class (stl/css :viewer-btn) :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer)) :on-click nav-to-viewer} diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index 65c28c98d..d5f2d457f 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -16,56 +16,39 @@ .users-section { position: relative; min-width: $s-32; + max-width: $s-72; + padding: $s-4 $s-6; } .zoom-section { .zoom-widget { @include buttonStyle; display: flex; align-items: center; - justify-content: flex-end; + justify-content: center; height: $s-28; - width: $s-72; - max-width: $s-72; - padding: $s-4; + max-width: $s-48; border-radius: $br-8; .label { @include titleTipography; - color: var(--menu-foreground-color); - } - .icon { - @include flexCenter; - svg { - @extend .button-icon; - stroke: var(--menu-foreground-color); - transform: rotate(90deg); - } + color: var(--button-tertiary-foreground-color-rest); } &:hover { - background-color: var(--button-tertiary-background-color-hover); .label { - color: var(--button-tertiary-foreground-color-hover); - } - .icon svg { - stroke: var(--button-tertiary-foreground-color-hover); + color: var(--button-tertiary-foreground-color-focus); } } &.selected { - background-color: var(--button-tertiary-background-color-selected); - border: $s-2 solid var(--button-tertiary-border-color-selected); .label { - color: var(--button-tertiary-foreground-color-active); - } - .icon svg { - stroke: var(--button-tertiary-foreground-color-active); + color: var(--button-tertiary-foreground-color-focus); } } } .dropdown { @extend .menu-dropdown; - right: 0; - top: $s-48; - width: $s-280; + right: $s-2; + top: calc($s-2 + $s-48); + width: $s-272; .basic-zoom-bar { display: flex; justify-content: space-between; @@ -94,14 +77,15 @@ .zoom-text { @include flexCenter; height: 100%; - min-width: $s-68; - padding: 0 $s-8; - margin: 0; + min-width: $s-48; + padding: 0; + margin: 0 $s-2; color: var(--modal-title-foreground-color); } } .reset-btn { @extend .button-tertiary; + color: var(--button-tertiary-foreground-color-hover); height: $s-28; border-radius: $br-8; } @@ -138,6 +122,10 @@ height: $s-16; width: $s-16; } + &:hover { + background-color: transparent; + border: none; + } &.selected { background-color: var(--button-tertiary-background-color-selected); border: $s-2 solid var(--button-tertiary-border-color-selected); @@ -160,6 +148,10 @@ height: $s-16; width: $s-16; } + &:hover { + background-color: transparent; + border: none; + } &.selected { background-color: var(--button-tertiary-background-color-selected); border: $s-2 solid var(--button-tertiary-border-color-selected); @@ -215,5 +207,8 @@ height: $s-16; width: $s-16; } + &:hover { + background-color: transparent; + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 2f56d53a9..82f81a7ac 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -112,7 +112,7 @@ height: calc(100vh - $s-180); } .assets-header { - padding: $s-8 0 $s-12 $s-12; + padding: $s-8 $s-12 $s-12 $s-12; .search-wrapper { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 3b7fcc7a8..6a42cc6a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -12,7 +12,6 @@ align-items: center; width: 100%; background-color: var(--layer-row-background-color); - padding-left: $s-8; .element-list-body { display: flex; @@ -144,6 +143,7 @@ --context-hover-color: var(--layer-row-foreground-color-hover); --context-hover-opacity: $op-10; background-color: var(--layer-row-background-color-hover); + box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover); &.hidden { opacity: $op-10; } @@ -197,6 +197,7 @@ } &.selected { background-color: var(--layer-row-background-color-selected); + box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected); .element-list-body { .button-content { .toggle-content { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index 36441b292..d24bce38a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -42,6 +42,7 @@ toggle-content (mf/use-fn #(swap! state* update :show-content not)) toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not)) + hidden? (:hidden blur) change! (mf/use-fn @@ -94,7 +95,8 @@ :on-click handle-add} i/add-refactor])]] (when (and open? has-value?) [:div {:class (stl/css :element-set-content)} - [:div {:class (stl/css :first-row)} + [:div {:class (stl/css-case :first-row true + :hidden hidden?)} [:div {:class (stl/css :blur-info)} [:button {:class (stl/css-case :show-more true :selected more-options?) @@ -105,7 +107,7 @@ [:div {:class (stl/css :actions)} [:button {:class (stl/css :action-btn) :on-click handle-toggle-visibility} - (if (:hidden blur) + (if hidden? i/hide-refactor i/shown-refactor)] [:button {:class (stl/css :action-btn) @@ -135,7 +137,7 @@ [:div.element-set-title-actions (when (and has-value? (not multiple?)) [:div.add-page {:on-click handle-toggle-visibility} - (if (:hidden blur) i/eye-closed i/eye)]) + (if hidden? i/eye-closed i/eye)]) (if has-value? [:div.add-page {:on-click handle-delete} i/minus] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index 5aaabc593..2c59dcdd9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -38,19 +38,20 @@ height: $s-32; width: $s-28; border-radius: $br-8 0 0 $br-8; + box-sizing: border-box; + border: $s-1 solid var(--button-secondary-background-color-rest); svg { @extend .button-icon; } &.selected { - background-color: var(--button-tertiary-background-color-hover); - color: var(--button-tertiary-foreground-color-active); + background-color: var(--button-radio-background-color-active); svg { - stroke: var(--button-tertiary-foreground-color-active); + stroke: var(--button-radio-foreground-color-active); } } } .label { - @include tabTitleTipography; + @include titleTipography; flex-grow: 1; display: flex; align-items: center; @@ -58,12 +59,17 @@ padding: 0 $s-8; border-radius: 0 $br-8 $br-8 0; background-color: var(--input-background-color); + color: var(--menu-foreground-color); + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); } } .actions { @include flexRow; .action-btn { @extend .button-tertiary; + box-sizing: border-box; + border: $s-1 solid var(--button-tertiary-background-color-rest); height: $s-32; width: $s-28; svg { @@ -71,6 +77,20 @@ } } } + + &.hidden { + .blur-info { + @include hiddenElement; + .show-more { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .label { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + } + } } .second-row { @extend .input-element; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 2979eed23..31f7faf2a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -61,7 +61,9 @@ toggle-content (mf/use-fn #(swap! state* not)) + open-content (mf/use-fn #(reset! state* true)) + close-content (mf/use-fn #(reset! state* false)) hide-fill-on-export? (:hide-fill-on-export values false) @@ -72,7 +74,9 @@ (mf/deps ids) (fn [_] (st/emit! (dc/add-fill ids {:color default-color - :opacity 1})))) + :opacity 1})) + + (when (not (some? (seq fills))) (open-content)))) on-change (mf/use-fn @@ -92,7 +96,8 @@ (fn [index] (fn [] (st/emit! (dc/remove-fill ids {:color default-color - :opacity 1} index)))) + :opacity 1} index)) + (when (= 1 (count (seq fills))) (close-content)))) on-remove-all (fn [_] (st/emit! (dc/remove-all-fills ids {:color clr/black @@ -163,7 +168,7 @@ :opacity (:fill-opacity value) :id (:fill-color-ref-id value) :file-id (:fill-color-ref-file value) - :gradient (:fill-color-gradient value) + :gradient (:fill-color-gradient value) :image (:fill-image value)} :key index :index index diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index dcf8d5753..1a25a1f00 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -193,7 +193,8 @@ :disable-image true :on-change handle-change-color :on-detach handle-detach-color}] - [:button {:class (stl/css :show-more-options) + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) :on-click toggle-more-options} i/menu-refactor]] (when show-more-options? @@ -212,10 +213,10 @@ (when (or (= :column type) (= :row type)) [:div {:class (stl/css :column-row)} [:div {:class (stl/css :advanced-row)} - [:div {:class (stl/css :select-wrapper)} + [:div {:class (stl/css :orientation-select-wrapper)} [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element :default-value (:type params) - :class (stl/css :orientation) + :class (stl/css :orientation-select) :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")} {:value :left :label (if (= type :row) (tr "workspace.options.grid.params.type.top") @@ -269,7 +270,8 @@ :className (stl/css :numeric-input) :value (or (:margin params) 0)}]] - [:button {:class (stl/css :show-more-options) + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) :on-click toggle-more-options} i/menu-refactor] (when show-more-options? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 7fffb00bb..dfbb3cadf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -34,15 +34,13 @@ height: $s-32; width: $s-28; border-radius: $br-8 0 0 $br-8; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); svg { @extend .button-icon; } &.selected { - background-color: var(--button-secondary-background-color-active); - color: var(--button-secondary-foreground-color-active); - svg { - stroke: var(--button-secondary-foreground-color-active); - } + @extend .button-icon-selected; } } .type-select-wrapper { @@ -52,6 +50,12 @@ height: $s-32; .grid-type-select { border-radius: 0; + height: 100%; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); + &:hover { + border: $s-1 solid var(--input-background-color-hover); + } } } .grid-size { @@ -70,11 +74,13 @@ width: $s-60; margin: 0; padding: 0; - border: $s-1 solid var(--input-background-color); position: relative; border-radius: 0 $br-8 $br-8 0; .column-select { height: $s-32; + border-radius: 0 $br-8 $br-8 0; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); .numeric-input { @extend .input-base; margin: 0; @@ -90,22 +96,29 @@ } &.hidden { - .show-options, + .show-options { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } .type-select-wrapper, .editable-select-wrapper { - background-color: transparent; - border: $s-1 solid var(--input-border-color-disabled); - color: var(--input-foreground-color-disabled); + @include hiddenElement; .column-select, .grid-type-select { - background-color: transparent; + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .column-select { + @include hiddenElement; + border-radius: 0 $br-8 $br-8 0; + .numeric-input { + @include hiddenElement; + } } } .grid-size { - background-color: transparent; + @include hiddenElement; border: $s-1 solid var(--input-border-color-disabled); - color: var(--input-foreground-color-disabled); - .icon { stroke: var(--input-foreground-color-disabled); } @@ -149,7 +162,7 @@ position: relative; display: flex; gap: $s-4; - .select-wrapper { + .orientation-select-wrapper { width: $s-92; padding: 0; } @@ -163,6 +176,9 @@ svg { @extend .button-icon; } + &.selected { + @extend .button-icon-selected; + } } .height { @extend .input-element; @@ -185,7 +201,7 @@ @include menuShadow; @include flexColumn; position: absolute; - top: $s-36; + top: calc($s-2 + $s-28); right: 0; width: $s-156; max-height: $s-300; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 296d96c9b..7c506f71b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -175,7 +175,8 @@ [:div {:class (stl/css :flow-element)} [:button {:class (stl/css :start-flow-btn) :on-click start-flow} - i/play-refactor] + [:span {:class (stl/css :button-icon)} + i/play-refactor]] (if @editing? [:input @@ -509,7 +510,8 @@ :open extended-open?)} ; Summary [:div {:class (stl/css :interactions-summary)} - [:div {:class (stl/css :extend-btn) + [:div {:class (stl/css-case :extend-btn true + :extended extended-open?) :on-click toggle-extended} i/menu-refactor] @@ -614,7 +616,8 @@ :on-change change-overlay-pos-type}]]] ;; Overlay position (buttons) - [:div {:class (stl/css :property-row)} + [:div {:class (stl/css-case :property-row true + :big-row true)} [:div {:class (stl/css :position-btns-wrapper)} [:button {:class (stl/css-case :direction-btn true :center-btn true @@ -767,6 +770,7 @@ [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-easing")] [:div {:class (stl/css :select-wrapper)} [:& select {:class (stl/css :easing-select) + :dropdown-class (stl/css :dropdown-upwards) :default-value (-> interaction :animation :easing) :options easing-options :on-change change-easing}]]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index a941c3208..225392afb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -56,6 +56,9 @@ @include flexColumn; .property-row { @extend .attr-row; + &.big-row { + height: 100%; + } .interaction-name { @include twoLineTextEllipsis; @include titleTipography; @@ -68,6 +71,15 @@ display: flex; align-items: center; grid-area: content; + .easing-select { + width: $s-156; + padding: 0 $s-8; + .dropdown-upwards { + bottom: $s-36; + width: $s-156; + top: unset; + } + } } .input-element-wrapper { @extend .input-element; @@ -163,11 +175,17 @@ gap: $s-4; .extend-btn { @extend .button-tertiary; - height: $s-32; + height: 100%; width: $s-28; svg { @extend .button-icon; } + &.extended { + background-color: var(--button-radio-background-color-active); + svg { + stroke: var(--button-radio-foreground-color-active); + } + } } .interactions-info { @@ -184,7 +202,7 @@ height: $s-32; width: $s-28; svg { - @extend .button-icon; + @extend .button-icon-small; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index b57836615..7dedfd571 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -151,16 +151,14 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css-case :element-set-content true - :hidden (or hidden? - blocked?))} + :hidden hidden?)} [:div {:class (stl/css :select)} [:& select {:default-value selected-blend-mode :options options :on-change handle-change-blend-mode :is-open? option-highlighted? - :class (stl/css-case :hidden-select (or hidden? - blocked?)) + :class (stl/css-case :hidden-select hidden?) :on-pointer-enter-option handle-blend-mode-enter :on-pointer-leave-option handle-blend-mode-leave}]] [:div {:class (stl/css :input) @@ -192,7 +190,8 @@ :else [:button {:on-click handle-set-unblocked - :class (stl/css :lock-btn)} i/lock-refactor])]]] + :class (stl/css-case :lock-btn true + :locked blocked?)} i/lock-refactor])]]] [:div.element-set [:div.element-set-title diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 491d091c6..2fc16a24b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -37,15 +37,12 @@ &.hidden { .hidden-select { - background-color: transparent; + @include hiddenElement; border: $s-1 solid var(--input-border-color-disabled); - color: var(--input-foreground-color-disabled); } .input { - background-color: transparent; + @include hiddenElement; border: $s-1 solid var(--input-border-color-disabled); - color: var(--input-foreground-color-disabled); - .icon { stroke: var(--input-foreground-color-disabled); } @@ -53,15 +50,6 @@ color: var(--input-foreground-color-disabled); } } - .actions { - .hidden-btn, - .lock-btn { - background-color: transparent; - svg { - stroke: var(--input-foreground-color-disabled); - } - } - } } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 2bf1ac6ec..cfbd1727f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -368,18 +368,20 @@ :class (stl/css-case :dropdown-element true :disabled true)} [:span {:class (stl/css :preset-name)} (:name size-preset)]] - [:li {:key (:name size-preset) - :class (stl/css :dropdown-element) + + (let [preset-match (and (= (:width size-preset) (d/parse-integer (:width values) 0)) + (= (:height size-preset) (d/parse-integer (:height values) 0)))] + [:li {:key (:name size-preset) + :class (stl/css-case :dropdown-element true + :match preset-match) :data-width (:width size-preset) :data-height (:height size-preset) :on-click on-preset-selected} [:div {:class (stl/css :name-wrapper)} [:span {:class (stl/css :preset-name)} (:name size-preset)] [:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]] - - (when (and (= (:width size-preset) (d/parse-integer (:width values) 0)) - (= (:height size-preset) (d/parse-integer (:height values) 0))) - [:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]] + (when preset-match + [:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]] [:& radio-buttons {:selected (or (d/name orientation) "") :on-change on-orientation-change-refactor diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 51b28c24d..7431421b0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -32,40 +32,26 @@ @include flexCenter; cursor: pointer; svg { - @extend .button-icon; + @extend .button-icon-small; stroke: var(--icon-foreground); transform: rotate(90deg); } } .custom-select-dropdown { @extend .dropdown-wrapper; + margin-top: $s-2; width: $s-252; .dropdown-element { @extend .dropdown-element-base; - - &.disabled { - pointer-events: none; - cursor: default; - .preset-name { - color: var(--menu-foreground-color); - } - - &:hover { - background-color: var(--menu-background-color); - .preset-name { - color: var(--menu-foreground-color); - } - } - } .name-wrapper { display: flex; gap: $s-8; flex-grow: 1; .preset-name { - color: var(--menu-foreground-color-hover); + color: var(--menu-foreground-color-rest); } .preset-size { - color: var(--menu-foreground-color); + color: var(--menu-foreground-color-rest); } } @@ -76,8 +62,29 @@ stroke: var(--icon-foreground); } } + + &.disabled { + pointer-events: none; + cursor: default; + .preset-name { + color: var(--menu-foreground-color); + } + } + + &.match { + .name-wrapper .preset-name { + color: var(--menu-foreground-color-hover); + } + .check-icon svg { + stroke: var(--menu-foreground-color-hover); + } + } + &:hover { background-color: var(--menu-background-color-hover); + .name-wrapper .preset-name { + color: var(--menu-foreground-color-hover); + } .check-icon svg { stroke: var(--menu-foreground-color-hover); } @@ -113,6 +120,9 @@ @extend .button-icon; stroke: var(--icon-foreground); } + &.selected { + @extend .button-icon-selected; + } } } .position { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 97f329c5c..a9e42f7df 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -71,6 +71,7 @@ (-> (l/key shadow-id) (l/derived open-state-ref))) open-shadow (mf/deref open-status-ref) + hidden? (:hidden value) on-remove-shadow (mf/use-fn @@ -163,8 +164,10 @@ (if new-css-system [:* [:div {:class (stl/css :basic-options)} - [:div {:class (stl/css :shadow-info)} - [:button {:class (stl/css :more-options) + [:div {:class (stl/css-case :shadow-info true + :hidden hidden?)} + [:button {:class (stl/css-case :more-options true + :selected open-shadow) :on-click on-toggle-open-shadow} i/menu-refactor] [:div {:class (stl/css :type-select)} @@ -176,7 +179,7 @@ [:div {:class (stl/css :actions)} [:button {:class (stl/css :action-btn) :on-click toggle-visibility} - (if (:hidden value) + (if hidden? i/hide-refactor i/shown-refactor)] [:button {:class (stl/css :action-btn) @@ -268,7 +271,7 @@ [:div.shadow-option-main-actions [:div.element-set-actions-button {:on-click toggle-visibility} - (if (:hidden value) i/eye-closed i/eye)] + (if hidden? i/eye-closed i/eye)] [:div.element-set-actions-button {:data-index index :on-click on-remove-shadow} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index 6138aed7d..b3017e94b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -57,10 +57,9 @@ @extend .button-icon; } &.selected { - background-color: var(--button-tertiary-background-color-hover); - color: var(--button-tertiary-foreground-color-active); + background-color: var(--button-radio-background-color-active); svg { - stroke: var(--button-tertiary-foreground-color-active); + stroke: var(--button-radio-foreground-color-active); } } } @@ -73,6 +72,20 @@ border-radius: 0 $br-8 $br-8 0; } } + + &.hidden { + .more-options { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .type-select { + @include hiddenElement; + .shadow-type-select { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + } + } } .actions { @include flexRow; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index aca613552..b968deb62 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -48,6 +48,8 @@ open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) + open-content (mf/use-fn #(reset! state* true)) + strokes (:strokes values) has-strokes? (or (= :multiple strokes) (some? (seq strokes))) @@ -70,6 +72,7 @@ (fn [index] (fn [] (st/emit! (dc/remove-stroke ids index))))) + on-remove-refactor (mf/use-fn (mf/deps ids) @@ -80,7 +83,7 @@ (mf/use-fn (mf/deps ids) (fn [_] - (st/emit! (dc/remove-all-strokes ids)))) + (st/emit! (dc/remove-all-strokes ids)))) handle-detach (mf/use-fn @@ -193,7 +196,8 @@ (st/emit! (dc/add-stroke ids {:stroke-style :solid :stroke-color clr/black :stroke-opacity 1 - :stroke-width 1}))) + :stroke-width 1})) + (when (not (some? (seq strokes))) (open-content))) disable-drag (mf/use-state false) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 85ab31fe2..dee18f34b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -279,17 +279,18 @@ border: $s-1 solid var(--input-background-color); position: relative; .font-size-select { + @include removeInputStyle; + @include titleTipography; height: $s-32; + height: 100%; + width: 100%; + margin: 0; + padding: 0; .numeric-input { @extend .input-base; } - span { - @include flexCenter; - svg { - @extend .button-icon-small; - } - } } + .icon { @include flexCenter; height: $s-28; @@ -300,14 +301,6 @@ transform: rotate(90deg); } } - .font-size-select { - @include removeInputStyle; - @include titleTipography; - height: 100%; - width: 100%; - margin: 0; - padding: 0; - } } .font-variant-options { padding: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 2147b59fe..230cc4cc2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -193,7 +193,8 @@ :ref dref} [:span {:class (stl/css :color-info)} [:span {:class (stl/css-case :color-name-wrapper true - :no-opacity (not opacity?) + :no-opacity (or disable-opacity + (not opacity?)) :library-name-wrapper library-color? :editing editing-text? :gradient-name-wrapper gradient-color?)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index a28a96d36..83f32b627 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -28,9 +28,6 @@ input { padding: 0; } - &.no-opacity { - border-radius: $br-8; - } .color-bullet-wrapper { height: $s-28; padding: 0 $s-2 0 $s-8; @@ -74,8 +71,15 @@ color: var(--input-foreground-color); border-radius: $br-0; } + &.no-opacity { + border-radius: $br-8; + .color-input-wrapper { + border-radius: $br-8; + } + } &:hover { background-color: var(--input-background-color-hover); + border: $s-1 solid var(--input-background-color-hover); .color-bullet-wrapper, .color-name, .detach-btn, diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss index 8bbf447dc..b315fc28c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss @@ -12,13 +12,7 @@ @include flexRow; .stroke-width-input-element { @extend .input-element; - width: $s-96; - border-radius: $br-8; - .icon { - @include flexCenter; - height: $s-32; - width: $s-20; - } + width: $s-60; } .select-wrapper { width: $s-124; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 7956ae1d0..b62a7560f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -13,7 +13,6 @@ flex: 1; width: 100%; height: var(--height, 200px); - padding-left: $s-8; .title-bar { .title { margin-left: $s-2; @@ -166,6 +165,7 @@ .element-list-body { color: var(--layer-row-foreground-color-selected); background-color: var(--layer-row-background-color-selected); + box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected); .page-actions button { svg { stroke: var(--layer-row-foreground-color-selected); @@ -181,6 +181,7 @@ .element-list-body { color: var(--layer-row-foreground-color-hover); background-color: var(--layer-row-background-color-hover); + box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover); .page-actions button { opacity: $op-10; svg { diff --git a/frontend/src/app/util/avatars.cljs b/frontend/src/app/util/avatars.cljs index 016a1838d..a42544361 100644 --- a/frontend/src/app/util/avatars.cljs +++ b/frontend/src/app/util/avatars.cljs @@ -28,7 +28,7 @@ (obj/set! context "font" (str (/ size 2) "px Arial")) (obj/set! context "textAlign" "center") - (obj/set! context "fillStyle" "#ffffff") + (obj/set! context "fillStyle" "#2e3434") (.fillText context letters (/ size 2) (/ size 1.5)) (.toDataURL canvas)))