Nav stylings

package.json

@@ -33,6 +33,7 @@
     "passport-google-oauth20": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "sass": "^1.59.3"
   },
   "devDependencies": {

src/components/App.jsx → src/App.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import NavBar from './NavBar.jsx';
-import SurfData from './SurfData.jsx';
+import NavBar from './components/NavBar.jsx';
+import SurfData from './components/SurfData.jsx';
+import Homepage from './pages/Homepage.jsx';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 const App = () => {
   const [user, setUser] = useState(null);
@@ -28,12 +30,13 @@ const App = () => {
   }, []);
 
   return (
-    <div id='wrapper'>
-      <div id='app'>
-        <NavBar user={user} setUser={setUser} />
-        <SurfData />
-      </div>
-    </div>
+    <BrowserRouter>
+      <NavBar user={user} />
+      <Routes>
+        <Route path='/' exact element={<Homepage />} />
+        {/* add route for eventual login page */}
+      </Routes>
+    </BrowserRouter>
   );
 };
 

src/components/NavBar.jsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import logo from '../images/JunoSurfLogo.png';
-import Login from './Login.jsx';
 
-const NavBar = ({ user, setUser }) => {
+const NavBar = ({ user }) => {
   const googleLogin = () => {
     window.open('http://localhost:3000/auth/google', '_self');
   };
@@ -19,16 +18,15 @@ const NavBar = ({ user, setUser }) => {
 
   return (
     <div id='navbar'>
-      <img id='logo' src={logo} alt='Juno Surf' />
+      <div id='logo-container'>
+        <img src={logo} alt='Juno Surf' />
+      </div>
       {user ? (
-        <>
-          <p>welcome, {user.username}</p>
-          <button onClick={googleLogout}>Logout</button>
-        </>
+        <button id='login-logout' className='logout' onClick={googleLogout}>
+          Logout
+        </button>
       ) : (
-        <button onClick={googleLogin}>
-          Google
-          <br />
+        <button id='login-logout' onClick={googleLogin}>
           Login
         </button>
       )}

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import App from './components/App.jsx';
+import App from './App.jsx';
 import './styles.scss';
 import * as ReactDOMClient from 'react-dom/client';
 

src/pages/Homepage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import SurfData from '../components/SurfData.jsx';
+const Homepage = () => {
+  return (
+    <div className='pages homepage'>
+      <div id='app'>
+        <SurfData />
+      </div>
+    </div>
+  );
+};
+
+export default Homepage;

src/styles.scss

@@ -1,43 +1,89 @@
 @import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
 //font-family: 'Rock Salt', cursive;
+
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: 'Rock Salt', cursive;
+
+  --content-width: 1000px;
+  --page-background: rgb(248, 244, 219);
+  --page-background-dark: #cdbf95;
 }
 body {
-  background-color: seashell;
-  font-family: 'Rock Salt', cursive;
-  padding: 10px;
+  background-color: var(--page-background);
 }
 img {
   max-width: 100%;
-}
-#wrapper {
-  // background-color: red;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-#app {
-  max-width: 450px;
+  max-height: 100%;
 }
 #navbar {
   z-index: 100;
-  background-color: #b9f1fe;
   position: fixed;
   top: 0;
   left: 0;
-  width: 80%;
-  height: 75px;
-  width: auto;
+  width: 100vw;
   display: flex;
   flex-direction: row;
-  border-bottom-right-radius: 30px;
-  #logo {
-    margin: 0.3rem 3rem 0.3rem 0.5rem;
+  justify-content: space-between;
+
+  #logo-container {
+    height: 80px;
+    background-color: #b9f1fe;
+    border-bottom-right-radius: 30px;
+    padding: 0.5rem 1rem 0.2rem 3rem;
   }
+  #login-logout {
+    border-bottom-left-radius: 30px;
+    padding: 1rem 3rem 1rem 1rem;
+    border: none;
+    background-color: #b9f1fe;
+    transition: all 0.2s ease-in-out;
+    font-size: 1.3rem;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 60px;
+      left: 0.5rem;
+      width: 0px;
+      border-bottom: 2px solid black;
+      transition: inherit;
+      transform: rotate(-10deg);
+    }
+    &:hover {
+      background-color: #47daff;
+      padding-left: 2rem;
+      padding-right: 2rem;
+
+      &::before {
+        left: 1rem;
+        width: 99px;
+      }
+    }
+    &:active {
+      background-color: #37aecc;
+    }
+    &.logout:hover::before {
+      width: 120px;
+    }
+  }
+}
+
+.pages {
+  max-width: var(--content-width);
+  padding: 1rem;
+  padding-top: 50px;
+  margin: 0 auto;
+  min-height: 100vh;
+  box-shadow: 0 0 100px 5px var(--page-background-dark);
+}
+.homepage {
 }
+// #app {
+//   max-width: 450px;
+// }
 
 #surf-data {
   margin-top: 80px;