RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix nav and color theme

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-04-15 16:04:19 -06:00
parent 01017a9ae7
commit 603d88c527
2 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
web/app/globals.css
View File

@@ -224,7 +224,7 @@ body {
.title-decoration { .title-decoration {
width: 100px; width: 100px;
height: 4px; height: 4px;
background: orange; background: #e68672;
margin: 2rem auto 0; margin: 2rem auto 0;
border-radius: 2px; border-radius: 2px;
} }
@@ -281,12 +281,12 @@ body {
} }
.adopt-search-input:focus { .adopt-search-input:focus {
border-color: orange; border-color: #e68672;
} }
.adopt-search-btn { .adopt-search-btn {
padding: 0.6rem 1.4rem; padding: 0.6rem 1.4rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
@@ -297,7 +297,7 @@ body {
} }
.adopt-search-btn:hover { .adopt-search-btn:hover {
background: #e69500; background: #d4705e;
} }
.adopt-clear-btn { .adopt-clear-btn {
@@ -440,7 +440,7 @@ body {
.pagination-btn { .pagination-btn {
padding: 0.5rem 1.2rem; padding: 0.5rem 1.2rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
@@ -451,7 +451,7 @@ body {
} }
.pagination-btn:hover:not(:disabled) { .pagination-btn:hover:not(:disabled) {
background: #e69500; background: #d4705e;
} }
.pagination-btn:disabled { .pagination-btn:disabled {
@@ -480,7 +480,7 @@ body {
.pet-detail-back { .pet-detail-back {
display: inline-block; display: inline-block;
margin-bottom: 2rem; margin-bottom: 2rem;
color: orange; color: #e68672;
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@@ -488,7 +488,7 @@ body {
} }
.pet-detail-back:hover { .pet-detail-back:hover {
color: #e69500; color: #d4705e;
} }
.pet-detail-card { .pet-detail-card {
@@ -663,7 +663,7 @@ body {
.pet-detail-cta-btn { .pet-detail-cta-btn {
display: inline-block; display: inline-block;
padding: 0.65rem 1.5rem; padding: 0.65rem 1.5rem;
background: orange; background: #e68672;
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 8px;
@@ -673,7 +673,7 @@ body {
} }
.pet-detail-cta-btn:hover { .pet-detail-cta-btn:hover {
background: #e69500; background: #d4705e;
} }
/* Products Page */ /* Products Page */
@@ -965,7 +965,7 @@ body {
} }
.adopt-filter-select:focus { .adopt-filter-select:focus {
border-color: orange; border-color: #e68672;
} }
.adopt-filter-select:disabled { .adopt-filter-select:disabled {
@@ -1116,14 +1116,14 @@ body {
} }
.auth-input:focus { .auth-input:focus {
border-color: orange; border-color: #e68672;
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2); box-shadow: 0 0 0 3px rgba(230, 134, 114, 0.2);
} }
.auth-submit-btn { .auth-submit-btn {
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.75rem; padding: 0.75rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -1134,7 +1134,7 @@ body {
} }
.auth-submit-btn:hover:not(:disabled) { .auth-submit-btn:hover:not(:disabled) {
background: #e69500; background: #d4705e;
} }
.auth-submit-btn:active:not(:disabled) { .auth-submit-btn:active:not(:disabled) {
@@ -1164,7 +1164,7 @@ body {
} }
.auth-switch-link { .auth-switch-link {
color: orange; color: #e68672;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
} }
@@ -1192,7 +1192,7 @@ body {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
background: orange; background: #e68672;
color: white; color: white;
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
@@ -1373,8 +1373,8 @@ body {
.appt-select:focus, .appt-select:focus,
.appt-input:focus { .appt-input:focus {
border-color: orange; border-color: #e68672;
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2); box-shadow: 0 0 0 3px rgba(230, 134, 114, 0.2);
} }
.appt-locked-field { .appt-locked-field {
@@ -1419,18 +1419,18 @@ body {
} }
.appt-slot-btn:hover { .appt-slot-btn:hover {
border-color: orange; border-color: #e68672;
background: #fff8f0; background: #fff8f0;
} }
.appt-slot-btn--selected { .appt-slot-btn--selected {
background: orange; background: #e68672;
color: white; color: white;
border-color: orange; border-color: #e68672;
} }
.appt-slot-btn--selected:hover { .appt-slot-btn--selected:hover {
background: #e69500; background: #d4705e;
} }
.appt-slots-loading, .appt-slots-loading,
@@ -1473,13 +1473,13 @@ body {
} }
.appt-pet-chip:hover { .appt-pet-chip:hover {
border-color: orange; border-color: #e68672;
background: #fff8f0; background: #fff8f0;
} }
.appt-pet-chip--selected { .appt-pet-chip--selected {
background: #fff3e0; background: #fff3e0;
border-color: orange; border-color: #e68672;
color: #c47600; color: #c47600;
} }
@@ -1493,7 +1493,7 @@ body {
} }
.appt-pet-checkbox { .appt-pet-checkbox {
accent-color: orange; accent-color: #e68672;
} }
.appt-add-pet-btn { .appt-add-pet-btn {
@@ -1501,9 +1501,9 @@ body {
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.4rem 0.85rem; padding: 0.4rem 0.85rem;
background: none; background: none;
border: 1.5px solid orange; border: 1.5px solid #e68672;
border-radius: 6px; border-radius: 6px;
color: orange; color: #e68672;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
@@ -1511,7 +1511,7 @@ body {
} }
.appt-add-pet-btn:hover { .appt-add-pet-btn:hover {
background: orange; background: #e68672;
color: white; color: white;
} }
@@ -1535,7 +1535,7 @@ body {
} }
.appt-link { .appt-link {
color: orange; color: #e68672;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
} }
@@ -1547,7 +1547,7 @@ body {
.appt-submit-btn { .appt-submit-btn {
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.75rem; padding: 0.75rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -1558,7 +1558,7 @@ body {
} }
.appt-submit-btn:hover:not(:disabled) { .appt-submit-btn:hover:not(:disabled) {
background: #e69500; background: #d4705e;
} }
.appt-submit-btn:active:not(:disabled) { .appt-submit-btn:active:not(:disabled) {
@@ -1726,12 +1726,12 @@ body {
} }
.appt-adopt-card:hover { .appt-adopt-card:hover {
border-color: orange; border-color: #e68672;
background: #fffaf5; background: #fffaf5;
} }
.appt-adopt-card--selected { .appt-adopt-card--selected {
border-color: orange; border-color: #e68672;
background: #fff3e0; background: #fff3e0;
} }
@@ -1835,7 +1835,7 @@ body {
} }
.profile-pets-add-btn { .profile-pets-add-btn {
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
@@ -1847,7 +1847,7 @@ body {
} }
.profile-pets-add-btn:hover { .profile-pets-add-btn:hover {
background: #e69500; background: #d4705e;
} }
.profile-pets-empty { .profile-pets-empty {
@@ -1920,7 +1920,7 @@ body {
} }
.profile-pet-upload-label:hover { .profile-pet-upload-label:hover {
border-color: orange; border-color: #e68672;
} }
.profile-pet-upload-input { .profile-pet-upload-input {
@@ -1965,8 +1965,8 @@ body {
} }
.profile-pet-edit-btn:hover { .profile-pet-edit-btn:hover {
border-color: orange; border-color: #e68672;
color: orange; color: #e68672;
} }
.profile-pet-delete-btn:hover { .profile-pet-delete-btn:hover {
@@ -2124,7 +2124,7 @@ body {
} }
.product-card-qty-btn:hover:not(:disabled) { .product-card-qty-btn:hover:not(:disabled) {
border-color: orange; border-color: #e68672;
} }
.product-card-qty-val { .product-card-qty-val {
@@ -2137,7 +2137,7 @@ body {
.product-card-add-btn { .product-card-add-btn {
width: 100%; width: 100%;
padding: 0.45rem; padding: 0.45rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -2148,7 +2148,7 @@ body {
} }
.product-card-add-btn:hover:not(:disabled) { .product-card-add-btn:hover:not(:disabled) {
background: #e69500; background: #d4705e;
} }
.product-card-add-btn:disabled { .product-card-add-btn:disabled {
@@ -2205,7 +2205,7 @@ body {
} }
.cart-continue-btn { .cart-continue-btn {
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -2217,7 +2217,7 @@ body {
} }
.cart-continue-btn:hover { .cart-continue-btn:hover {
background: #e69500; background: #d4705e;
} }
.cart-layout { .cart-layout {
@@ -2296,7 +2296,7 @@ body {
} }
.cart-qty-btn:hover { .cart-qty-btn:hover {
border-color: orange; border-color: #e68672;
} }
.cart-qty-val { .cart-qty-val {
@@ -2549,7 +2549,7 @@ body {
} }
.cart-coupon-input:focus { .cart-coupon-input:focus {
border-color: orange; border-color: #e68672;
} }
.cart-coupon-btn { .cart-coupon-btn {
@@ -2597,7 +2597,7 @@ body {
.cart-checkout-btn { .cart-checkout-btn {
width: 100%; width: 100%;
padding: 0.85rem; padding: 0.85rem;
background: orange; background: #e68672;
color: white; color: white;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
@@ -2609,7 +2609,7 @@ body {
} }
.cart-checkout-btn:hover:not(:disabled) { .cart-checkout-btn:hover:not(:disabled) {
background: #e69500; background: #d4705e;
} }
.cart-checkout-btn:disabled { .cart-checkout-btn:disabled {

6
web/components/Navigation.js
View File

@@ -8,7 +8,7 @@ import { useAuth } from "@/context/AuthContext";
import { useCart } from "@/context/CartContext"; import { useCart } from "@/context/CartContext";
export default function DisplayNav() { export default function DisplayNav() {
const { user, token, logout, loading } = useAuth(); const { user, logout, loading } = useAuth();
const { itemCount, selectedStoreId, setStoreId } = useCart(); const { itemCount, selectedStoreId, setStoreId } = useCart();
const router = useRouter(); const router = useRouter();
const [stores, setStores] = useState([]); const [stores, setStores] = useState([]);
@@ -56,7 +56,7 @@ export default function DisplayNav() {
</div> </div>
<div className="nav-auth"> <div className="nav-auth">
{stores.length > 0 && ( {user && stores.length > 0 && (
<select <select
className="nav-store-select" className="nav-store-select"
value={selectedStoreId ?? ""} value={selectedStoreId ?? ""}
@@ -132,7 +132,7 @@ export default function DisplayNav() {
<div className="nav-drawer-divider" /> <div className="nav-drawer-divider" />
{stores.length > 0 && ( {user && stores.length > 0 && (
<select <select
className="nav-store-select nav-store-select--drawer" className="nav-store-select nav-store-select--drawer"
value={selectedStoreId ?? ""} value={selectedStoreId ?? ""}