chris/balloon-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update /color-picker/ → /color/ in estore ColorPicker and CSS

Browse Source 
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>
This commit is contained in:
chris 2026-04-15 14:47:16 -04:00
parent 0576677523
commit c22b668bc5
2 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; position: relative;
z-index: 1; z-index: 1;
transition: transform 0.2s ease; 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-size: contain;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: center; -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-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;

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

@ -305,7 +305,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
width: '16px', width: '16px',
height: '16px', height: '16px',
borderRadius: '50%', 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)', border: '1px solid rgba(0,0,0,0.1)',
flexShrink: 0, flexShrink: 0,
display: 'inline-block', display: 'inline-block',
@ -356,7 +356,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
width: '13px', width: '13px',
height: '13px', height: '13px',
borderRadius: '50%', 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)', border: '1px solid rgba(0,0,0,0.12)',
flexShrink: 0, flexShrink: 0,
display: 'inline-block', display: 'inline-block',
@ -402,7 +402,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
{family.colors.map((color) => { {family.colors.map((color) => {
const isChosen = selected.has(color.name) const isChosen = selected.has(color.name)
const disabled = atCap && !isChosen const disabled = atCap && !isChosen
const imageSrc = color.image ? `/color-picker/${color.image}` : null const imageSrc = color.image ? `/color/${color.image}` : null
return ( return (
<div <div
@ -437,7 +437,7 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
)} )}
<img <img
className="color-shine" className="color-shine"
src="/color-picker/images/shine.svg" src="/color/images/shine.svg"
alt="" alt=""
aria-hidden="true" aria-hidden="true"
/> />