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

components/NavBar.js

@@ -2,6 +2,7 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 import styles from "@/app/(main)/map/map.module.css";
 
 export default function NavBar({ activeLink, teamData }) {
@@ -50,8 +51,17 @@ export default function NavBar({ activeLink, teamData }) {
         className={`nav-item ${activeLink === "map" ? "active" : ""}`}
         onClick={handleMapClick}
       >
-        <div className="nav-icon">🗺️</div>
-        <div className="nav-label">Map</div>
+        <div className="nav-icon icon-container">
+          <Image
+            src="/images/home.svg"
+            alt="Map"
+            width={40}
+            height={40}
+            className={`icon-image ${
+              activeLink === "map" ? "inverted-icon" : ""
+            }`}
+          />
+        </div>
       </Link>
 
       <Link
@@ -66,16 +76,34 @@ export default function NavBar({ activeLink, teamData }) {
         href={teamData?.id ? `/${teamData.id}` : "/team-selection"}
         className={`nav-item ${activeLink === "team" ? "active" : ""}`}
       >
-        <div className="nav-icon">👥</div>
-        <div className="nav-label">Team</div>
+        <div className="nav-icon icon-container">
+          <Image
+            src="/images/profile.svg"
+            alt="Team"
+            width={40}
+            height={40}
+            className={`icon-image ${
+              activeLink === "team" ? "inverted-icon" : ""
+            }`}
+          />
+        </div>
       </Link>
 
       <Link
         href="/leaderboard"
-        className={`nav-item ${activeLink === "leaderboard" ? "active" : ""}`}
+        className={`nav-item leaderboard-item ${
+          activeLink === "leaderboard" ? "active" : ""
+        }`}
       >
-        <div className="nav-icon">🏆</div>
-        <div className="nav-label">Leaderboard</div>
+        <div className="nav-icon leaderboard-icon">
+          <Image
+            src="/images/leaderboard.svg"
+            alt="Leaderboard"
+            width={32}
+            height={32}
+            className={activeLink === "leaderboard" ? "inverted-icon" : ""}
+          />
+        </div>
       </Link>
     </nav>
   );