From 0cc072fda4681025aff10e2c9940b672c10c9bea Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Fri, 17 Jul 2026 22:47:43 +0100
Subject: [PATCH] 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>
---
 src/app/cart/page.tsx             | 5 +----
 src/app/globals.css               | 5 +++++
 src/components/Header.tsx         | 2 +-
 src/components/LogoutOnUnload.tsx | 7 ++++++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index dc0869a..9669759 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -20,7 +20,7 @@ export default function CartPage() {
     window.location.href = '/checkout';
   };
 
-  if (!mounted) return null; // avoid a hydration mismatch on first paint
+  if (!mounted) return null;
 
   if (items.length === 0) {
     return (
@@ -163,9 +163,6 @@ export default function CartPage() {
         </div>
 
         <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
             onClick={handleCheckout}
             className="w-full bg-clay px-6 py-3 text-sm font-medium text-paper transition-colors hover:bg-clay-dark"
diff --git a/src/app/globals.css b/src/app/globals.css
index 366ff9a..4c5357b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -24,6 +24,11 @@
   body {
     @apply bg-paper text-ink font-body antialiased transition-colors duration-200;
   }
+  input,
+  textarea,
+  select {
+    @apply text-ink;
+  }
   ::selection {
     @apply bg-splash-pink text-paper;
   }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f3db79b..c61623a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -77,7 +77,7 @@ export default async function Header() {
             <AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
           </div>
           <ThemeToggle />
-          <CartButton />
+          {customer && <CartButton />}
         </div>
       </div>
     </header>
diff --git a/src/components/LogoutOnUnload.tsx b/src/components/LogoutOnUnload.tsx
index 8d1ecec..47d4879 100644
--- a/src/components/LogoutOnUnload.tsx
+++ b/src/components/LogoutOnUnload.tsx
@@ -1,14 +1,19 @@
 'use client';
 
 import { useEffect } from 'react';
+import { useCart } from '@/lib/cartStore';
 
 /**
  * Logs out the user when they close/leave the page
  * Works for both admin and customer sessions
  */
 export default function LogoutOnUnload() {
+  const clearCart = useCart((s) => s.clear);
+
   useEffect(() => {
     const handleUnload = () => {
+      // Clear cart on logout
+      clearCart();
       // Use sendBeacon to reliably send logout even when page is closing
       // This doesn't wait for a response, which is fine for logout
       navigator.sendBeacon('/api/logout');
@@ -21,7 +26,7 @@ export default function LogoutOnUnload() {
       window.removeEventListener('beforeunload', handleUnload);
       window.removeEventListener('unload', handleUnload);
     };
-  }, []);
+  }, [clearCart]);
 
   return null;
 }