From 1659e80197d19d61a4803bdc63c7a5105349721f Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 29 May 2022 15:16:45 -0500
Subject: [PATCH] project cleanup, light routing

---
 client/src/App.scss                           | 101 +++++++++++++-----
 client/src/App.tsx                            |  11 +-
 client/src/components/Cart.tsx                |   0
 client/src/components/Cart/Cart.tsx           |   8 ++
 client/src/components/Cart/CartItem.tsx       |   8 ++
 client/src/components/CartItem.tsx            |   0
 client/src/components/Checkout.tsx            |   0
 client/src/components/ItemCard.tsx            |   0
 client/src/components/ItemPage.tsx            |   0
 client/src/components/LandingPage.tsx         |   7 +-
 client/src/components/Navbar.tsx              |   5 +-
 client/src/components/ProductFilter.tsx       |   0
 .../src/components/Products/ProductCard.tsx   |   6 ++
 .../src/components/Products/ProductFilter.tsx |   3 +
 .../src/components/Products/ProductPage.tsx   |   7 ++
 client/src/components/Products/Products.tsx   |  11 ++
 .../src/components/{ => User}/LoginForm.tsx   |   2 +-
 client/src/components/{ => User}/Register.tsx |   2 +-
 client/src/main.tsx                           |   2 +-
 client/src/{components => util}/Page.tsx      |   0
 20 files changed, 134 insertions(+), 39 deletions(-)
 delete mode 100644 client/src/components/Cart.tsx
 create mode 100644 client/src/components/Cart/Cart.tsx
 create mode 100644 client/src/components/Cart/CartItem.tsx
 delete mode 100644 client/src/components/CartItem.tsx
 delete mode 100644 client/src/components/Checkout.tsx
 delete mode 100644 client/src/components/ItemCard.tsx
 delete mode 100644 client/src/components/ItemPage.tsx
 delete mode 100644 client/src/components/ProductFilter.tsx
 create mode 100644 client/src/components/Products/ProductCard.tsx
 create mode 100644 client/src/components/Products/ProductFilter.tsx
 create mode 100644 client/src/components/Products/ProductPage.tsx
 create mode 100644 client/src/components/Products/Products.tsx
 rename client/src/components/{ => User}/LoginForm.tsx (79%)
 rename client/src/components/{ => User}/Register.tsx (81%)
 rename client/src/{components => util}/Page.tsx (100%)

diff --git a/client/src/App.scss b/client/src/App.scss
index 51a5c3a..a275dfb 100644
--- a/client/src/App.scss
+++ b/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
+  }
 }
\ No newline at end of file
diff --git a/client/src/App.tsx b/client/src/App.tsx
index d235d12..8bcaffe 100644
--- a/client/src/App.tsx
+++ b/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>
   )
diff --git a/client/src/components/Cart.tsx b/client/src/components/Cart.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Cart/Cart.tsx b/client/src/components/Cart/Cart.tsx
new file mode 100644
index 0000000..ee0c345
--- /dev/null
+++ b/client/src/components/Cart/Cart.tsx
@@ -0,0 +1,8 @@
+function Cart() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default Cart;
\ No newline at end of file
diff --git a/client/src/components/Cart/CartItem.tsx b/client/src/components/Cart/CartItem.tsx
new file mode 100644
index 0000000..f3bbfd3
--- /dev/null
+++ b/client/src/components/Cart/CartItem.tsx
@@ -0,0 +1,8 @@
+function CartItem() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default CartItem;
\ No newline at end of file
diff --git a/client/src/components/CartItem.tsx b/client/src/components/CartItem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Checkout.tsx b/client/src/components/Checkout.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/ItemCard.tsx b/client/src/components/ItemCard.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/ItemPage.tsx b/client/src/components/ItemPage.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/LandingPage.tsx b/client/src/components/LandingPage.tsx
index 2523e58..3c3a05d 100644
--- a/client/src/components/LandingPage.tsx
+++ b/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>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index da74389..23438db 100644
--- a/client/src/components/Navbar.tsx
+++ b/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>
     )
 }
diff --git a/client/src/components/ProductFilter.tsx b/client/src/components/ProductFilter.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Products/ProductCard.tsx b/client/src/components/Products/ProductCard.tsx
new file mode 100644
index 0000000..3cae3e8
--- /dev/null
+++ b/client/src/components/Products/ProductCard.tsx
@@ -0,0 +1,6 @@
+export default function ProductCard() {
+    return (
+        <>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/Products/ProductFilter.tsx b/client/src/components/Products/ProductFilter.tsx
new file mode 100644
index 0000000..cf7dbe1
--- /dev/null
+++ b/client/src/components/Products/ProductFilter.tsx
@@ -0,0 +1,3 @@
+export default function ProductFilter() {
+    return;
+}
\ No newline at end of file
diff --git a/client/src/components/Products/ProductPage.tsx b/client/src/components/Products/ProductPage.tsx
new file mode 100644
index 0000000..a4e2816
--- /dev/null
+++ b/client/src/components/Products/ProductPage.tsx
@@ -0,0 +1,7 @@
+import Page from "../../util/Page"
+
+export default function ProductPage() {
+    return (
+        <Page></Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/Products/Products.tsx b/client/src/components/Products/Products.tsx
new file mode 100644
index 0000000..57c1e50
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/components/LoginForm.tsx b/client/src/components/User/LoginForm.tsx
similarity index 79%
rename from client/src/components/LoginForm.tsx
rename to client/src/components/User/LoginForm.tsx
index e877632..254f92a 100644
--- a/client/src/components/LoginForm.tsx
+++ b/client/src/components/User/LoginForm.tsx
@@ -1,4 +1,4 @@
-import Page from "./Page";
+import Page from "../../util/Page";
 
 function LoginForm() {
     return (
diff --git a/client/src/components/Register.tsx b/client/src/components/User/Register.tsx
similarity index 81%
rename from client/src/components/Register.tsx
rename to client/src/components/User/Register.tsx
index feb28bb..01ebb22 100644
--- a/client/src/components/Register.tsx
+++ b/client/src/components/User/Register.tsx
@@ -1,4 +1,4 @@
-import Page from "./Page";
+import Page from "../../util/Page";
 
 function Register() {
     return (
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 4a1b150..c2f5663 100644
--- a/client/src/main.tsx
+++ b/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>
diff --git a/client/src/components/Page.tsx b/client/src/util/Page.tsx
similarity index 100%
rename from client/src/components/Page.tsx
rename to client/src/util/Page.tsx