work on ui color scheme, more work on components

client/src/components/Content/Philosophy.tsx

@@ -1,12 +1,20 @@
+import Card from "../_ui/Card/Card";
 import Page from "../_ui/Page/Page";
 
 export default function Philosophy() {
     return (
         <Page>
             <h1>The Express Spices Philosophy</h1>
+            <p>
+                Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.<br/>
+                Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.
+            </p>
 
-            <p>Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+            <Card additionalClasses="medium short" />
-            <p>Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+
+            <p>
+                We care a lot about things and stuff at Express Spice Market. If you're ever concerned about our things and stuff we will do what we can to alleviate your concerns.
+            </p>
         </Page>
     )
 }

client/src/components/Home.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom"
 import Button from "./_ui/Button/Button";
+import Card from "./_ui/Card/Card";
 import Page from "./_ui/Page/Page";
 
 export default function Home() {
@@ -7,14 +8,21 @@ export default function Home() {
 
     return (
         <Page additionalClasses="homepage">
-            <h1>The finest spice shop on the internet.</h1>
+            <Card additionalClasses="welcome-section coffee bigtext">
-            <p>Or at the very least, what their website could look like.</p>
+                <h1>The finest spice shop on the internet.</h1>
+                <p>Or at the very least, what their website could look like.</p>
+            </Card>
 
-            <div className="button-row">
+            <Card additionalClasses="med-short-h med-short-len thyme" />
-                <Button onClick={() => navigate('/products')}>View our Products</Button>
+
-                <Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
+            <Card additionalClasses="long coffee">
-                <Button onClick={() => navigate('/contact')}>Contact Us</Button>
+                <p>Our mission: to deliver quality herbs and spices.<br/>See our offerings and learn more about us below:</p>
-            </div>
+                <div className="button-row">
+                    <Button onClick={() => navigate('/products')}>View our Products</Button>
+                    <Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
+                    <Button onClick={() => navigate('/contact')}>Contact Us</Button>
+                </div>
+            </Card>
         </Page>
     )
 }

client/src/components/Nav/Navbar.scss

@@ -1,5 +1,22 @@
+@import "../../sass/helpers/variables";
+
 #navbar-section {
-    background-color: green;
+    background-color: $coffee;
     display: flex;
     align-items: baseline;
+    justify-content: space-between;
+
+    a {
+        margin: 0 0 0 1rem;
+        color: $nutmeg;
+    }
+
+    .user-data {
+        display: flex;
+        width: 50%;
+        justify-content: flex-end;
+        .ui-button-component {
+            margin: 0 6px;
+        }
+    }
 }

