From c22b668bc5022479252e6aad0de18c81ed833964 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Wed, 15 Apr 2026 14:47:16 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20update=20/color-picker/=20=E2=86=92=20/c?=
 =?UTF-8?q?olor/=20in=20estore=20ColorPicker=20and=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ColorPicker.tsx was constructing image URLs with the old /color-picker/
prefix. globals.css had the same for the balloon-mask.svg SVG mask.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 estore/src/app/globals.css            | 4 ++--
 estore/src/components/ColorPicker.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/estore/src/app/globals.css b/estore/src/app/globals.css
index 726e335..7469cf2 100644
--- a/estore/src/app/globals.css
+++ b/estore/src/app/globals.css
@@ -135,11 +135,11 @@
   position: relative;
   z-index: 1;
   transition: transform 0.2s ease;
-  -webkit-mask-image: url('/shop/color-picker/images/balloon-mask.svg');
+  -webkit-mask-image: url('/color/images/balloon-mask.svg');
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
-  mask-image: url('/shop/color-picker/images/balloon-mask.svg');
+  mask-image: url('/color/images/balloon-mask.svg');
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
diff --git a/estore/src/components/ColorPicker.tsx b/estore/src/components/ColorPicker.tsx
index 3f833de..522edbb 100644
--- a/estore/src/components/ColorPicker.tsx
+++ b/estore/src/components/ColorPicker.tsx
@@ -305,7 +305,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                           width:        '16px',
                           height:       '16px',
                           borderRadius: '50%',
-                          background:   c.image ? `url('/color-picker/${c.image}') center/cover` : c.hex,
+                          background:   c.image ? `url('/color/${c.image}') center/cover` : c.hex,
                           border:       '1px solid rgba(0,0,0,0.1)',
                           flexShrink:   0,
                           display:      'inline-block',
@@ -356,7 +356,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                               width:        '13px',
                               height:       '13px',
                               borderRadius: '50%',
-                              background:   c.image ? `url('/color-picker/${c.image}') center/cover` : c.hex,
+                              background:   c.image ? `url('/color/${c.image}') center/cover` : c.hex,
                               border:       '1px solid rgba(0,0,0,0.12)',
                               flexShrink:   0,
                               display:      'inline-block',
@@ -402,7 +402,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                           {family.colors.map((color) => {
                             const isChosen = selected.has(color.name)
                             const disabled = atCap && !isChosen
-                            const imageSrc = color.image ? `/color-picker/${color.image}` : null
+                            const imageSrc = color.image ? `/color/${color.image}` : null
 
                             return (
                               <div
@@ -437,7 +437,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                                   )}
                                   <img
                                     className="color-shine"
-                                    src="/color-picker/images/shine.svg"
+                                    src="/color/images/shine.svg"
                                     alt=""
                                     aria-hidden="true"
                                   />