💄 Adjust design details of some components (#7225)

frontend/src/app/main/ui/ds/controls/combobox.cljs

@@ -264,7 +264,7 @@
                   :aria-controls listbox-id
                   :class (stl/css :button-toggle-list)
                   :on-click on-click}
-         [:> i/icon* {:icon-id i/arrow
+         [:> i/icon* {:icon-id i/arrow-down
                       :class (stl/css :arrow)
                       :size "s"
                       :aria-hidden true

frontend/src/app/main/ui/ds/controls/combobox.scss

@@ -9,28 +9,28 @@
 @use "../typography.scss" as *;
 
 .wrapper {
-  --combobox-icon-fg-color: var(--color-foreground-secondary);
-  --combobox-fg-color: var(--color-foreground-primary);
-  --combobox-bg-color: var(--color-background-tertiary);
+  --combobox-icon-color: var(--color-icon-default);
+  --combobox-text-color: var(--color-foreground-primary);
+  --combobox-background-color: var(--color-background-tertiary);
   --combobox-outline-color: none;
   --combobox-border-color: none;
   --combobox-error-outline-color: var(--color-accent-error);
 
+  &:hover:not(.disabled) {
+    --combobox-background-color: var(--color-background-quaternary);
+  }
+
+  &:focus-within:not(.disabled) {
+    --combobox-outline-color: var(--color-accent-primary);
+    --combobox-background-color: var(--color-background-primary);
+  }
+
   @include use-typography("body-small");
   position: relative;
   display: grid;
   grid-template-rows: auto;
   gap: var(--sp-xxs);
   width: 100%;
-
-  &:hover:not(.disabled) {
-    --combobox-bg-color: var(--color-background-quaternary);
-  }
-
-  &:focus-within:not(.disabled) {
-    --combobox-outline-color: var(--color-accent-primary);
-    --combobox-bg-color: var(--color-background-primary);
-  }
 }
 
 .combobox {
@@ -44,14 +44,13 @@
   border-radius: $br-8;
   outline: $b-1 solid var(--combobox-outline-color);
   border: $b-1 solid var(--combobox-border-color);
-  background: var(--combobox-bg-color);
-  color: var(--combobox-fg-color);
+  background: var(--combobox-background-color);
+  color: var(--combobox-text-color);
   appearance: none;
 }
 
 .arrow {
-  color: var(--combobox-icon-fg-color);
-  transform: rotate(90deg);
+  color: var(--combobox-icon-color);
 }
 
 .header {
@@ -62,7 +61,7 @@
 
 .header-icon {
   grid-template-columns: auto 1fr;
-  color: var(--combobox-icon-fg-color);
+  color: var(--combobox-icon-color);
 }
 
 .input {
@@ -74,7 +73,7 @@
   text-align: left;
   inline-size: 100%;
   padding-inline-start: var(--sp-xxs);
-  color: var(--combobox-fg-color);
+  color: var(--combobox-text-color);
 
   &::placeholder {
     color: var(--input-placeholder-color);
@@ -88,9 +87,10 @@
 }
 
 .disabled {
-  --combobox-bg-color: var(--color-background-primary);
+  cursor: default;
+  --combobox-background-color: var(--color-background-primary);
   --combobox-border-color: var(--color-background-quaternary);
-  --combobox-fg-color: var(--color-foreground-secondary);
+  --combobox-text-color: var(--color-foreground-secondary);
 }
 
 .has-error {

frontend/src/app/main/ui/ds/controls/select.cljs

@@ -204,9 +204,9 @@
                                     :header-label-dimmed empty-selected-id?)}
         (if ^boolean empty-selected-id? "--" label)]]
 
-      [:> i/icon* {:icon-id i/arrow
+      [:> i/icon* {:icon-id i/arrow-down
                    :class (stl/css :arrow)
-                   :size "m"
+                   :size "s"
                    :aria-hidden true}]]
 
      (when ^boolean is-open

frontend/src/app/main/ui/ds/controls/select.scss

@@ -9,15 +9,15 @@
 @use "../typography.scss" as *;
 
 .select-wrapper {
-  --select-icon-fg-color: var(--color-foreground-secondary);
-  --select-fg-color: var(--color-foreground-primary);
-  --select-fg-color-dimmed: var(--color-foreground-secondary);
-  --select-bg-color: var(--color-background-tertiary);
+  --select-icon-color: var(--color-icon-default);
+  --select-text-color: var(--color-foreground-primary);
+  --select-text-color-dimmed: var(--color-foreground-secondary);
+  --select-background-color: var(--color-background-tertiary);
   --select-outline-color: none;
   --select-border-color: none;
 
   &:hover {
-    --select-bg-color: var(--color-background-quaternary);
+    --select-background-color: var(--color-background-quaternary);
   }
 
   @include use-typography("body-small");
@@ -30,13 +30,14 @@
 
 .select {
   &:focus-visible {
+    --select-background-color: var(--color-background-quaternary);
     --select-outline-color: var(--color-accent-primary);
   }
 
   &:disabled {
-    --select-bg-color: var(--color-background-primary);
+    --select-background-color: var(--color-background-primary);
     --select-border-color: var(--color-background-quaternary);
-    --select-fg-color: var(--color-foreground-secondary);
+    --select-text-color: var(--color-foreground-secondary);
   }
 
   display: grid;
@@ -49,14 +50,13 @@
   border-radius: $br-8;
   outline: $b-1 solid var(--select-outline-color);
   border: $b-1 solid var(--select-border-color);
-  background: var(--select-bg-color);
-  color: var(--select-fg-color);
+  background: var(--select-background-color);
+  color: var(--select-text-color);
   appearance: none;
 }
 
 .arrow {
-  color: var(--select-icon-fg-color);
-  transform: rotate(90deg);
+  color: var(--select-icon-color);
 }
 
 .select-header {
@@ -74,14 +74,14 @@
   min-width: 0;
   padding-inline-start: var(--sp-xxs);
   text-align: left;
-  color: var(--select-fg-color);
+  color: var(--select-text-color);
 }
 
 .header-label-dimmed {
-  color: var(--select-fg-color-dimmed);
+  color: var(--select-text-color-dimmed);
 }
 
 .header-icon {
   grid-template-columns: auto 1fr;
-  color: var(--select-icon-fg-color);
+  color: var(--select-icon-color);
 }

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

@@ -32,10 +32,9 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.select :refer [select*]]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.product.input-with-meta :refer [input-with-meta*]]
    [app.main.ui.hooks :as h]
-   [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.sidebar.options.menus.variants-help-modal]
    [app.util.debug :as dbg]
@@ -381,8 +380,8 @@
 
      (if malformed-msg
        [:div {:class (stl/css :variant-warning-wrapper)}
-        [:> icon* {:icon-id "msg-neutral"
-                   :class (stl/css :variant-warning-darken)}]
+        [:> i/icon* {:icon-id i/msg-neutral
+                     :class (stl/css :variant-warning-darken)}]
         [:div {:class (stl/css :variant-warning-highlight)}
          (str malformed-msg " " (tr "workspace.options.component.variant.malformed.structure.title"))]
         [:div {:class (stl/css :variant-warning-darken)}
@@ -390,8 +389,8 @@
 
        (when duplicated-msg
          [:div {:class (stl/css :variant-warning-wrapper)}
-          [:> icon* {:icon-id "msg-neutral"
-                     :class (stl/css :variant-warning-darken)}]
+          [:> i/icon* {:icon-id i/msg-neutral
+                       :class (stl/css :variant-warning-darken)}]
           [:div {:class (stl/css :variant-warning-highlight)}
            (str duplicated-msg)]]))]))
 
@@ -479,8 +478,8 @@
 
      (if (seq malformed-comps)
        [:div {:class (stl/css :variant-warning-wrapper)}
-        [:> icon* {:icon-id "msg-neutral"
-                   :class (stl/css :variant-warning-darken)}]
+        [:> i/icon* {:icon-id i/msg-neutral
+                     :class (stl/css :variant-warning-darken)}]
         [:div {:class (stl/css :variant-warning-highlight)}
          (tr "workspace.options.component.variant.malformed.copy")]
         [:button {:class (stl/css :variant-warning-button)
@@ -489,8 +488,8 @@
 
        (when (seq duplicated-comps)
          [:div {:class (stl/css :variant-warning-wrapper)}
-          [:> icon* {:icon-id "msg-neutral"
-                     :class (stl/css :variant-warning-darken)}]
+          [:> i/icon* {:icon-id i/msg-neutral
+                       :class (stl/css :variant-warning-darken)}]
           [:div {:class (stl/css :variant-warning-highlight)}
            (tr "workspace.options.component.variant.duplicated.copy.title")]
           [:button {:class (stl/css :variant-warning-button)
@@ -532,7 +531,7 @@
        [:span {:class (stl/css-case :variant-mark-cell listing-thumbs
                                     :variant-icon true)
                :title (tr "workspace.assets.components.num-variants" num-variants)}
-        [:> icon* {:icon-id "variant" :size "s"}]])]))
+        [:> i/icon* {:icon-id i/variant :size "s"}]])]))
 
 (mf/defc component-group-item*
   [{:keys [item on-enter-group]}]
@@ -712,7 +711,7 @@
                          :id "swap-component-search-filter"
                          :value (:term filters)
                          :placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name]))
