From 0c444f2dc438d66e6a435c2497e893045a0f00bc Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Fri, 27 Jun 2025 12:44:26 +0000 Subject: [PATCH 01/18] Added navbar component scaffold --- client/src/components/ui/navbar.tsx | 20 ++++++++++++++++++ client/src/pages/index.tsx | 32 ++++++++++++++++------------- 2 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 client/src/components/ui/navbar.tsx diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx new file mode 100644 index 0000000..33e4a80 --- /dev/null +++ b/client/src/components/ui/navbar.tsx @@ -0,0 +1,20 @@ +export function Navbar() { + return ( +
+ {/* Logo container */} +
LOGO
+ + {/* Navbar traversal options container */} +
+
Home
+
Schedule
+
Format & Rules
+
Sponsor & Guest
+
Leaderboard
+
+ View Live Results +
+
+
+ ); +} diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index c051281..fa35435 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -1,6 +1,7 @@ import { Inter as FontSans } from "next/font/google"; import { useState } from "react"; +import { Navbar } from "@/components/ui/navbar"; import { usePings } from "@/hooks/pings"; import { cn } from "@/lib/utils"; @@ -18,19 +19,22 @@ export default function Home() { }); return ( -
-

Test title

- -

- Response from server: {data as string} -

-
+
+ +
+

Test title

+ +

+ Response from server: {data as string} +

+
+
); } From 5d9d4438aa50b62f1ac9a33a9601d03540ec1a3c Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Mon, 30 Jun 2025 05:49:03 +0000 Subject: [PATCH 02/18] Added Figma text styles for css & tailwind use --- client/src/pages/_app.tsx | 27 +++++++++++++++++++++++---- client/src/pages/index.tsx | 2 ++ client/src/styles/globals.css | 29 +++++++++++++++++++++++++++++ client/tailwind.config.ts | 2 ++ 4 files changed, 56 insertions(+), 4 deletions(-) diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 628e9f2..31c2e71 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -3,14 +3,33 @@ import "@/styles/globals.css"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import type { AppProps } from "next/app"; +import { Montserrat, Work_Sans } from "next/font/google"; + +const fontMontserrat = Montserrat({ + subsets: ["latin"], + variable: "--font-montserrat", +}); + +const fontWorkSans = Work_Sans({ + subsets: ["latin"], + variable: "--font-montserrat", +}); const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { return ( - - - - + <> + + + + + + ); } diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index c051281..2e30a5f 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -24,6 +24,8 @@ export default function Home() { fontSans.variable, )} > + {/* Delete after style testing */} +

subtitle style test

Test title

diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index a4bf41d..a0a91a7 100644 --- a/client/tailwind.config.ts +++ b/client/tailwind.config.ts @@ -25,19 +25,21 @@ const config = { worksans: ["var(--font-worksans)", ...fontFamily.sans], }, colors: { - border: "hsl(var(--border))", + primary: "#F89200", + secondary: "#54595F", + text: "#7A7A7A", + light: "#F4F4F4", + dark: "#212529", + bgDark: "#151518", + bgLight: "F3F3F3", + bgCard: "#33302D", + border: "#4E4846", + buttonDark: "#030304", + // pre-set colors, to be deleted input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", From dd6233d4902260d3568695e476eda9ab4dd25084 Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Mon, 30 Jun 2025 11:17:26 +0000 Subject: [PATCH 04/18] changed style jsx to inline variable declaration --- client/src/pages/_app.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 31c2e71..ea178c8 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -19,17 +19,11 @@ const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { return ( - <> - +
- +
); } From 94e696cc4f79f21c7240cca619638bf766b88882 Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Mon, 30 Jun 2025 11:20:06 +0000 Subject: [PATCH 05/18] hotfix: added missing font variable --- client/src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index ea178c8..7296880 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -19,7 +19,7 @@ const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { return ( -
+
From 5735ab9d19d524112225553ae8146e073ca6b563 Mon Sep 17 00:00:00 2001 From: Jayshira Date: Tue, 1 Jul 2025 10:38:13 +0000 Subject: [PATCH 06/18] quick hotfix: worksans variable not set properly --- client/src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index 7296880..256fe7d 100644 --- a/client/src/pages/_app.tsx +++ b/client/src/pages/_app.tsx @@ -12,7 +12,7 @@ const fontMontserrat = Montserrat({ const fontWorkSans = Work_Sans({ subsets: ["latin"], - variable: "--font-montserrat", + variable: "--font-worksans", }); const queryClient = new QueryClient(); From fec3fe4315d03e469127b7097198cc9005c42ad9 Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Wed, 2 Jul 2025 04:48:46 +0000 Subject: [PATCH 07/18] Adjusted title-large style, navbar letter spacing & added navbar styling --- client/src/components/ui/navbar.tsx | 16 ++++++++-------- client/src/pages/index.tsx | 2 +- client/src/styles/globals.css | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx index 33e4a80..a76727c 100644 --- a/client/src/components/ui/navbar.tsx +++ b/client/src/components/ui/navbar.tsx @@ -1,17 +1,17 @@ export function Navbar() { return ( -
+
{/* Logo container */}
LOGO
{/* Navbar traversal options container */} -
-
Home
-
Schedule
-
Format & Rules
-
Sponsor & Guest
-
Leaderboard
-
+
+
Home
+
Schedule
+
Format & Rules
+
Sponsor & Guest
+
Leaderboard
+
View Live Results
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index fa35435..441db7a 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -27,7 +27,7 @@ export default function Home() { fontSans.variable, )} > -

Test title

+

Title Test

diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css index 671145f..1724333 100644 --- a/client/src/styles/globals.css +++ b/client/src/styles/globals.css @@ -71,7 +71,7 @@ @apply bg-background text-foreground; } .title-large { - @apply font-montserrat text-[60px] font-semibold leading-[1em]; + @apply font-montserrat text-[60px] font-bold leading-[1em]; } .title { @apply font-montserrat text-[46px] font-semibold leading-[1.15em]; @@ -88,7 +88,7 @@ } /* navbar */ .medium-sm { - @apply font-montserrat text-[14px] font-bold; + @apply font-montserrat text-[14px] font-bold tracking-wide; } .body-lg { @apply font-worksans text-[22px] font-[500]; From dee1c35b290d844a70c08a587b01f7558118a8ba Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Fri, 4 Jul 2025 07:17:02 +0000 Subject: [PATCH 08/18] Changed navbar

to Links, added mobile view scaffold & react icons --- client/next.config.mjs | 3 + client/package-lock.json | 10 ++++ client/package.json | 1 + client/src/components/ui/navbar.tsx | 93 ++++++++++++++++++++++++----- client/src/pages/index.tsx | 2 +- client/src/styles/globals.css | 9 +++ 6 files changed, 103 insertions(+), 15 deletions(-) diff --git a/client/next.config.mjs b/client/next.config.mjs index e9441a6..93b12c1 100644 --- a/client/next.config.mjs +++ b/client/next.config.mjs @@ -7,6 +7,9 @@ const isWindowsDevContainer = () => /** @type {import('next').NextConfig} */ const nextConfig = { + images: { + domains: ["squadrone.com.au"], + }, reactStrictMode: true, // dumb fix for windows docker webpack: isWindowsDevContainer() diff --git a/client/package-lock.json b/client/package-lock.json index dc09ced..c9e3fd5 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -20,6 +20,7 @@ "next": "15.3.3", "react": "19.1.0", "react-dom": "19.1.0", + "react-icons": "^5.5.0", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7" }, @@ -5743,6 +5744,15 @@ "react": "^19.1.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/client/package.json b/client/package.json index dbe39d1..22c5776 100644 --- a/client/package.json +++ b/client/package.json @@ -27,6 +27,7 @@ "next": "15.3.3", "react": "19.1.0", "react-dom": "19.1.0", + "react-icons": "^5.5.0", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7" }, diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx index a76727c..1650fcb 100644 --- a/client/src/components/ui/navbar.tsx +++ b/client/src/components/ui/navbar.tsx @@ -1,20 +1,85 @@ -export function Navbar() { +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { FiAlignJustify, FiX } from "react-icons/fi"; + +export default function Navbar() { + const router = useRouter(); + const [menuOpen, setMenuOpen] = useState(false); + const handleNav = () => { + setMenuOpen(!menuOpen); + }; return ( -

- {/* Logo container */} -
LOGO
+ <> + +
+
+
+ +
+
+
+ + Home + + + Schedule + + + Format & Rules + + + Sponsor & Guest + + + Leaderboard +
-
+ ); } diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 441db7a..fd88d5d 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -1,11 +1,11 @@ import { Inter as FontSans } from "next/font/google"; import { useState } from "react"; -import { Navbar } from "@/components/ui/navbar"; import { usePings } from "@/hooks/pings"; import { cn } from "@/lib/utils"; import { Button } from "../components/ui/button"; +import Navbar from "../components/ui/navbar"; const fontSans = FontSans({ subsets: ["latin"], diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css index 1724333..d29cd65 100644 --- a/client/src/styles/globals.css +++ b/client/src/styles/globals.css @@ -100,3 +100,12 @@ @apply font-worksans text-[16px] font-normal; } } + +@layer components { + .nav-link { + @apply text-dark hover:text-primary transition-colors duration-200; + } + .nav-link-active { + @apply text-primary; + } +} \ No newline at end of file From 74d0da918dcdcbff8f3d761672f7e2da4a5fd3d0 Mon Sep 17 00:00:00 2001 From: survivzhang Date: Fri, 4 Jul 2025 21:19:34 +0000 Subject: [PATCH 09/18] the nav bar text color flow with the path and build empty route to test --- client/src/components/ui/navbar.tsx | 63 +++++++++++++++-------------- client/src/pages/format-rules.tsx | 40 ++++++++++++++++++ client/src/pages/leaderboard.tsx | 40 ++++++++++++++++++ client/src/pages/schedule.tsx | 40 ++++++++++++++++++ client/src/pages/sponsor-guest.tsx | 40 ++++++++++++++++++ 5 files changed, 193 insertions(+), 30 deletions(-) create mode 100644 client/src/pages/format-rules.tsx create mode 100644 client/src/pages/leaderboard.tsx create mode 100644 client/src/pages/schedule.tsx create mode 100644 client/src/pages/sponsor-guest.tsx diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx index 1650fcb..7980e2f 100644 --- a/client/src/components/ui/navbar.tsx +++ b/client/src/components/ui/navbar.tsx @@ -7,6 +7,17 @@ import { FiAlignJustify, FiX } from "react-icons/fi"; export default function Navbar() { const router = useRouter(); const [menuOpen, setMenuOpen] = useState(false); + type NavLink = { + label: string; + href: string; + }; + const navlinks: NavLink[] = [ + { label: "Home", href: "/" }, + { label: "Schedule", href: "/schedule" }, + { label: "Format & Rules", href: "/format-rules" }, + { label: "Sponsor & Guest", href: "/sponsor-guest" }, + { label: "Leaderboard", href: "/leaderboard" }, + ]; const handleNav = () => { setMenuOpen(!menuOpen); }; @@ -27,21 +38,17 @@ export default function Navbar() { {/* Navbar traversal options container */}
- - Home - - - Schedule - - - Format & Rules - - - Sponsor & Guest - - - Leaderboard - + {navlinks.map((link) => ( + + {link.label} + + ))}
View Live Results
@@ -63,21 +70,17 @@ export default function Navbar() {
- - Home - - - Schedule - - - Format & Rules - - - Sponsor & Guest - - - Leaderboard - + {navlinks.map((link) => ( + + {link.label} + + ))}
diff --git a/client/src/pages/format-rules.tsx b/client/src/pages/format-rules.tsx new file mode 100644 index 0000000..fd88d5d --- /dev/null +++ b/client/src/pages/format-rules.tsx @@ -0,0 +1,40 @@ +import { Inter as FontSans } from "next/font/google"; +import { useState } from "react"; + +import { usePings } from "@/hooks/pings"; +import { cn } from "@/lib/utils"; + +import { Button } from "../components/ui/button"; +import Navbar from "../components/ui/navbar"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export default function Home() { + const [clicked, setClicked] = useState(false); + const { data, isLoading } = usePings({ + enabled: clicked, + }); + + return ( +
+ +
+

Title Test

+ +

+ Response from server: {data as string} +

+
+
+ ); +} diff --git a/client/src/pages/leaderboard.tsx b/client/src/pages/leaderboard.tsx new file mode 100644 index 0000000..fd88d5d --- /dev/null +++ b/client/src/pages/leaderboard.tsx @@ -0,0 +1,40 @@ +import { Inter as FontSans } from "next/font/google"; +import { useState } from "react"; + +import { usePings } from "@/hooks/pings"; +import { cn } from "@/lib/utils"; + +import { Button } from "../components/ui/button"; +import Navbar from "../components/ui/navbar"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export default function Home() { + const [clicked, setClicked] = useState(false); + const { data, isLoading } = usePings({ + enabled: clicked, + }); + + return ( +
+ +
+

Title Test

+ +

+ Response from server: {data as string} +

+
+
+ ); +} diff --git a/client/src/pages/schedule.tsx b/client/src/pages/schedule.tsx new file mode 100644 index 0000000..fd88d5d --- /dev/null +++ b/client/src/pages/schedule.tsx @@ -0,0 +1,40 @@ +import { Inter as FontSans } from "next/font/google"; +import { useState } from "react"; + +import { usePings } from "@/hooks/pings"; +import { cn } from "@/lib/utils"; + +import { Button } from "../components/ui/button"; +import Navbar from "../components/ui/navbar"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export default function Home() { + const [clicked, setClicked] = useState(false); + const { data, isLoading } = usePings({ + enabled: clicked, + }); + + return ( +
+ +
+

Title Test

+ +

+ Response from server: {data as string} +

+
+
+ ); +} diff --git a/client/src/pages/sponsor-guest.tsx b/client/src/pages/sponsor-guest.tsx new file mode 100644 index 0000000..fd88d5d --- /dev/null +++ b/client/src/pages/sponsor-guest.tsx @@ -0,0 +1,40 @@ +import { Inter as FontSans } from "next/font/google"; +import { useState } from "react"; + +import { usePings } from "@/hooks/pings"; +import { cn } from "@/lib/utils"; + +import { Button } from "../components/ui/button"; +import Navbar from "../components/ui/navbar"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export default function Home() { + const [clicked, setClicked] = useState(false); + const { data, isLoading } = usePings({ + enabled: clicked, + }); + + return ( +
+ +
+

Title Test

+ +

+ Response from server: {data as string} +

+
+
+ ); +} From 4d100b1deb716a8831c23cab9548a5d30ba1457d Mon Sep 17 00:00:00 2001 From: Shinetopia Date: Sat, 5 Jul 2025 01:18:39 +0000 Subject: [PATCH 10/18] Fixed mobile navbar font style, adjusted padding & media query width --- client/src/components/ui/navbar.tsx | 8 ++++---- client/tailwind.config.ts | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx index 7980e2f..1f33bb4 100644 --- a/client/src/components/ui/navbar.tsx +++ b/client/src/components/ui/navbar.tsx @@ -26,7 +26,7 @@ export default function Navbar() { @@ -69,7 +69,7 @@ export default function Navbar() {
-
+
{navlinks.map((link) => ( Date: Sat, 5 Jul 2025 01:56:37 +0000 Subject: [PATCH 11/18] Made code prettier --- client/src/components/ui/navbar.tsx | 4 ++-- client/src/styles/globals.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx index 1f33bb4..31fbce2 100644 --- a/client/src/components/ui/navbar.tsx +++ b/client/src/components/ui/navbar.tsx @@ -25,7 +25,6 @@ export default function Navbar() { <>