Improve cart and dark mode UX

- Clear cart when customer logs out
- Hide cart bag button for non-authenticated users (only show for logged-in customers)
- Fix dark mode text visibility in all form inputs (input/textarea/select elements)

Addresses user request: cart should clear on logout and only be accessible to logged-in customers.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-17 22:47:43 +01:00
co-authored by Claude Haiku 4.5
parent c8dc3467f9
commit 0cc072fda4
4 changed files with 13 additions and 6 deletions
+1 -4
View File
@@ -20,7 +20,7 @@ export default function CartPage() {
window.location.href = '/checkout'; window.location.href = '/checkout';
}; };
if (!mounted) return null; // avoid a hydration mismatch on first paint if (!mounted) return null;
if (items.length === 0) { if (items.length === 0) {
return ( return (
@@ -163,9 +163,6 @@ export default function CartPage() {
</div> </div>
<div className="w-full max-w-xs"> <div className="w-full max-w-xs">
<div className="mb-4 rounded border border-splash-blue/40 bg-splash-blue/5 px-3 py-2 text-xs text-muted">
Your cart will be saved. You can log in or continue as a guest to complete your order.
</div>
<button <button
onClick={handleCheckout} onClick={handleCheckout}
className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark" className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
+5
View File
@@ -24,6 +24,11 @@
body { body {
@apply bg-paper text-ink font-body antialiased transition-colors duration-200; @apply bg-paper text-ink font-body antialiased transition-colors duration-200;
} }
input,
textarea,
select {
@apply text-ink;
}
::selection { ::selection {
@apply bg-splash-pink text-paper; @apply bg-splash-pink text-paper;
} }
+1 -1
View File
@@ -77,7 +77,7 @@ export default async function Header() {
<AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} /> <AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
</div> </div>
<ThemeToggle /> <ThemeToggle />
<CartButton /> {customer && <CartButton />}
</div> </div>
</div> </div>
</header> </header>
+6 -1
View File
@@ -1,14 +1,19 @@
'use client'; 'use client';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useCart } from '@/lib/cartStore';
/** /**
* Logs out the user when they close/leave the page * Logs out the user when they close/leave the page
* Works for both admin and customer sessions * Works for both admin and customer sessions
*/ */
export default function LogoutOnUnload() { export default function LogoutOnUnload() {
const clearCart = useCart((s) => s.clear);
useEffect(() => { useEffect(() => {
const handleUnload = () => { const handleUnload = () => {
// Clear cart on logout
clearCart();
// Use sendBeacon to reliably send logout even when page is closing // Use sendBeacon to reliably send logout even when page is closing
// This doesn't wait for a response, which is fine for logout // This doesn't wait for a response, which is fine for logout
navigator.sendBeacon('/api/logout'); navigator.sendBeacon('/api/logout');
@@ -21,7 +26,7 @@ export default function LogoutOnUnload() {
window.removeEventListener('beforeunload', handleUnload); window.removeEventListener('beforeunload', handleUnload);
window.removeEventListener('unload', handleUnload); window.removeEventListener('unload', handleUnload);
}; };
}, []); }, [clearCart]);
return null; return null;
} }