💄 Style improvements in the component list & grid (#7185)

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -26,6 +26,7 @@
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -169,8 +170,11 @@
           :container container
           :is-hidden (not visible?)}]
         (when (ctc/is-variant? component)
-          [:span {:class (stl/css-case :variant-mark-cell listing-thumbs? :variant-mark true :component-icon true)
-                  :title (tr "workspace.assets.components.num-variants" num-variants)} i/variant])])]))
+          [:span {:class (stl/css-case :variant-mark-cell listing-thumbs?
+                                       :variant-mark true
+                                       :component-icon true)
+                  :title (tr "workspace.assets.components.num-variants" num-variants)}
+           [:> icon* {:icon-id "variant" :size "s"}]])])]))
 
 
 (defn- count-leaves

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -128,7 +128,8 @@
   column-gap: $s-8;
   height: $s-44;
   padding-right: $s-4;
-  padding: $s-2;
+  padding: $s-1;
+  border: $s-1 solid transparent;
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
   cursor: pointer;
@@ -149,10 +150,6 @@
         input {
           color: var(--input-foreground-color-active);
         }
-
-        span svg {
-          stroke: var(--input-foreground-color-active);
-        }
       }
     }
   }
@@ -241,9 +238,5 @@
   height: $s-24;
   width: $s-24;
   order: 3;
-
-  svg {
-    @extend .button-icon-small;
-    stroke: var(--color-accent-secondary);
-  }
+  color: var(--color-accent-secondary);
 }

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

@@ -512,7 +512,6 @@
         item-ref       (mf/use-ref)
         visible?       (h/use-visible item-ref :once? true)]
     [:div {:ref item-ref
-           :title (if is-search (:full-name item) (:name item))
            :class (stl/css-case :component-item (not listing-thumbs)
                                 :grid-cell listing-thumbs
                                 :selected (= (:id item) component-id)
@@ -526,12 +525,15 @@
          :root-shape root-shape
          :component item
          :container container}])
-     [:span  {:class (stl/css-case :component-name true
-                                   :selected (= (:id item) component-id))}
+     [:span {:title (if is-search (:full-name item) (:name item))
+             :class (stl/css-case :component-name true
+                                  :selected (= (:id item) component-id))}
       (if is-search (:full-name item) (:name item))]
      (when (ctk/is-variant? item)
-       [:span {:class (stl/css-case :variant-mark-cell listing-thumbs :variant-icon true)
-               :title (tr "workspace.assets.components.num-variants" num-variants)} i/variant])]))
+       [: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"}]])]))
 
 (mf/defc component-group-item*
   [{:keys [item on-enter-group]}]

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

@@ -222,7 +222,7 @@
   display: flex;
   align-items: center;
   margin-bottom: $s-4;
-  padding: $s-2 $s-8 $s-2 $s-2;
+  padding: $s-1 $s-8 $s-1 $s-1;
   gap: $s-8;
   font-size: $s-12;
   cursor: pointer;
@@ -231,6 +231,7 @@
   border-radius: $br-8;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color);
+  border: $s-1 solid transparent;
 
   .variant-icon {
     background-color: none;
@@ -246,14 +247,14 @@
   .component-img {
     flex: 0 0 $s-40;
     background-color: var(--assets-component-background-color);
-    border-radius: $br-8;
+    border-radius: $br-6;
     height: $s-40;
     width: $s-40;
     padding: $s-2;
   }
 
-  .selected {
-    color: var(--assets-item-name-foreground-color-hover);
+  &.selected {
+    border: $s-1 solid var(--assets-item-border-color);
   }
 
   &:hover {
@@ -288,13 +289,10 @@
   border-radius: $br-8;
   background-color: var(--assets-component-background-color);
   overflow: hidden;
-  --assets-component-current-border-color: var(--assets-component-border-color);
-  border: $s-4 solid var(--assets-component-current-border-color);
   cursor: pointer;
 
   .variant-icon {
     background-color: var(--color-background-tertiary);
-    padding: 6px;
   }
 
   img {
@@ -306,10 +304,9 @@
     border: 0;
   }
 
-  svg {
+  .component-img {
     height: 100%;
     width: 100%;
-    stroke: none;
     object-fit: contain;
   }
 
@@ -334,13 +331,22 @@
   &:hover {
     .component-name {
       display: block;
-      color: var(--assets-item-name-foreground-color-hover);
-      background: var(--assets-item-background-color-hover);
     }
   }
 
   &.selected {
-    --assets-component-current-border-color: var(--assets-item-border-color);
+    border: $s-2 solid var(--assets-item-border-color);
+
+    &::before {
+      content: " ";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: $s-4 solid var(--assets-component-second-border-selected);
+      border-radius: $br-8;
+    }
 
     .component-name {
       color: var(--assets-item-name-foreground-color-hover);
@@ -729,17 +735,8 @@
   @include flexCenter;
   height: $s-24;
   width: $s-24;
-  border-radius: $br-8;
-  order: 3;
-
-  svg {
-    height: 100%;
-    width: 100%;
-    background-color: transparent;
-    margin: 0;
-
-    stroke: var(--color-accent-secondary);
-  }
+  color: var(--color-accent-secondary);
+  border-radius: $s-8;
 }
 
 .variant-mark-cell {