-                         :icon-id "search"}]]
+                         :icon-id i/search}]]
 
        [:& select {:class (stl/css :select-library)
                    :default-value current-library-id
@@ -915,8 +914,8 @@
         (if swap-opened?
           [:button {:class (stl/css :title-back)
                     :on-click on-component-back}
-           [:> icon* {:icon-id "arrow-left"
-                      :size "s"}]
+           [:> i/icon* {:icon-id i/arrow-left
+                        :size "s"}]
            [:span (tr "workspace.options.component")]]
 
           [:*
@@ -952,16 +951,16 @@
            [:div {:class (stl/css :component-wrapper)}
 
             [:button {:class (stl/css-case :component-name-wrapper true
-                                           :without-menu (not show-menu?)
-                                           :swappeable (and can-swap? (not swap-opened?)))
+                                           :without-menu (not show-menu?))
                       :data-testid "swap-component-btn"
-                      :on-click open-component-panel}
+                      :on-click open-component-panel
+                      :disabled (or swap-opened? (not can-swap?))}
 
              [:div {:class (stl/css :component-icon)}
-              [:> icon* {:size "s"
-                         :icon-id (if main-instance?
-                                    (if is-variant? "variant" "component")
-                                    "component-copy")}]]
+              [:> i/icon* {:size "s"
+                           :icon-id (if main-instance?
+                                      (if is-variant? i/variant i/component)
+                                      i/component-copy)}]]
 
              [:div {:class (stl/css :component-name-outside)}
               [:div {:class (stl/css :component-name)}
@@ -981,7 +980,7 @@
                [:button {:class (stl/css-case :component-menu-btn true
                                               :selected menu-open?)
                          :on-click on-menu-click}
-                [:> icon* {:icon-id "menu"}]]
+                [:> i/icon* {:icon-id i/menu}]]
 
                [:> component-ctx-menu* {:show menu-open?
                                         :on-close on-menu-close
@@ -1171,11 +1170,12 @@
 
            [:div {:class (stl/css :component-wrapper)}
 
-            [:button {:class (stl/css :component-name-wrapper)}
+            [:button {:class (stl/css :component-name-wrapper)
+                      :disabled true}
 
              [:div {:class (stl/css :component-icon)}
-              [:> icon* {:size "s"
-                         :icon-id "component"}]]
+              [:> i/icon* {:size "s"
+                           :icon-id i/component}]]
 
              [:div {:class (stl/css :component-name-outside)}
               [:div {:class (stl/css :component-name)}
@@ -1190,7 +1190,7 @@
                [:button {:class (stl/css-case :component-menu-btn true
                                               :selected menu-open?)
                          :on-click on-menu-click}
-                [:> icon* {:icon-id "menu"}]]
+                [:> i/icon* {:icon-id i/menu}]]
 
                [:> component-ctx-menu* {:show menu-open?
                                         :on-close on-menu-close
@@ -1230,8 +1230,8 @@
 
           (if malformed?
             [:div {:class (stl/css :variant-warning-wrapper)}
-             [:> icon* {:icon-id "msg-neutral"
-                        :class (stl/css :variant-warning-darken)}]
+             [:> i/icon* {:icon-id i/msg-neutral
+                          :class (stl/css :variant-warning-darken)}]
              [:div {:class (stl/css :variant-warning-highlight)}
               (tr "workspace.options.component.variant.malformed.group.title")]
              [:button {:class (stl/css :variant-warning-button)
@@ -1240,8 +1240,8 @@
 
             (when duplicated?
               [:div {:class (stl/css :variant-warning-wrapper)}
-               [:> icon* {:icon-id "msg-neutral"
-                          :class (stl/css :variant-warning-darken)}]
+               [:> i/icon* {:icon-id i/msg-neutral
+                            :class (stl/css :variant-warning-darken)}]
                [:div {:class (stl/css :variant-warning-highlight)}
                 (tr "workspace.options.component.variant.duplicated.group.title")]
                [:button {:class (stl/css :variant-warning-button)

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

@@ -91,11 +91,13 @@
     border-radius: $br-8;
   }
 
-  &.swappeable {
-    &:hover {
-      background-color: var(--assets-item-background-color-hover);
-      color: var(--assets-item-name-foreground-color-hover);
-    }
+  &:focus {
+    outline: $s-1 solid var(--color-accent-primary);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--assets-item-background-color-hover);
+    color: var(--assets-item-name-foreground-color-hover);
   }
 }
 
@@ -749,6 +751,7 @@
 .combine-variant-button {
   @include buttonStyle;
   @include uppercaseTitleTipography;
+  grid-column: span 8;
   cursor: default;
   display: flex;
   justify-content: center;
@@ -763,4 +766,8 @@
     background-color: var(--assets-item-background-color-hover);
     color: var(--color-foreground-primary);
   }
+
+  &:focus {
+    outline: $s-1 solid var(--color-accent-primary);
+  }
 }