change UI & fix bugs

src/views/catalogs/CatalogDetailView.vue

@@ -22,6 +22,7 @@ import {
   type PatternKind,
 } from '@/utils/catalogGallery'
 import { formatNumber } from '@/utils/format'
+import { colorSwatchStyle } from '@/utils/colorSwatch'
 import { demoProductsFor, findMockCalite } from '@/data/caliteCollections'
 
 const route = useRoute()
@@ -375,7 +376,7 @@ async function addAllToInquiry() {
                   <i
                     v-for="(color, idx) in pattern.colors"
                     :key="idx"
-                    :style="{ background: color }"
+                    :style="colorSwatchStyle(color, pattern.colorImages[idx])"
                   />
                 </div>
               </div>
@@ -709,6 +710,8 @@ async function addAllToInquiry() {
   height: 10px;
   border-radius: 999px;
   border: 1px solid rgba(0, 0, 0, 0.08);
+  background-size: cover;
+  background-position: center;
 }
 
 .inquiry-bar {