From 8d0bca1d87ecdd95395065fcee19bfe4b482577d Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sun, 23 Mar 2025 14:33:53 +0000 Subject: [PATCH] fixed a bunch of styling and component usage made sure almost all viewer pages use the navbar component properly instead of using their hardcoded version, started to match the styling of the design for a lot of pages --- app/(main)/clue/[clueId]/page.js | 100 +++++++++++++++--------------- app/(main)/leaderboard/page.js | 10 ++- app/(main)/map/map.module.css | 24 ++++--- app/(main)/stats/page.js | 58 +++++++++++++---- app/(main)/stats/stats.module.css | 22 +++---- app/(main)/team/[teamId]/page.js | 67 ++++++++++++++------ app/globals.css | 29 +++++++++ clue_hunt.db | Bin 233472 -> 241664 bytes components/NavBar.js | 42 ++++++++++--- public/images/Waves.svg | 9 +++ public/images/barrel-crop.svg | 14 +++++ public/images/cannon ball.svg | 14 +++++ public/images/fallback-map.jpg | 1 - public/images/home.svg | 10 +-- public/images/profile.svg | 10 +-- public/images/scroll.svg | 8 +++ 16 files changed, 292 insertions(+), 126 deletions(-) create mode 100644 public/images/Waves.svg create mode 100644 public/images/barrel-crop.svg create mode 100644 public/images/cannon ball.svg delete mode 100644 public/images/fallback-map.jpg create mode 100644 public/images/scroll.svg diff --git a/app/(main)/clue/[clueId]/page.js b/app/(main)/clue/[clueId]/page.js index 3bfa499..16df04d 100644 --- a/app/(main)/clue/[clueId]/page.js +++ b/app/(main)/clue/[clueId]/page.js @@ -10,6 +10,8 @@ import { import Link from "next/link"; import dynamic from "next/dynamic"; import { use } from "react"; +// Add missing import for NavBar component +import NavBar from "@/components/NavBar"; // Dynamically import the QR scanner component with no SSR const EnhancedQRScanner = dynamic( @@ -731,25 +733,8 @@ export default function CluePage({ params }) { - {/* Bottom Navigation */} -
- -
πŸ—ΊοΈ
-
Map
- - -
πŸ“Š
-
Stats
- - -
πŸ‘₯
-
Team
- - -
πŸ†
-
Leaderboard
- -
+ {/* Replace hardcoded navbar with NavBar component */} + ); diff --git a/app/(main)/leaderboard/page.js b/app/(main)/leaderboard/page.js index 3979504..fe49692 100644 --- a/app/(main)/leaderboard/page.js +++ b/app/(main)/leaderboard/page.js @@ -161,7 +161,10 @@ export default function LeaderboardPage() { {/* Only show navigation bar when the hunt hasn't ended */} {!huntJustEnded && ( - + )} {/* Add a "back to home" button when the hunt has ended */} @@ -186,7 +189,10 @@ export default function LeaderboardPage() { } .page-header { - background-color: #68543c; + background-image: url("/images/Bottom-Bar.svg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; color: white; padding: 15px 20px; display: flex; diff --git a/app/(main)/map/map.module.css b/app/(main)/map/map.module.css index 8185158..cc79810 100644 --- a/app/(main)/map/map.module.css +++ b/app/(main)/map/map.module.css @@ -9,20 +9,22 @@ } .map-banner { - background-color: #68543c; + background-image: url("/images/Bottom-Bar.svg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; color: white; - padding: 15px; + padding: 15px 20px; display: flex; - align-items: center; justify-content: space-between; - border-bottom: 2px solid #4a3c2a; - z-index: 10; - flex-shrink: 0; /* Prevent banner from shrinking */ + align-items: center; + position: relative; } .team-name { - font-size: 18px; + font-size: 1.1rem; font-weight: bold; + color: white; flex: 1; text-align: left; white-space: nowrap; @@ -32,7 +34,12 @@ } .elapsed-time { + position: absolute; + left: 50%; + transform: translateX(-50%); text-align: center; + color: white; + font-weight: bold; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; @@ -46,8 +53,9 @@ } .team-code { - font-size: 16px; + font-size: 1.1rem; font-weight: bold; + color: white; flex: 1; text-align: right; white-space: nowrap; diff --git a/app/(main)/stats/page.js b/app/(main)/stats/page.js index 6d7c624..094dec7 100644 --- a/app/(main)/stats/page.js +++ b/app/(main)/stats/page.js @@ -175,9 +175,12 @@ export default function StatsPage() { return (
-
-

Team Stats

-

{teamStats.team.name}

+ {/* Replace header with team banner that matches team page */} +
+
+

Team Name: {teamStats.team.name}

+
{teamStats.team.code}
+
@@ -232,23 +235,56 @@ export default function StatsPage() {