🐛 Fix small interface errors

frontend/resources/images/icons/bug-refactor.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 14.188V4.925m0 9.262c2.599 0 4.706-1.978 4.706-4.419V4.925H8m0 9.262c-2.599 0-4.706-1.978-4.706-4.419V4.925H8m4.706 1.824l2.275-2.311m-.32 9.624l-2.276-2.312M15.5 9.312h-2.794M3.294 6.75L1.02 4.438m.32 9.624l2.276-2.312M.5 9.312h2.794m7.301-4.387h-5.19v-.488C5.405 3.091 6.567 2 8 2c1.433 0 2.595 1.091 2.595 2.438v.487z"/>
+</svg>

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

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;

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-background-color: var(--color-accent-primary);
-  --user-count-foreground-color: var(--color-accent-primary);
+  --user-count-foreground-color: var(--color-background-secondary);
 
   // COLORPICKER
   --colorpicker-details-color: var(--color-background-quaternary);

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);

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

frontend/src/app/main/data/workspace/notifications.cljs

@@ -123,17 +123,17 @@
 ;; --- Handle: Presence
 
 (def ^:private presence-palette
-  #{"#02bf51" ; darkpastelgreen text white
+  #{"#82e590" ; green
-    "#00fa9a" ; mediumspringgreen text black
+    "#7ad7c5" ; blue-green
-    "#b22222" ; firebrick text white
+    "#75cafc" ; blue
-    "#ff8c00" ; darkorage text white
+    "#a9bdfa" ; blue-purple
-    "#ffd700" ; gold text black
+    "#cbaaff" ; purple
-    "#ba55d3" ; mediumorchid text white
+    "#f49ef7" ; pink
-    "#dda0dd" ; plum text black
+    "#faa6b7" ; salmon
-    "#008ab8" ; blueNCS text white
+    "#f9b489" ; orange
-    "#00bfff" ; deepskyblue text white
+    "#fdcd79" ; soft-orange
-    "#ff1493" ; deeppink text white
+    "#dee563" ; yellow
-    "#ffafda" ; carnationpink text black
+    "#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"]
+                (assoc :text-color "#000")))
-                                                  (update-color (:color presence) presence))
-                                     "#000"
-                                     "#fff"))))
 
           (update-presence [presence]
             (-> presence

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;
 }
 

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]

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;

frontend/src/app/main/ui/components/select.scss

@@ -51,7 +51,6 @@
   }
   .checked-element {
     @extend .dropdown-element-base;
-
     .icon {
       @include flexCenter;
       height: $s-24;

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)

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))

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,7 +77,7 @@
         read-only?           (mf/use-ctx ctx/workspace-read-only?)
 
         show-palette-btn?    (and (not ^boolean read-only?) (not ^boolean new-css-system))
-
+        rulers?              (mf/deref refs/rules?)
         hide-toolbar?        (mf/deref refs/toolbar-visibility)
 
         interrupt
