defined several ui components, light styling

client/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.4.3",
         "sass": "^1.56.1"
       },
       "devDependencies": {
@@ -514,6 +515,14 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1417,6 +1426,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "dependencies": {
+        "@remix-run/router": "1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "dependencies": {
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1995,6 +2034,11 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2544,6 +2588,23 @@
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true
     },
+    "react-router": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "requires": {
+        "@remix-run/router": "1.0.3"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "requires": {
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

client/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "sass": "^1.56.1"
   },
   "devDependencies": {

client/src/App.tsx

@@ -1,26 +1,17 @@
-import { Page, Panel } from './components/ui';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Welcome from './components/pages/Welcome';
 import './sass/App.scss'
 
 function App() {
 
   return (
-    <Page extraStyles='App'>
-      <Panel>
-        <h1>RECIPE MANAGER</h1>
-        <h2>Simple Recipe Management and Sharing for the Home</h2>
-        <p>Keep all your most-used recipes handy in your own personal collection.</p>
-      </Panel>
-
-      <Panel>
-        <h2>Share Your Recipe Collection</h2>
-        <p>Share your personal collection with your friends and family, and subscribe to their collections.</p>
-      </Panel>
-
-      <Panel>
-        <h2>Build Shopping Lists Directly from Your Recipes</h2>
-        <p>Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.</p>
-      </Panel>
-    </Page>
+    <BrowserRouter>
+      <div className="App">
+        <Routes>
+          <Route path="/" element={<Welcome />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   )
 }
 

client/src/components/pages/Welcome.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Page, Panel } from "../ui"
+
+const Welcome = () => {
+    const [authorized, setAuthorized] = useState(false);
+    const navigate = useNavigate();
+
+    const authUserActions = (
+        <Panel extraStyles="inherit-background c-papyrus uppercase">
+            <Button>Browse Recipes</Button>
+            <Button>Collections</Button>
+            <Button>Grocery List</Button>
+        </Panel>
+    )
+
+    const callToRegister = (
+        <Panel extraStyles="inherit-background c-papyrus uppercase">
+            <h2>Ready to get started?</h2>
+            <Button onClick={() => navigate('/register')}>Register</Button>
+        </Panel>
+    )
+
+    return (
+        <Page extraStyles='App'>
+            <Panel extraStyles='inherit-background c-papyrus uppercase'>
+                <h1>Welcome to Recipin</h1>
+            </Panel>
+
+            <Panel extraStyles="inherit-background c-papyrus uppercase">
+                <h2>Simple Recipe Management and Sharing for the Home</h2>
+            </Panel>
+
+            <Panel extraStyles="inherit-background c-papyrus uppercase">
+                <h2>Build Shopping Lists Directly from Your Recipes</h2>
+            </Panel>
+
+            { authorized ? authUserActions : callToRegister }
+        </Page>
+    )
+}
+
+export default Welcome;

client/src/components/ui/Button.tsx

@@ -0,0 +1,12 @@
+import { ButtonComponent } from "../../util/types"
+import "/src/sass/components/Button.scss";
+
+const Button: ButtonComponent = ({ onClick = (() => {}), children, extraStyles }) => {
+    return (
+        <button onClick={onClick} className={`ui-button ${extraStyles || ''}`}>
+            { children || "Button" }
+        </button>
+    )
+}
+
+export default Button;

client/src/components/ui/Navbar.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import "/src/sass/components/Navbar.scss";
+
+const Navbar = () => {
+    // state will be evaluated here to determine which navbar
+    // variant will be displayed
+
+    // this will come from state (session?)
+    const [user, setUser] = useState('Mikayla');
+
+    const navbarLoggedIn = (
+        <div id="navbar">
+            <div className="navbar-block">
+                <h1>RECIPIN</h1>
+            </div>
+            <div className="navbar-block">
+                <p>Hi, {user}</p>
+                <span id="search-icon"></span>
+                <button onClick={() => console.log('menu button')}>...</button>
+            </div>
+        </div>
+    )
+
+    const navbarNotLoggedIn = (
+        <div id="navbar">
+            <div className="navbar-block">
+                <h1>RECIPIN</h1>
+            </div>
+            <div className='navbar-block'>
+                <button>LOG IN</button>
+            </div>
+        </div>
+    )
+
+    const navbarRegistering = (
+        <div id="navbar">
+            <div className="navbar-block">
+                <h1>RECIPIN</h1>
+            </div>
+            <div className="navbar-block">
+                <p>Hi, {user}</p>
+            </div>
+        </div>
+    )
+
+    return navbarLoggedIn;
+}
+
+export default Navbar;

client/src/components/ui/Page.tsx

@@ -1,9 +1,14 @@
 import { PageComponent } from "../../util/types"
+import Navbar from "./Navbar";
+import "/src/sass/components/Page.scss";
 
 const Page: PageComponent = ({ extraStyles, children }) => {
     return (
-        <main className={`page ${extraStyles || null}`}>
-            { children || null }
+        <main id="view">
+            <Navbar />
+            <section className={`Page ${extraStyles || null}`}>
+                { children || null }
+            </section>
         </main>
     )
 }

client/src/components/ui/Panel.tsx

@@ -1,8 +1,9 @@
 import { PanelComponent } from "../../util/types";
+import "/src/sass/components/Panel.scss";
 
 const Panel: PanelComponent = ({ children, extraStyles }) => {
     return (
-        <div className={`panel ${extraStyles || ''}`}>
+        <div className={`Panel ${extraStyles || ''}`}>
             { children || null }
         </div>
     )

client/src/components/ui/index.ts

@@ -1,7 +1,9 @@
+import Button from "./Button";
 import Page from "./Page";
 import Panel from "./Panel";
 
 export {
+    Button,
     Page,
     Panel
 }

client/src/sass/App.scss

@@ -1,6 +1,9 @@
+@import "./helpers/variables"; 
+
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
   text-align: center;
+  background-color: $richblack;
 }

client/src/sass/components/Button.scss

@@ -0,0 +1,20 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
+.ui-button {
+    background-color: $desertrose;
+    height: 1.75rem;
+    padding: 0 1rem;
+
+    border: transparent;
+    border-radius: 6px;
+
+    text-transform: uppercase;
+
+    &:hover {
+        background-color: $richblack;
+        transition: background-color 75ms ease;
+    }
+
+    @extend %variations;
+}

client/src/sass/components/Navbar.scss

@@ -0,0 +1,25 @@
+@import "../helpers/variables";
+
+#navbar {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    height: 4rem;
+
+    width: 100%;
+    position: fixed;
+    top: 0;
+    background-color: $richblack;
+    color: $papyrus;
+
+    .navbar-block {
+        display: inline-flex;
+        flex-direction: row nowrap;
+        align-items: center;
+        margin: 0 1rem;
+
+        > * {
+            margin: 0 12px;
+        }
+    }
+}

client/src/sass/components/Page.scss

@@ -0,0 +1,18 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
+.Page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    top: 4rem;
+
+    width: calc(100% - 2rem);
+    height: 100%;
+    margin: 1rem;
+    background-color: $rustred;
+    color: $papyrus;
+
+    @extend %variations;
+}

client/src/sass/components/Panel.scss

@@ -0,0 +1,22 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
+.Panel {
+    background-color: $papyrus;
+    color: black;
+    margin: 1rem 0;
+    padding: 12px;
+    width: 60%;
+    border-radius: 16px;
+
+    h1 {
+        font-size: 2.5rem;
+        letter-spacing: 4px;
+    }
+
+    h2 {
+        font-size: 1.2rem;
+    }
+
+    @extend %variations;
+}

client/src/sass/helpers/_placeholders.scss

@@ -0,0 +1,15 @@
+@import "./variables";
+
+%variations {
+    &.inherit-background {
+        background-color: inherit;
+    }
+
+    &.c-papyrus {
+        color: $papyrus;
+    }
+
+    &.uppercase {
+        text-transform: uppercase;
+    }
+}

client/src/sass/helpers/_variables.scss

@@ -0,0 +1,6 @@
+$rustred: #803413;
+$desertrose: #77567A;
+$richblack: #0A100D;
+$warningred: #BE430E;
+$lightpink: #CC99D0;
+$papyrus: #D6D5C9;

client/src/util/types.ts

@@ -5,5 +5,10 @@ interface PortalBase {
     extraStyles?: string
 }
 
+interface ButtonParams extends PortalBase {
+    onClick?: (params?: any) => any
+}
+
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
+export type ButtonComponent = FC<ButtonParams>