🐛 Fix shadow inputs (#7426)

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -24,7 +24,6 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.hooks :as h]
-   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
@@ -160,10 +159,15 @@
       [:div {:class (stl/css :basic-options)}
        [:div {:class (stl/css-case :shadow-info true
                                    :hidden hidden?)}
-        [:button {:class (stl/css-case :more-options true
-                                       :selected is-open)
-                  :on-click on-toggle-open}
-         deprecated-icon/menu]
+        [:> icon-button* {:on-click on-toggle-open
+                          :variant "secondary"
+                          :disabled hidden?
+                          :class (stl/css-case
+                                  :disabled hidden?
+                                  :more-options true
+                                  :selected is-open)
+                          :aria-label "open more options"
+                          :icon i/menu}]
         [:div {:class (stl/css :type-select)}
          [:& select
           {:class (stl/css :shadow-type-select)

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss

@@ -5,6 +5,9 @@
 // Copyright (c) KALEIDOS INC
 
 @use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/_utils.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .element-set {
@@ -13,20 +16,32 @@
 
 .title-spacing-shadow {
   margin: 0;
-  padding-left: deprecated.$s-2;
+  padding-inline-start: var(--sp-xxs);
 }
 
 .element-set-content {
-  margin-top: deprecated.$s-4;
-  @include deprecated.flexColumn;
+  margin-block-start: var(--sp-xs);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
 }
 
 .multiple-shadows {
-  @include deprecated.flexRow;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-xs);
 }
 
 .label {
-  @extend .mixed-bar;
+  @include t.use-typography("body-small");
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  border-radius: $br-8;
+  block-size: $sz-32;
+  padding: var(--sp-s);
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
 }
 
 .actions {
@@ -36,11 +51,11 @@
 }
 
 .shadow-element {
-  @include deprecated.flexColumn;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
   position: relative;
 
-  --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs));
-
   &:hover {
     --reorder-icon-visibility: visible;
   }
@@ -64,45 +79,38 @@
   grid-column: span 6;
   display: flex;
   align-items: center;
-  gap: deprecated.$s-1;
+  gap: px2rem(1);
+}
 
-  .more-options {
-    @extend .button-secondary;
-    height: deprecated.$s-32;
-    width: deprecated.$s-28;
-    border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-    svg {
-      @extend .button-icon;
-    }
-    &.selected {
-      background-color: var(--button-radio-background-color-active);
-      svg {
-        stroke: var(--button-radio-foreground-color-active);
-      }
-    }
-  }
+.type-select {
+  padding: 0;
+  border-radius: 0 $br-8 $br-8 0;
+  flex-grow: 1;
+}
+
+.shadow-type-select {
+  flex-grow: 1;
+  border-radius: 0 $br-8 $br-8 0;
+}
+
+// TODO: Remove these nested classes by using DS component
+.hidden {
   .type-select {
-    padding: 0;
-    border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-    flex-grow: 1;
-    .shadow-type-select {
-      flex-grow: 1;
-      border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-    }
+    cursor: default;
+    pointer-events: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-secondary);
+    stroke: var(--color-foreground-secondary);
+    background-color: transparent;
   }
-
-  &.hidden {
-    .more-options {
-      @include deprecated.hiddenElement;
-      border: deprecated.$s-1 solid var(--input-border-color-disabled);
-    }
-    .type-select {
-      @include deprecated.hiddenElement;
-      .shadow-type-select {
-        @include deprecated.hiddenElement;
-        border: deprecated.$s-1 solid var(--input-border-color-disabled);
-      }
-    }
+  .shadow-type-select {
+    cursor: default;
+    pointer-events: none;
+    box-sizing: border-box;
+    color: var(--color-foreground-secondary);
+    stroke: var(--color-foreground-secondary);
+    background-color: transparent;
+    border: $b-1 solid var(--color-background-quaternary);
   }
 }
 
@@ -123,12 +131,13 @@
 .blur-input,
 .spread-input,
 .offset-y-input {
+  // TODO remove this input by changing the input to DS component
   @extend .input-element;
-  @include deprecated.bodySmallTypography;
-}
-
-.input-label {
-  width: $sz-48;
+  @include t.use-typography("body-small");
+  .input-label {
+    padding-inline-start: var(--sp-s);
+    inline-size: px2rem(60);
+  }
 }
 
 .offset-x-input {
@@ -150,3 +159,16 @@
 .shadow-color {
   grid-column: span 6;
 }
+
+.more-options {
+  border-radius: $br-8 0 0 $br-8;
+}
+
+.selected {
+  --button-bg-color: var(--color-background-quaternary);
+  --button-fg-color: var(--color-accent-primary);
+}
+
+.disabled {
+  border: $b-1 solid var(--color-background-quaternary);
+}