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

Fix cart button overlapping scroll-to-top button, make it more compact

Browse Source 
Both were fixed bottom-right with no awareness of each other. Scroll-to-top
now lifts above the cart pill when the cart has items; the pill itself
drops the redundant "View order" text and shrinks padding/font.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
chris 2026-08-19 11:27:40 -04:00
parent 517e00aeb1
commit f6960fd3ec
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
estore/src/components/CartFab.tsx
View File

@ -20,13 +20,13 @@ export default function CartFab() {
color: '#fff', color: '#fff',
border: 'none', border: 'none',
borderRadius: '999px', borderRadius: '999px',
padding: '0.75rem 1.25rem', padding: '0.55rem 1rem',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '0.6rem', gap: '0.45rem',
boxShadow: '0 6px 20px rgba(0,0,0,0.22)', boxShadow: '0 6px 20px rgba(0,0,0,0.22)',
cursor: 'pointer', cursor: 'pointer',
fontSize: '0.95rem', fontSize: '0.85rem',
fontWeight: 'bold', fontWeight: 'bold',
fontFamily: 'inherit', fontFamily: 'inherit',
transition: 'transform 0.15s, box-shadow 0.15s', transition: 'transform 0.15s, box-shadow 0.15s',
@ -42,7 +42,6 @@ export default function CartFab() {
> >
<i className="fa-solid fa-bag-shopping" /> <i className="fa-solid fa-bag-shopping" />
<span>{totalItems} {totalItems === 1 ? 'item' : 'items'}</span> <span>{totalItems} {totalItems === 1 ? 'item' : 'items'}</span>
<span style={{ opacity: 0.75, fontWeight: 'normal', fontSize: '0.8rem' }}>· View order</span>
</button> </button>
) )
} }

5
estore/src/components/ScrollToTop.tsx
View File

@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
import { useCart } from '@/context/CartContext' import { useCart } from '@/context/CartContext'
export default function ScrollToTop() { export default function ScrollToTop() {
const { drawerOpen } = useCart() const { drawerOpen, totalItems } = useCart()
const [scrolled, setScrolled] = useState(false) const [scrolled, setScrolled] = useState(false)
useEffect(() => { useEffect(() => {
@ -24,9 +24,10 @@ export default function ScrollToTop() {
onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })} onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: '12px', bottom: totalItems > 0 ? '76px' : '12px',
right: '10px', right: '10px',
zIndex: 98, zIndex: 98,
transition: 'bottom 0.15s',
border: '1px solid #363636', border: '1px solid #363636',
outline: 'none', outline: 'none',
background: '#94d601', background: '#94d601',