innocuous-symmetry/e-commerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

work on ui color scheme, more work on components

Browse Source
This commit is contained in:
Mikayla Dobson
2022-10-10 16:13:46 -05:00
parent ebb1dc842c
commit 8d5bdb7715
15 changed files with 215 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/Content/Philosophy.tsx
View File

@@ -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>
<p>Furthermore, 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>
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>
)
}

22
client/src/components/Home.tsx
View File

@@ -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>
<p>Or at the very least, what their website could look like.</p>
<Card additionalClasses="welcome-section coffee bigtext">
<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">
<Button onClick={() => navigate('/products')}>View our Products</Button>
<Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
<Button onClick={() => navigate('/contact')}>Contact Us</Button>
</div>
<Card additionalClasses="med-short-h med-short-len thyme" />
<Card additionalClasses="long coffee">
<p>Our mission: to deliver quality herbs and spices.<br/>See our offerings and learn more about us below:</p>
<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>
)
}

19
client/src/components/Nav/Navbar.scss
View File

@@ -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;
}
}
}

9
client/src/components/Nav/Navbar.tsx
View File

@@ -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('/register')}>Register</button>
<Button onClick={() => navigate('/login')}>Log In</Button>
<Button onClick={() => navigate('/register')}>Register</Button>
</>
)
}

6
client/src/components/Product/AllProducts.tsx
View File

@@ -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>

4
client/src/components/_ui/Card/Card.tsx
View File

@@ -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>
)

4
client/src/sass/App.scss
View File

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

60
client/src/sass/components/_Card.scss
View File

@@ -1,3 +1,61 @@
.ui-card-component {
@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;
}
}

12
client/src/sass/components/_Gallery.scss
View File

@@ -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;
}
}
}

46
client/src/sass/components/_Page.scss
View File

@@ -1,5 +1,47 @@
@import "../helpers/variables";
.ui-page-component {
&.homepage {
background-color: purple;
display: flex;
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; }
}
}
}
}

0
client/src/sass/helpers/__variables.scss
View File

46
client/src/sass/helpers/_placeholders.scss Normal file
View File

@@ -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;
}
}

0
client/src/sass/helpers/__queries.scss → client/src/sass/helpers/_queries.scss
View File

5
client/src/sass/helpers/_variables.scss Normal file
View File

@@ -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);

9
client/src/util/types.ts
View File

@@ -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
width?: number
children?: ReactNode
}
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 {