deploy

client/src/entities/product/ui/ProductCard.tsx

@@ -153,8 +153,15 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
             <Chip
               label={product.category.name}
               size="small"
-              variant="outlined"
-              sx={{ alignSelf: 'flex-start', fontWeight: 500, fontSize: '0.7rem' }}
+              color="primary"
+              sx={{
+                alignSelf: 'flex-start',
+                fontWeight: 600,
+                fontSize: '0.65rem',
+                height: 22,
+                letterSpacing: 0.3,
+                textTransform: 'uppercase',
+              }}
             />
           )}
 
@@ -175,14 +182,30 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
           {(product.materials?.length ?? 0) > 0 && (
             <Stack direction="row" spacing={0.5} useFlexGap sx={{ flexWrap: 'wrap' }}>
               {materials.map((m) => (
-                <Chip key={m} label={m} size="small" variant="outlined" sx={{ fontSize: '0.7rem', height: 22 }} />
+                <Chip
+                  key={m}
+                  label={m}
+                  size="small"
+                  sx={{
+                    fontSize: '0.7rem',
+                    height: 22,
+                    bgcolor: 'grey.100',
+                    color: 'text.secondary',
+                    fontWeight: 500,
+                  }}
+                />
               ))}
               {moreMaterials > 0 && (
                 <Chip
                   label={`+${moreMaterials}`}
                   size="small"
-                  variant="outlined"
-                  sx={{ fontSize: '0.7rem', height: 22 }}
+                  sx={{
+                    fontSize: '0.7rem',
+                    height: 22,
+                    bgcolor: 'grey.100',
+                    color: 'text.secondary',
+                    fontWeight: 500,
+                  }}
                 />
               )}
             </Stack>