From 13f1652c06dad989d1133a06c0558a4dcc8e6bc6 Mon Sep 17 00:00:00 2001
From: "Brian.Jiang2021" <brian.jiang@bundleb2b.net>
Date: Tue, 9 Apr 2024 16:40:30 +0800
Subject: [PATCH] fix: swatch pattern style

---
 .../src/components/form/B3ControlSwatchRadio.tsx  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx b/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx
index 8f090d21..8444b614 100644
--- a/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx
+++ b/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Box } from '@mui/material'
+import { Box } from '@mui/material'
 
 import B3ControlRectangle from './B3ControlRectangle'
 import { ColorContainer } from './styled'
@@ -11,20 +11,23 @@ export default function B3ControlSwatchRadio(props: Form.B3UIProps) {
     ...option,
     label:
       option?.image && option?.image.data ? (
-        <Avatar
-          variant="square"
+        <Box
           sx={{
             width: '22px',
             height: '22px',
 
-            '& img': {
+            '& .swatch-image-item': {
               width: '22px',
               height: '22px',
+              background: `url(${option?.image.data})`,
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'contain',
+              backgroundPosition: 'center',
             },
           }}
         >
-          <img src={option?.image.data} alt={option?.image.alt} />
-        </Avatar>
+          <div className="swatch-image-item" />
+        </Box>
       ) : (
         <ColorContainer>
           {(option.colors || []).map((color: string) => (