Merge pull request #5 from calebwharton/oorja

Redesigned nav
calebwharton · Jul 13, 2024 · b58b989 · b58b989
2 parents 76442ac + 934d70f
commit b58b989
Show file tree

Hide file tree

Showing 4 changed files with 591 additions and 17 deletions.
diff --git a/web/package.json b/web/package.json
@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.1",
+    "@mui/material": "^5.16.1",
     "@tanstack/react-query": "^5.18.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",

diff --git a/web/src/components/NavBar.tsx b/web/src/components/NavBar.tsx
@@ -1,20 +1,19 @@
 import { Link } from "react-router-dom";
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 export default function NavBar() {
     return (
-        <div className="">
-            <nav className="navbar bg-gprimary text-primary py-6">
-                <div className="navbar-left">
-                    <Link to="/">HOME</Link>
-                    <Link to="/about">ABOUT US</Link>
+        <div className="bg-gray-800 py-6">
+            <nav className="container mx-auto flex justify-between items-center">
+                <div className="flex items-center space-x-8">
+                    <Link to="/" className="text-offwhite font-title text-4xl px-6">RESTORE</Link>
+                    <Link to="/about" className="text-offwhite text-lg px-6">ABOUT</Link>
+                    <Link to="/social" className="text-offwhite text-lg px-6">SOCIAL</Link>
                 </div>
-                <div className="navbar-center">
-                    <span className="logo font-title text-4xl">ReStore</span>
-                </div>
-                <div className="navbar-right">
-                    <Link to="/events">EVENTS</Link>
-                    <Link to="/leaderboard">LEADERBOARD</Link>
-                    <Link to="/profile">Profile</Link>
+                <div>
+                    <Link to="/profile" className="text-offwhite">
+                        <AccountCircleIcon fontSize="large" />
+                    </Link>
                 </div>
             </nav>
         </div>

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -19,7 +19,7 @@ export default {
                 gprimary: "#ABBA77",
                 gsecondary: "#E5ECC3",
                 navy: "#364652",
-                background: "#FFF6E4",
+                offwhite: "#FFF6E4",
                 accent: "#AACCCC",
 
             },