project cleanup, light routing

client/src/App.scss

@@ -1,17 +1,43 @@
 /* todo: define and import fonts */
 
+/* color variables */
+$lightblue-1: rgb(81, 144, 147);
+$midblue-1: rgb(65, 65, 159);
+$darkblue-1: rgb(51, 53, 66);
+
 /* universal styles */
 .page {
   display: flex;
   position: relative;
-  top: 5rem;
+  width: 100vw;
+  height: 100vh;
+  top: 4rem;
   flex-direction: column;
   align-items: center;
   z-index: 7;
+  background-color: $midblue-1;
 }
 
 button {
-  background-color: green;
+  background-color: $midblue-1;
+  color: white;
+  border-radius: 12px;
+  border-style: outset;
+  border-color: $lightblue-1;
+  width: 8rem;
+  height: 3rem;
+}
+
+button:hover {
+  background-color: $lightblue-1;
+  border-color: $midblue-1;
+  box-shadow: 0 0 4px 4px red;
+}
+
+button:active {
+  background-color: black;
+  border-style: inset;
+  border-color: white;
 }
 
 /* navbar styles */
@@ -22,39 +48,58 @@ nav {
   color: white;
   top: 0;
   justify-content: space-around;
+  align-items: center;
   width: 100%;
-  height: auto;
+  height: 4rem;
   border-bottom: 1px solid white;
   z-index: 9;
+
+  a {
+    color: white;
+  }
 }
 
 /* landing page styles */
-.landing > * {
-  display: flex;
-  flex-flow: column wrap;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  height: auto;
-  padding: 1.2rem;
-  margin-bottom: 5rem;
-}
 
-.landing header {
-  margin-top: 8rem;
-  width: 45vw;
-  background-color: gray;
-}
+.landing {
+  * {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
 
-.landing section {
-  width: 60vw;
-  background-color: gray;
-}
+  header {
+    margin-top: 4rem;
+    width: 45vw;
+  }
+  section {
+    width: 60vw;
+  }
 
-.shop-buttons {
-  display: flex;
-  flex-flow: row nowrap;
-  width: 45vw;
-  background-color: gray;
-  justify-content: space-around;
+  header, section {
+    background-color: $lightblue-1;
+    padding: 1.2rem;
+    margin-bottom: 5rem;
+  }
+
+  header, section, .shop-buttons {
+    box-shadow: 4px 4px white;
+    transition: box-shadow ease 1s;
+  }
+
+  header:hover, section:hover, .shop-buttons:hover {
+    box-shadow: 12px 12px white;
+    transition: box-shadow ease 600ms;
+  }
+
+  .shop-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 45vw;
+    height: 8rem;
+    justify-content: space-around;
+    background-color: $darkblue-1
+  }
 }

client/src/App.tsx

@@ -1,10 +1,12 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
 import NavBar from './components/Navbar';
 import LandingPage from './components/LandingPage';
+import Products from './components/Products/Products';
+import LoginForm from './components/User/LoginForm';
+import Register from './components/User/Register';
 
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import './App.css'
-import LoginForm from './components/LoginForm';
-import Register from './components/Register';
+import './App.scss'
 
 function App() {
   return (
@@ -15,6 +17,7 @@ function App() {
           <Route path="/" element={<LandingPage/>} />
           <Route path="/login" element={<LoginForm/>} />
           <Route path="/register" element={<Register/>} />
+          <Route path="/products" element={<Products/>} />
         </Routes>
     </BrowserRouter>
   )

client/src/components/Cart/Cart.tsx

@@ -0,0 +1,8 @@
+function Cart() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default Cart;

client/src/components/Cart/CartItem.tsx

@@ -0,0 +1,8 @@
+function CartItem() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default CartItem;

client/src/components/LandingPage.tsx

@@ -1,6 +1,9 @@
-import Page from "./Page";
+import Page from "../util/Page";
+import { useNavigate } from "react-router-dom";
 
 function LandingPage() {
+    const navigate = useNavigate();
+
     return (
         <Page classes="landing">
             <header>
@@ -15,7 +18,7 @@ function LandingPage() {
             </section>
 
             <div className="shop-buttons">
-                <button>SHOP ALL</button>
+                <button onClick={() => navigate('/products')}>SHOP ALL</button>
                 <button>SHOP BY...</button>
             </div>
         </Page>

client/src/components/Navbar.tsx

@@ -2,12 +2,13 @@ import { useState } from "react";
 
 function NavBar() {
     const [loggedIn, setLoggedIn] = useState(false);
+    const [userID, setUserID] = useState(null);
 
     return (
         <nav>
-            <p>Logo</p>
+            <a href="/">Logo</a>
             <p>Search bar</p>
-            {loggedIn ? <p>Profile info</p> : <p>Log In</p>}
+            {loggedIn ? <a href={`/users/${userID}`}>Profile info</a> : <a href="/login">Log In</a>}
         </nav>
     )
 }

client/src/components/Products/ProductCard.tsx

@@ -0,0 +1,6 @@
+export default function ProductCard() {
+    return (
+        <>
+        </>
+    )
+}

client/src/components/Products/ProductFilter.tsx

@@ -0,0 +1,3 @@
+export default function ProductFilter() {
+    return;
+}

client/src/components/Products/ProductPage.tsx

@@ -0,0 +1,7 @@
+import Page from "../../util/Page"
+
+export default function ProductPage() {
+    return (
+        <Page></Page>
+    )
+}

client/src/components/Products/Products.tsx

@@ -0,0 +1,11 @@
+import Page from "../../util/Page";
+
+function Products() {
+    return (
+        <Page>
+            <h1>Found 2 products</h1>
+        </Page>
+    )
+}
+
+export default Products;

client/src/components/User/LoginForm.tsx

@@ -1,4 +1,4 @@
-import Page from "./Page";
+import Page from "../../util/Page";
 
 function LoginForm() {
     return (

client/src/components/User/Register.tsx

@@ -1,4 +1,4 @@
-import Page from "./Page";
+import Page from "../../util/Page";
 
 function Register() {
     return (

client/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
+import './index.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>