From 0d95cf93b33426aa970de1c11d048bfc188ecd28 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Tue, 5 May 2026 09:36:31 -0400
Subject: [PATCH] fix: correct shine.svg path and revert balloon mask to
 /color/ routes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Balloon mask and color images correctly live at /color/images/ (served by
main site via nginx). Only the shine image path was wrong — it's at
/color/shine.svg, not /color/images/shine.svg. That missing file was the
actual cause of Safari showing ? placeholders. Previous commit incorrectly
moved everything to /color-picker/ which broke the CSS mask-image.

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

diff --git a/estore/src/app/globals.css b/estore/src/app/globals.css
index 8824054..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('/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('/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/AdminColorFilter.tsx b/estore/src/components/AdminColorFilter.tsx
index a09ab66..f9b2fcf 100644
--- a/estore/src/components/AdminColorFilter.tsx
+++ b/estore/src/components/AdminColorFilter.tsx
@@ -142,7 +142,7 @@ export default function AdminColorFilter({ disabledColors, onSave, onClose }: Pr
                     <div className="swatch-container">
                       {family.colors.map((color) => {
                         const isDisabled = disabled.has(color.name)
-                        const imageSrc   = color.image ? `/color-picker/${color.image}` : null
+                        const imageSrc   = color.image ? `/color/${color.image}` : null
 
                         return (
                           <div
@@ -165,7 +165,7 @@ export default function AdminColorFilter({ disabledColors, onSave, onClose }: Pr
                                 />
                               )}
                               {/* eslint-disable-next-line @next/next/no-img-element */}
-                              <img className="color-shine" src="/color-picker/images/shine.svg" alt="" aria-hidden="true" />
+                              <img className="color-shine" src="/color/shine.svg" alt="" aria-hidden="true" />
                             </div>
                             <span style={{
                               fontSize:   '0.6rem',
diff --git a/estore/src/components/ColorPicker.tsx b/estore/src/components/ColorPicker.tsx
index 3a6770a..79b394d 100644
--- a/estore/src/components/ColorPicker.tsx
+++ b/estore/src/components/ColorPicker.tsx
@@ -457,7 +457,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
@@ -492,7 +492,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                                   )}
                                   <img
                                     className="color-shine"
-                                    src="/color-picker/images/shine.svg"
+                                    src="/color/shine.svg"
                                     alt=""
                                     aria-hidden="true"
                                   />