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

BouquetPicker: balloon swatches for latex color picker, wider modal, sticky mylar tray

Browse Source 
- Replace plain round buttons in latex color picker with full balloon swatch
  system (swatch-wrapper/color-swatch/color-shine) matching the rest of the store
- Metallics and chromes now show texture images with hover zoom/lift effect
- Widen modal to 1050px; move mylar summary tray above scroll area

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-06-24 10:09:52 -04:00
parent c263e2e7ba
commit 95e88780ab
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
estore/src/components/BouquetPicker.tsx
View File

@ -803,18 +803,31 @@ export default function BouquetPicker({ product, onClose }: Props) {
<div style={{
border: '1px solid #b2e0e4', borderTop: 'none',
borderRadius: '0 0 8px 8px', padding: '0.6rem 0.75rem',
display: 'flex', flexWrap: 'wrap', gap: 8,
background: '#fff',
}}>
{family.colors.map((c) => (
<button key={c.name} type="button" title={c.name}
onClick={() => selectLatexColor(c.name)}
style={{
width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', flexShrink: 0,
background: c.image ? `url('/color/${c.image}') center/cover` : c.hex,
border: '2px solid rgba(0,0,0,0.15)',
}}
/>
))}
<div className="swatch-container">
{family.colors.map((c) => {
const imageSrc = c.image ? `/color/${c.image}` : null
return (
<div key={c.name} className="swatch-wrapper"
onClick={() => selectLatexColor(c.name)}
role="button" title={c.name}>
<div className="color-swatch">
{imageSrc ? (
<div className="color-background finish-image"
style={{ backgroundImage: `url('${imageSrc}')` }} />
) : (
<div className="color-background"
style={{ backgroundColor: c.hex }} />
)}
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className="color-shine" src="/color/shine.svg" alt="" aria-hidden="true" />
</div>
<span className="color-name">{c.name}</span>
</div>
)
})}
</div>
</div>
)}
</div>