Template
Drop hardcoded white backgrounds
Product and collection card images, gallery slides, the zoom overlay image, and the products section were pinned to bg-white while every other section uses bg-background. They are transparent now and inherit the page. Skeleton fills and image-placeholder tiles keep their zinc backgrounds — those are load-state and empty-state affordances, not theming. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
This commit is contained in:
co-authored by
Claude Opus 5
parent
8167acb231
commit
489dfd5e97
@@ -132,7 +132,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
|
||||
key={index}
|
||||
onClick={() => setZoomedIndex(index)}
|
||||
aria-label={`Zoom ${image.altText || 'product image'}`}
|
||||
className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden bg-white pointer-events-none sm:pointer-events-auto sm:shrink sm:cursor-zoom-in ${
|
||||
className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden pointer-events-none sm:pointer-events-auto sm:shrink sm:cursor-zoom-in ${
|
||||
isSingle ? 'sm:col-span-2' : ''
|
||||
}`}
|
||||
>
|
||||
@@ -177,7 +177,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
|
||||
src={zoomedImage.url}
|
||||
alt={zoomedImage.altText || 'Product image'}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
className="max-h-full max-w-full object-contain bg-white"
|
||||
className="max-h-full max-w-full object-contain"
|
||||
/>
|
||||
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user