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() {