chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct shine.svg path and revert balloon mask to /color/ routes

Browse Source 
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>
This commit is contained in:
chris 2026-05-05 09:36:31 -04:00
parent 9d02417059
commit 0d95cf93b3
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
estore/src/app/globals.css
View File

@ -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;

4
estore/src/components/AdminColorFilter.tsx
View File

@ -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',

4
estore/src/components/ColorPicker.tsx
View File

@ -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"
/>