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

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

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