🐛 Fix swap panel thumbnail gallery appearance

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -207,6 +207,8 @@
   --assets-component-background-color-disabled: var(
     --off-white
   ); // We don't want this color to change with palette
+  --assets-component-border-color: var(--color-background-tertiary);
+  --assets-component-border-selected: var(--color-select);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);

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

@@ -343,9 +343,11 @@
                              :on-change toggle-list-style
                              :name "swap-listing-style"}
            [:& radio-button {:icon i/view-as-list-refactor
+                             :icon-class (stl/css :radio-button)
                              :value "list"
                              :id "swap-opt-list"}]
            [:& radio-button {:icon i/flex-grid-refactor
+                             :icon-class (stl/css :radio-button)
                              :value "grid"
                              :id "swap-opt-grid"}]]]
 
@@ -376,7 +378,8 @@
                     root-shape (ctf/get-component-root data item)
                     loop?      (or (contains? parent-components (:main-instance-id item))
                                    (contains? parent-components (:id item)))]
-                [:& component-swap-item {:item item
+                [:& component-swap-item {:key (:id item)
+                                         :item item
                                          :loop loop?
                                          :shapes shapes
                                          :file-id current-library-id

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

@@ -96,16 +96,6 @@
   }
 
   .component-swap {
-
-
-    svg {
-      stroke: var(--icon-foreground);
-      fill: var(--icon-foreground);
-      height: $s-12;
-      width: $s-12;
-      cursor: pointer;
-    }
-
     .search-field {
       display: flex;
       align-items: center;
@@ -175,8 +165,6 @@
       padding-left: $s-20;
     }
 
-
-
     .listing-options-wrapper {
       width: 100%;
     }
@@ -262,6 +250,9 @@
           }
         }
       }
+    }
+  }
+}
 
 .component-group {
   @include titleTipography;
@@ -276,7 +267,6 @@
     height: $s-8;
     width: $s-8;
   }
-
   div {
     display: flex;
     width: 90%;
@@ -297,23 +287,25 @@
     }
   }
 }
-    }
-  }
 
 .component-grid {
   display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-auto-rows: calc(10vh + $s-16);
+  grid-template-columns: repeat(2, $s-124);
+  grid-auto-rows: $s-124;
   gap: $s-4;
-    margin: 0 $s-4 0 $s-8;
+}
+
 .grid-cell {
   @include flexCenter;
+  place-items: center;
   flex-wrap: wrap;
   position: relative;
   padding: $s-8;
   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;
   img {
     height: auto;
@@ -324,9 +316,10 @@
     border: 0;
   }
   svg {
-        height: 10vh;
-        width: 10vh;
+    height: 100%;
+    width: 100%;
     stroke: none;
+    object-fit: contain;
   }
   .component-name {
     @include titleTipography;
@@ -351,7 +344,7 @@
   }
 
   &.selected {
-        border: $s-1 solid var(--assets-item-border-color);
+    --assets-component-current-border-color: var(--assets-item-border-color);
     .component-name {
       color: var(--assets-item-name-foreground-color-hover);
     }
@@ -373,8 +366,6 @@
     }
   }
 }
-  }
-}
 
 .library-name {
   @include titleTipography;
@@ -389,3 +380,13 @@
   margin: $s-16 $s-4 0 $s-12;
   color: var(--title-foreground-color);
 }
+
+.radio-button {
+  svg {
+    stroke: var(--icon-foreground);
+    fill: var(--icon-foreground);
+    height: $s-12;
+    width: $s-12;
+    cursor: pointer;
+  }
+}