From 603d88c527465c56c05d5dd29ae3f77b5a108f3b Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 16:04:19 -0600
Subject: [PATCH] fix nav and color theme

---
 web/app/globals.css          | 96 ++++++++++++++++++------------------
 web/components/Navigation.js |  6 +--
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/web/app/globals.css b/web/app/globals.css
index 1b27a6bb..fb521491 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -224,7 +224,7 @@ body {
 .title-decoration {
   width: 100px;
   height: 4px;
-  background: orange;
+  background: #e68672;
   margin: 2rem auto 0;
   border-radius: 2px;
 }
@@ -281,12 +281,12 @@ body {
 }
 
 .adopt-search-input:focus {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .adopt-search-btn {
   padding: 0.6rem 1.4rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 6px;
@@ -297,7 +297,7 @@ body {
 }
 
 .adopt-search-btn:hover {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .adopt-clear-btn {
@@ -440,7 +440,7 @@ body {
 
 .pagination-btn {
   padding: 0.5rem 1.2rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 6px;
@@ -451,7 +451,7 @@ body {
 }
 
 .pagination-btn:hover:not(:disabled) {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .pagination-btn:disabled {
@@ -480,7 +480,7 @@ body {
 .pet-detail-back {
   display: inline-block;
   margin-bottom: 2rem;
-  color: orange;
+  color: #e68672;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 600;
@@ -488,7 +488,7 @@ body {
 }
 
 .pet-detail-back:hover {
-  color: #e69500;
+  color: #d4705e;
 }
 
 .pet-detail-card {
@@ -663,7 +663,7 @@ body {
 .pet-detail-cta-btn {
   display: inline-block;
   padding: 0.65rem 1.5rem;
-  background: orange;
+  background: #e68672;
   color: white;
   text-decoration: none;
   border-radius: 8px;
@@ -673,7 +673,7 @@ body {
 }
 
 .pet-detail-cta-btn:hover {
-  background: #e69500;
+  background: #d4705e;
 }
 
 /* Products Page */
@@ -965,7 +965,7 @@ body {
 }
 
 .adopt-filter-select:focus {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .adopt-filter-select:disabled {
@@ -1116,14 +1116,14 @@ body {
 }
 
 .auth-input:focus {
-  border-color: orange;
-  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
+  border-color: #e68672;
+  box-shadow: 0 0 0 3px rgba(230, 134, 114, 0.2);
 }
 
 .auth-submit-btn {
   margin-top: 0.5rem;
   padding: 0.75rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 8px;
@@ -1134,7 +1134,7 @@ body {
 }
 
 .auth-submit-btn:hover:not(:disabled) {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .auth-submit-btn:active:not(:disabled) {
@@ -1164,7 +1164,7 @@ body {
 }
 
 .auth-switch-link {
-  color: orange;
+  color: #e68672;
   font-weight: 600;
   text-decoration: none;
 }
@@ -1192,7 +1192,7 @@ body {
   width: 80px;
   height: 80px;
   border-radius: 50%;
-  background: orange;
+  background: #e68672;
   color: white;
   font-size: 2rem;
   font-weight: 700;
@@ -1373,8 +1373,8 @@ body {
 
 .appt-select:focus,
 .appt-input:focus {
-  border-color: orange;
-  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
+  border-color: #e68672;
+  box-shadow: 0 0 0 3px rgba(230, 134, 114, 0.2);
 }
 
 .appt-locked-field {
@@ -1419,18 +1419,18 @@ body {
 }
 
 .appt-slot-btn:hover {
-  border-color: orange;
+  border-color: #e68672;
   background: #fff8f0;
 }
 
 .appt-slot-btn--selected {
-  background: orange;
+  background: #e68672;
   color: white;
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .appt-slot-btn--selected:hover {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .appt-slots-loading,
@@ -1473,13 +1473,13 @@ body {
 }
 
 .appt-pet-chip:hover {
-  border-color: orange;
+  border-color: #e68672;
   background: #fff8f0;
 }
 
 .appt-pet-chip--selected {
   background: #fff3e0;
-  border-color: orange;
+  border-color: #e68672;
   color: #c47600;
 }
 
@@ -1493,7 +1493,7 @@ body {
 }
 
 .appt-pet-checkbox {
-  accent-color: orange;
+  accent-color: #e68672;
 }
 
 .appt-add-pet-btn {
@@ -1501,9 +1501,9 @@ body {
   margin-top: 0.5rem;
   padding: 0.4rem 0.85rem;
   background: none;
-  border: 1.5px solid orange;
+  border: 1.5px solid #e68672;
   border-radius: 6px;
-  color: orange;
+  color: #e68672;
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
@@ -1511,7 +1511,7 @@ body {
 }
 
 .appt-add-pet-btn:hover {
-  background: orange;
+  background: #e68672;
   color: white;
 }
 
@@ -1535,7 +1535,7 @@ body {
 }
 
 .appt-link {
-  color: orange;
+  color: #e68672;
   font-weight: 600;
   text-decoration: none;
 }
@@ -1547,7 +1547,7 @@ body {
 .appt-submit-btn {
   margin-top: 0.5rem;
   padding: 0.75rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 8px;
@@ -1558,7 +1558,7 @@ body {
 }
 
 .appt-submit-btn:hover:not(:disabled) {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .appt-submit-btn:active:not(:disabled) {
@@ -1726,12 +1726,12 @@ body {
 }
 
 .appt-adopt-card:hover {
-  border-color: orange;
+  border-color: #e68672;
   background: #fffaf5;
 }
 
 .appt-adopt-card--selected {
-  border-color: orange;
+  border-color: #e68672;
   background: #fff3e0;
 }
 
@@ -1835,7 +1835,7 @@ body {
 }
 
 .profile-pets-add-btn {
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 20px;
@@ -1847,7 +1847,7 @@ body {
 }
 
 .profile-pets-add-btn:hover {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .profile-pets-empty {
@@ -1920,7 +1920,7 @@ body {
 }
 
 .profile-pet-upload-label:hover {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .profile-pet-upload-input {
@@ -1965,8 +1965,8 @@ body {
 }
 
 .profile-pet-edit-btn:hover {
-  border-color: orange;
-  color: orange;
+  border-color: #e68672;
+  color: #e68672;
 }
 
 .profile-pet-delete-btn:hover {
@@ -2124,7 +2124,7 @@ body {
 }
 
 .product-card-qty-btn:hover:not(:disabled) {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .product-card-qty-val {
@@ -2137,7 +2137,7 @@ body {
 .product-card-add-btn {
   width: 100%;
   padding: 0.45rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 8px;
@@ -2148,7 +2148,7 @@ body {
 }
 
 .product-card-add-btn:hover:not(:disabled) {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .product-card-add-btn:disabled {
@@ -2205,7 +2205,7 @@ body {
 }
 
 .cart-continue-btn {
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 8px;
@@ -2217,7 +2217,7 @@ body {
 }
 
 .cart-continue-btn:hover {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .cart-layout {
@@ -2296,7 +2296,7 @@ body {
 }
 
 .cart-qty-btn:hover {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .cart-qty-val {
@@ -2549,7 +2549,7 @@ body {
 }
 
 .cart-coupon-input:focus {
-  border-color: orange;
+  border-color: #e68672;
 }
 
 .cart-coupon-btn {
@@ -2597,7 +2597,7 @@ body {
 .cart-checkout-btn {
   width: 100%;
   padding: 0.85rem;
-  background: orange;
+  background: #e68672;
   color: white;
   border: none;
   border-radius: 10px;
@@ -2609,7 +2609,7 @@ body {
 }
 
 .cart-checkout-btn:hover:not(:disabled) {
-  background: #e69500;
+  background: #d4705e;
 }
 
 .cart-checkout-btn:disabled {
diff --git a/web/components/Navigation.js b/web/components/Navigation.js
index d84f865b..20fcd188 100644
--- a/web/components/Navigation.js
+++ b/web/components/Navigation.js
@@ -8,7 +8,7 @@ import { useAuth } from "@/context/AuthContext";
 import { useCart } from "@/context/CartContext";
 
 export default function DisplayNav() {
-  const { user, token, logout, loading } = useAuth();
+  const { user, logout, loading } = useAuth();
   const { itemCount, selectedStoreId, setStoreId } = useCart();
   const router = useRouter();
   const [stores, setStores] = useState([]);
@@ -56,7 +56,7 @@ export default function DisplayNav() {
       </div>
 
       <div className="nav-auth">
-        {stores.length > 0 && (
+        {user && stores.length > 0 && (
           <select
             className="nav-store-select"
             value={selectedStoreId ?? ""}
@@ -132,7 +132,7 @@ export default function DisplayNav() {
 
           <div className="nav-drawer-divider" />
 
-          {stores.length > 0 && (
+          {user && stores.length > 0 && (
             <select
               className="nav-store-select nav-store-select--drawer"
               value={selectedStoreId ?? ""}