@@ -145,15 +145,16 @@
 
     (if new-css-system
       (when-not ^boolean read-only?
-        [:aside {:class (dom/classnames (css :main-toolbar) true
+        [:aside {:class (stl/css-case :main-toolbar true
-                                        (css :hidden-toolbar) hide-toolbar?)}
+                                      :not-rulers-present (not rulers?)
-         [:ul {:class (css :main-toolbar-options)}
+                                      :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)
+             :class (stl/css-case :selected (and (nil? selected-drawtool)
-                               (not edition)) "selected")
+                                                 (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]]]]
+             i/path-refactor]]
-         [:button {:class (dom/classnames (css :toolbar-handler) true)
-                   :on-click toggle-toolbar}
-          [:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
 
-         [: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]
+            i/shortcut]]]])
-
-           (when *assert*
-             [:button
-              {:title "Debugging tool"
-               :class (when (contains? layout :debug-panel) "selected")
-               :on-click toggle-debug-panel}
-              i/bug])]]])
 
       [:aside.left-toolbar
        [:ul.left-toolbar-options

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;

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);
+          @extend .button-icon-selected;
-          background-color: var(--palette-btn-background-color-selected);
-          color: var(--palette-btn-foreground-color-selected);
-          svg {
-            stroke: var(--palette-btn-foreground-color-selected);
-          }
         }
         &:hover {
           border: $s-2 solid transparent;

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
+  (let [profile (assoc profile :color (:color session))]
-   {:class (stl/css :session-icon)
+    [:li {:class (stl/css :session-icon)
-    :style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0))}
+          :style #js {"zIndex" (str (or (+ 1 (* -1 index)) 0)),
-    :alt (:fullname profile)}
+                      "background-color" (:color session)}
+          :title (:fullname profile)}
      [:img {:alt (:fullname profile)
-          :style {:border-color (:color session)}
+            :style {:background-color (:color session)}
-          :src (cfg/resolve-profile-photo-url profile)}]])
+            :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

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;
+  margin: 0;
-  padding: $s-4;
+  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);
+  right: calc(-1 * $s-2);
-  top: calc(-1 * $s-4);
+  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);

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 :label)} zoom]]
-      [:span {:class (stl/css :icon)} i/arrow-refactor]]
      [:& 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}

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-48;
-      max-width: $s-72;
-      padding: $s-4;
       border-radius: $br-8;
       .label {
         @include titleTipography;
-        color: var(--menu-foreground-color);
+        color: var(--button-tertiary-foreground-color-rest);
-      }
-      .icon {
-        @include flexCenter;
-        svg {
-          @extend .button-icon;
-          stroke: var(--menu-foreground-color);
-          transform: rotate(90deg);
-        }
       }
 
       &:hover {
-        background-color: var(--button-tertiary-background-color-hover);
         .label {
-          color: var(--button-tertiary-foreground-color-hover);
+          color: var(--button-tertiary-foreground-color-focus);
-        }
-        .icon svg {
-          stroke: var(--button-tertiary-foreground-color-hover);
         }
       }
       &.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);
+          color: var(--button-tertiary-foreground-color-focus);
-        }
-        .icon svg {
-          stroke: var(--button-tertiary-foreground-color-active);
         }
       }
     }
     .dropdown {
       @extend .menu-dropdown;
-      right: 0;
+      right: $s-2;
-      top: $s-48;
+      top: calc($s-2 + $s-48);
-      width: $s-280;
+      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;
+            min-width: $s-48;
-            padding: 0 $s-8;
+            padding: 0;
-            margin: 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;
+    }
   }
 }

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;

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 {

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]

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);
+            background-color: var(--button-radio-background-color-active);
-            color: var(--button-tertiary-foreground-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;

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

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?

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);
+              @extend .button-icon-selected;
-              color: var(--button-secondary-foreground-color-active);
-              svg {
-                stroke: var(--button-secondary-foreground-color-active);
-              }
             }
           }
           .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;
+              @include hiddenElement;
-              border: $s-1 solid var(--input-border-color-disabled);
-              color: var(--input-foreground-color-disabled);
               .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;

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

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;
             }
           }
         }

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?
+                                   :hidden hidden?)}
-                                               blocked?))}
         [: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?
+           :class (stl/css-case :hidden-select hidden?)
-                                                   blocked?))
            :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

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);
-          }
-        }
-      }
     }
   }
 }

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)]]
+
+                 (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 :dropdown-element)
+                       :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 preset-match
-                  (when (and (= (:width size-preset) (d/parse-integer (:width values) 0))
+                    [:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]]
-                             (= (:height size-preset) (d/parse-integer (:height values) 0)))
-                    [:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]]
 
           [:& radio-buttons {:selected (or (d/name orientation) "")
                              :on-change on-orientation-change-refactor

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 {

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)}
+         [:div {:class (stl/css-case :shadow-info true
-          [:button {:class (stl/css :more-options)
+                                     :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}

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);
+              background-color: var(--button-radio-background-color-active);
-              color: var(--button-tertiary-foreground-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;

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)
@@ -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)
 

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;

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?)}

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,

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;
+      width: $s-60;
-      border-radius: $br-8;
-      .icon {
-        @include flexCenter;
-        height: $s-32;
-        width: $s-20;
-      }
     }
     .select-wrapper {
       width: $s-124;

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 {

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)))