client/src/components/Nav/Navbar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSupabase } from "../../supabase/SupabaseContext"
+import Button from "../_ui/Button/Button";
 import "./Navbar.scss";
 
 export default function Navbar() {
@@ -24,15 +25,15 @@ export default function Navbar() {
                         user?.email && (
                             <>
                             <p>{user.email}</p>
-                            <button onClick={() => navigate('/my-profile')}>View Profile</button>
+                            <Button onClick={() => navigate('/my-profile')}>View Profile</Button>
                             </>
                         )
                     }
                     {
-                        user ? <button onClick={handleLogout}>Log Out</button> : (
+                        user ? <Button onClick={handleLogout}>Log Out</Button> : (
                             <>
-                            <button onClick={() => navigate('/login')}>Log In</button>
+                            <Button onClick={() => navigate('/login')}>Log In</Button>
-                            <button onClick={() => navigate('/register')}>Register</button>
+                            <Button onClick={() => navigate('/register')}>Register</Button>
                             </>
                         )
                     }

client/src/components/Product/AllProducts.tsx

@@ -9,7 +9,7 @@ import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
     const [productData, setProductData] = useState<ProductModel[]>();
-    const [view, setView] = useState<JSX.Element>(<h1>Loading...</h1>);
+    const [view, setView] = useState<JSX.Element>(<Page additionalClasses="products-page"><h1>Loading...</h1></Page>);
 
     useEffect(() => {
         getAllProducts()
@@ -23,10 +23,10 @@ export default function AllProducts() {
 
     useEffect(() => {
         setView(
-            <Page>
+            <Page additionalClasses="products-page">
                 <h1>Product Catalog</h1>
                 
-                <Card additionalClasses="all-products-filter">
+                <Card additionalClasses="all-products-filter med-short-len">
                     <div>
                         <p>Filter results by:</p>
                         <select>

client/src/components/_ui/Card/Card.tsx

@@ -1,8 +1,8 @@
 import { UICardType } from "../../../util/types"
 
-const Card: UICardType = ({ children, additionalClasses = "", width = 45 }) => {
+const Card: UICardType = ({ children = <></>, additionalClasses = "" }) => {
     return (
-        <section className={`ui-card-component ${additionalClasses} width-${width}`}>
+        <section className={`ui-card-component ${additionalClasses}`}>
             { children }
         </section>
     )

client/src/sass/App.scss

@@ -1,5 +1,7 @@
-@import "./components/Page";
+@import "./components/Button";
+@import "./components/Card";
 @import "./components/Gallery";
+@import "./components/Page";
 
 #root {
   margin: 0;

client/src/sass/components/_Card.scss

@@ -1,3 +1,61 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
 .ui-card-component {
-    
+    background-color: gray;
+    display: block;
+    height: auto;
+    width: auto;
+    border-radius: 18px;
+    padding: 1rem;
+    margin: 2rem;
+
+    @extend %background-colors;
+
+    &.long {
+        width: 75vw;
+    }
+
+    &.medheight {
+        height: 50vh;
+    }
+
+    &.medlen {
+        width: 50vw;
+    }
+
+    &.medium {
+        height: 50vh;
+        width: 50vw;
+    }
+
+    &.med-short-len {
+        width: 30vw;
+    }
+
+    &.med-short-h {
+        height: 30vh;
+    }
+
+    &.short {
+        height: 20vh;
+    }
+
+    &.xshort {
+        height: 10vh;
+    }
+
+    &.skinny {
+        width: 20vw;
+    }
+
+    &.center {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &.column {
+        flex-flow: column nowrap;
+    }
 }

client/src/sass/components/_Gallery.scss

@@ -1,18 +1,8 @@
 .ui-gallery-component {
-    background-color: red;
+    background-color: inherit;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: center;
     padding: 1rem 0;
-    
-    &.product-card-list {
-        .ui-card-component {
-            width: 30%;
-            margin: 1rem;
-            padding: 1rem 0;
-            color: black;
-            background-color: white;
-        }
-    }
 }

client/src/sass/components/_Page.scss

@@ -1,5 +1,47 @@
+@import "../helpers/variables";
+
 .ui-page-component {
-    &.homepage {
+  display: flex;
-      background-color: purple;
+  flex-flow: column nowrap;
+  align-items: center;
+
+  &.homepage {
+    height: 100vh;
+    background-color: $nutmeg;
+    .welcome-section {
+      h1 {
+        font-size: 1.8rem;
+      }
     }
+
+    .button-row {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: center;
+      .ui-button-component {
+        margin: 0 1rem;
+      }
+    }
+  }
+
+  &.products-page {
+    background-color: $thyme;
+    .all-products-filter {
+      background-color: $coffee;
+    }
+
+    .product-card-list {
+      background-color: inherit;
+      .product-card {
+        background-color: $papyrus;
+        color: $coffee;
+        width: 30%;
+        margin: 1rem;
+        padding: 1rem 0;
+
+        p { padding: 0 1rem; }
+      }
+    }
+  }
 }

client/src/sass/helpers/_placeholders.scss

@@ -0,0 +1,46 @@
+%background-colors {
+    &.darkred {
+        background-color: $darkred;
+    }
+
+    &.coffee {
+        background-color: $coffee;
+    }
+
+    &.nutmeg {
+        background-color: $nutmeg;
+        color: black;
+    }
+
+    &.thyme {
+        background-color: $thyme;
+        color: black;
+    }
+
+    &.papyrus {
+        background-color: $papyrus;
+        color: black;
+    }
+}
+
+%text-colors {
+    &.darkred {
+        color: $darkred;
+    }
+
+    &.coffee {
+        color: $coffee;
+    }
+
+    &.nutmeg {
+        color: $nutmeg;
+    }
+
+    &.thyme {
+        color: $thyme;
+    }
+
+    &.papyrus {
+        color: $papyrus;
+    }
+}

client/src/sass/helpers/_variables.scss

@@ -0,0 +1,5 @@
+$coffee: rgb(58, 21, 21);
+$darkred: rgb(100, 31, 31);
+$nutmeg: rgb(144, 113, 90);
+$thyme: rgb(63, 82, 53);
+$papyrus: rgb(236, 231, 221);

client/src/util/types.ts

@@ -9,7 +9,7 @@ export type UIGalleryType = FC<UIGalleryParams>
 export type UIPageType = FC<UIPageParams>
 
 // definitions for component params
-interface UIParams {
+export interface UIParams {
     additionalClasses?: string
 }
 
@@ -18,11 +18,8 @@ interface UIButtonParams extends UIParams {
     children?: string
 }
 
-interface UIPageParams extends UIParams { children: ReactNode }
-
 interface UICardParams extends UIParams {
-    children: ReactNode
+    children?: ReactNode
-    width?: number
 }
 
 interface UIGalleryParams extends UIParams {
@@ -30,6 +27,8 @@ interface UIGalleryParams extends UIParams {
     columns: number
 }
 
+interface UIPageParams extends UIParams { children: ReactNode }
+
 // data models
 
 export interface ProductModel extends UICardParams {