From 8952bbf55588aa8888ce85728249dd6121b06210 Mon Sep 17 00:00:00 2001 From: muken Date: Sat, 27 Jun 2026 16:42:34 -0500 Subject: [PATCH] Apply La Huasca brand colors across layout, nav, login, admin, user and home --- src/app/admin/page.tsx | 78 +++++++++++++----- src/app/layout.tsx | 2 +- src/app/login/page.tsx | 91 ++++++++++++++++----- src/app/page.tsx | 46 ++++++++++- src/app/user/page.tsx | 139 ++++++++++++++++++++++---------- src/components/MeasuredText.tsx | 4 +- src/components/Navbar.tsx | 70 ++++++++++------ 7 files changed, 321 insertions(+), 109 deletions(-) diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 53e3980..e37bdb7 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -10,6 +10,10 @@ interface ImageRecord { uploaded_at: string; } +const gold = '#E8A849'; +const navy = '#010D1E'; +const warm = '#a6683c'; + export default function AdminPage() { const router = useRouter(); const [images, setImages] = useState([]); @@ -73,25 +77,47 @@ export default function AdminPage() { } }; - if (loading) return

Loading...

; + if (loading) { + return ( +
+

Loading gallery...

+
+ ); + } return ( -
-

Admin Portal

-

Total uploaded images: {count}

- {error &&

{error}

} +
+

+ Admin Portal +

+

+ Total uploaded images: {count} +

+ {error &&

{error}

} {images.length === 0 ? ( -

No images uploaded yet.

+

No images uploaded yet.

) : (
{images.map((img) => (
{ + e.currentTarget.style.transform = 'translateY(-2px)'; + e.currentTarget.style.boxShadow = '0 6px 18px rgba(14,47,71,0.16)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = '0 1px 2px rgba(1,13,30,0.08)'; }} > {img.filename} +

+ Demo accounts: admin / admin and user / user. +

-

- Demo accounts: admin / admin and user / user. -

); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 40b02bf..39376a3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,50 @@ import MeasuredText from '@/components/MeasuredText'; +const gold = '#E8A849'; +const navy = '#010D1E'; +const cream = '#f5f0e8'; + export default function HomePage() { return ( -
-

La Huasca

-

Welcome to the TypeScript + Next.js version of La Huasca.

+
+

+ Hotel · Restaurant · Vineyard +

+

+ La Huasca +

+

+ Welcome to the TypeScript + Next.js version of La Huasca. +

); diff --git a/src/app/user/page.tsx b/src/app/user/page.tsx index 9d315af..2391cda 100644 --- a/src/app/user/page.tsx +++ b/src/app/user/page.tsx @@ -31,6 +31,11 @@ interface PortalData { wifiPassword: string; } +const gold = '#E8A849'; +const navy = '#010D1E'; +const cream = '#f5f0e8'; +const warm = '#a6683c'; + export default function UserPage() { const router = useRouter(); const [data, setData] = useState(null); @@ -53,94 +58,144 @@ export default function UserPage() { .finally(() => setLoading(false)); }, [router]); - if (loading) return

Loading...

; + if (loading) { + return ( +
+

Loading your portal...

+
+ ); + } if (!data) { return

Please log in as user to access this page.

; } return ( -
-

User Portal

+
+

+ Member Portal +

-
-

Future Reservations

+
{data.reservations.length === 0 ? ( -

No upcoming reservations.

+

No upcoming reservations.

) : ( -
    +
      {data.reservations.map((r) => (
    • - {r.date} at {r.time} · {r.guests} guests · {r.table_name} + {r.date} at {r.time} · {r.guests} guests · {r.table_name}
      • ))}
    )} -
+
-
-

Discount Coupons

+
{data.coupons.map((c) => (
- {c.code} -

{c.discount}

+ {c.code} +

{c.discount}

))}
-
+
-
-

Offers

-
    +
    +
      {data.offers.map((o) => ( -
    • - {o.title} — {o.description} +
    • + {o.title} — {o.description}
      • ))}
    -
    +
-
-

WiFi Password

-

+

{data.wifiPassword} -

-
+ + -
-

Member Benefits

-
    +
    +
      {data.benefits.map((b) => ( -
    • {b}
      • +
    • + {b} +
      • ))}
    -
    +
); } + +function Section({ title, children }: { title: string; children: React.ReactNode }) { + return ( +
+

+ {title} +

+ {children} +
+ ); +} diff --git a/src/components/MeasuredText.tsx b/src/components/MeasuredText.tsx index 380621e..4275d5b 100644 --- a/src/components/MeasuredText.tsx +++ b/src/components/MeasuredText.tsx @@ -24,11 +24,11 @@ export default function MeasuredText({ text }: MeasuredTextProps) { return (
- + {text} {height !== null && ( -

Measured height: {height.toFixed(2)}px

+

Measured height: {height.toFixed(2)}px

)}
); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index a0b463d..dc75641 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,6 +1,7 @@ 'use client'; import Link from 'next/link'; +import { usePathname } from 'next/navigation'; import { useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; @@ -15,6 +16,7 @@ const links = [ export default function Navbar() { const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null); const router = useRouter(); + const pathname = usePathname(); useEffect(() => { fetch('/api/auth/me', { credentials: 'same-origin' }) @@ -29,28 +31,46 @@ export default function Navbar() { router.push('/login'); }; + const navStyle: React.CSSProperties = { + position: 'sticky', + top: 0, + display: 'flex', + gap: '1.5rem', + alignItems: 'center', + padding: '0.75rem 1.5rem', + background: '#010D1E', + color: '#f5f0e8', + boxShadow: '0 2px 8px rgba(1,13,30,0.25)', + zIndex: 50, + }; + + const linkBase: React.CSSProperties = { + color: 'rgba(245,240,232,0.85)', + textDecoration: 'none', + fontSize: '14px', + padding: '6px 0', + borderBottom: '1.5px solid transparent', + transition: 'color .15s, border-color .15s', + }; + + const activeLink: React.CSSProperties = { + color: '#E8A849', + borderBottomColor: '#E8A849', + }; + return ( -