From 56230019d64c6e180f5b48cb335c96fa5609d8ae Mon Sep 17 00:00:00 2001 From: Xavier Garcia Date: Mon, 4 May 2026 00:07:00 -0700 Subject: [PATCH 1/9] feat: create basic navbar using past work; improvements needed --- apps/web/app/globals.css | 16 +++++++++++----- apps/web/app/layout.tsx | 8 ++++++-- apps/web/app/page.tsx | 7 ++----- apps/web/components/navbar.tsx | 28 ++++++++++++++++++++++++++++ 4 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 apps/web/components/navbar.tsx diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index d3220e2..95ceb6b 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -7,9 +7,11 @@ :root { /* background colors */ --bg-primary: #b0c3a3; - --bg-secondary: #4b5743; + --bg-secondary: #122918; --bg-text: #f5fdef; + --border-color: #4b5743; + /* text colors */ --text-primary: #171717; --text-secondary: #525252; @@ -26,11 +28,13 @@ --bg-secondary: #0e3b1a; --bg-text: #4b5743; + --border-color: #0e3b1a; + /* text colors */ --text-primary: #ededed; --text-secondary: #a3a3a3; --text-title: #efbf04; - --text-title-shadow: #9F7F03; + --text-title-shadow: #9f7f03; --text-muted: #737373; --text-brand: #c084fc; --text-danger: #f87171; @@ -48,8 +52,8 @@ background-color: var(--bg-text); } - .border-secondary { - border-color: var(--bg-secondary); + .border-color { + border-color: var(--border-color); } /* text colors */ @@ -71,12 +75,14 @@ .text-danger { color: var(--text-danger); } + .text-navbar { + color: #efbf04; + } .title-shadow { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--text-title-shadow); } - /* screen responsiveness */ .h1-responsive { diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 194ebb3..27b30b9 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,5 +1,6 @@ import { Metadata } from "next"; import { ThemeProvider } from "@/components/theme-provider"; +import NavBar from "@/components/navbar"; import "./globals.css"; export const metadata: Metadata = { @@ -34,8 +35,11 @@ export default function RootLayout({ }} /> - - {children} + + + +
{children}
+ ); diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 2a46632..85e1e5e 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,13 +1,10 @@ export default async function Home() { return ( -
+

OnPar

-
+

Welcome to OnPar! OnPar is an application for you and your friends to gameify your goal-tracking in a golf-inspired diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx new file mode 100644 index 0000000..0eca0b6 --- /dev/null +++ b/apps/web/components/navbar.tsx @@ -0,0 +1,28 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; + + + +const MINI_BUTTON_CLASSNAME = + "flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-transparent text-gray-700 font-medium hover:bg-gray-100 hover:shadow-lg transition cursor-pointer"; + +export default function NavBar() { + const pathname: string = usePathname(); + return ( +

+ ); +} From 69b9a82511ff82696137e2d8bee4870c514a723e Mon Sep 17 00:00:00 2001 From: Xavier Garcia Date: Mon, 4 May 2026 16:45:30 -0700 Subject: [PATCH 2/9] adjust padding of title of navbar --- apps/web/components/navbar.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx index 0eca0b6..6e702e5 100644 --- a/apps/web/components/navbar.tsx +++ b/apps/web/components/navbar.tsx @@ -3,8 +3,6 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; - - const MINI_BUTTON_CLASSNAME = "flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-transparent text-gray-700 font-medium hover:bg-gray-100 hover:shadow-lg transition cursor-pointer"; @@ -12,16 +10,16 @@ export default function NavBar() { const pathname: string = usePathname(); return ( ); From 5a6fd04fd550f488f204162d9606726e68d1de4a Mon Sep 17 00:00:00 2001 From: Xavier Garcia Date: Mon, 4 May 2026 17:29:10 -0700 Subject: [PATCH 3/9] feat: add some barebones pages to begin populating navbar --- apps/web/app/leaderboard/page.tsx | 3 +++ apps/web/app/page.tsx | 2 +- apps/web/app/tournaments/page.tsx | 3 +++ apps/web/components/navbar.tsx | 30 ++++++++++++++++++++++++++++-- 4 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 apps/web/app/leaderboard/page.tsx create mode 100644 apps/web/app/tournaments/page.tsx diff --git a/apps/web/app/leaderboard/page.tsx b/apps/web/app/leaderboard/page.tsx new file mode 100644 index 0000000..29c5af2 --- /dev/null +++ b/apps/web/app/leaderboard/page.tsx @@ -0,0 +1,3 @@ +export default function GlobalLeaderboardPage() { + return

This is the global leaderboard page

; +} diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 85e1e5e..dfc0680 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,4 +1,4 @@ -export default async function Home() { +export default async function HomePage() { return (

diff --git a/apps/web/app/tournaments/page.tsx b/apps/web/app/tournaments/page.tsx new file mode 100644 index 0000000..be62924 --- /dev/null +++ b/apps/web/app/tournaments/page.tsx @@ -0,0 +1,3 @@ +export default function TournamentsPage() { + return

This is the tournaments page

; +} diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx index 6e702e5..db3a02d 100644 --- a/apps/web/components/navbar.tsx +++ b/apps/web/components/navbar.tsx @@ -6,8 +6,14 @@ import { usePathname } from "next/navigation"; const MINI_BUTTON_CLASSNAME = "flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-transparent text-gray-700 font-medium hover:bg-gray-100 hover:shadow-lg transition cursor-pointer"; +const links = [ + { href: "/tournaments", label: "Your Tournaments" }, + { href: "/leaderboard", label: "Leaderboard" }, +]; + export default function NavBar() { - const pathname: string = usePathname(); + const pathname = usePathname(); + return (
); From 5f232cfe788222c1a2bdab500033e28fc34478f9 Mon Sep 17 00:00:00 2001 From: Xavier Garcia Date: Mon, 4 May 2026 23:05:40 -0700 Subject: [PATCH 4/9] adjust navbar colors --- apps/web/app/globals.css | 5 ++++- apps/web/components/navbar.tsx | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 95ceb6b..cf28cf8 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -75,9 +75,12 @@ .text-danger { color: var(--text-danger); } - .text-navbar { + .text-navbar-active { color: #efbf04; } + .text-navbar-inactive { + color: #856A02; + } .title-shadow { -webkit-text-stroke-width: 2px; diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx index db3a02d..5201d94 100644 --- a/apps/web/components/navbar.tsx +++ b/apps/web/components/navbar.tsx @@ -20,7 +20,7 @@ export default function NavBar() { {/* Main Button */}
- OnPar + OnPar
@@ -37,8 +37,8 @@ export default function NavBar() { href={link.href} className={ isActive - ? `${MINI_BUTTON_CLASSNAME} text-white font-bold` - : `${MINI_BUTTON_CLASSNAME} text-gray-600` + ? `${MINI_BUTTON_CLASSNAME} text-navbar-active` + : `${MINI_BUTTON_CLASSNAME} text-navbar-inactive` } > {link.label} From 49a3919a6c32aff6fbc31408f4a7e13b2ee22957 Mon Sep 17 00:00:00 2001 From: Xavier Garcia Date: Mon, 4 May 2026 23:22:28 -0700 Subject: [PATCH 5/9] add reflexivity to right end of navbar links and hover animation --- apps/web/components/navbar.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx index 5201d94..91cd7b9 100644 --- a/apps/web/components/navbar.tsx +++ b/apps/web/components/navbar.tsx @@ -4,11 +4,15 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; const MINI_BUTTON_CLASSNAME = - "flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-transparent text-gray-700 font-medium hover:bg-gray-100 hover:shadow-lg transition cursor-pointer"; + "flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-lg bg-transparent text-gray-700 font-medium hover:scale-110 transition cursor-pointer"; const links = [ { href: "/tournaments", label: "Your Tournaments" }, { href: "/leaderboard", label: "Leaderboard" }, + { href: "/test0", label: "Test0" }, + { href: "/test1", label: "Test1" }, + { href: "/test2", label: "Test2" }, + { href: "/test3", label: "Test3" }, ]; export default function NavBar() { @@ -18,14 +22,18 @@ export default function NavBar() {