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

more minor ui updates; to do: connect supabase auth to database user info storage, include name, etc

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

30
client/src/components/Auth/AuthForm.tsx
View File

@@ -6,6 +6,7 @@ import { loginHTML, registerHTML } from "./authExtraText";
import { useState } from "react"; import { useState } from "react";
import Button from "../_ui/Button/Button"; import Button from "../_ui/Button/Button";
import Page from "../_ui/Page/Page"; import Page from "../_ui/Page/Page";
import Card from "../_ui/Card/Card";
const AuthForm: AuthFormType = ({ format }) => { const AuthForm: AuthFormType = ({ format }) => {
const [input, setInput] = useState<FormInput>({ email: "", password: "" }); const [input, setInput] = useState<FormInput>({ email: "", password: "" });
@@ -15,20 +16,23 @@ const AuthForm: AuthFormType = ({ format }) => {
const formHTML = format == "login" ? loginHTML : registerHTML; const formHTML = format == "login" ? loginHTML : registerHTML;
return ( return (
<Page> <Page additionalClasses="turmeric">
<h1>{formText}</h1> <Card additionalClasses="papyrus">
{formHTML} {formHTML}
</Card>
<form className="auth-form"> <Card additionalClasses="papyrus">
<div className="form-row"> <form className="auth-form">
<label htmlFor="auth-form-email">Email:</label> <div className="form-row">
<input id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} /> <label htmlFor="auth-form-email">Email:</label>
</div> <input autoComplete="email" id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
<div className="form-row"> </div>
<label htmlFor="auth-form-password">Password:</label> <div className="form-row">
<input id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} /> <label htmlFor="auth-form-password">Password:</label>
</div> <input autoComplete="password" id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
</form> </div>
</form>
</Card>
<div className="auth-actions"> <div className="auth-actions">
<Button onClick={formFunction}>{formText}</Button> <Button onClick={formFunction}>{formText}</Button>

6
client/src/components/Auth/authExtraText.tsx
View File

@@ -1,6 +1,6 @@
export const loginHTML = ( export const loginHTML = (
<> <>
<h2>Welcome back!</h2> <h1>Welcome back!</h1>
<p>It's great to see you again.</p> <p>It's great to see you again.</p>
<p>Please enter your credentials below to login:</p> <p>Please enter your credentials below to login:</p>
</> </>
@@ -8,8 +8,8 @@ export const loginHTML = (
export const registerHTML = ( export const registerHTML = (
<> <>
<h2>Hi there!</h2> <h1>Hi there!</h1>
<p>Thank you so much for your interest in the site!</p> <p>Thank you so much for your interest in the site!</p>
<p>Please use the form below to register.</p> <p>Please use the form below to register:</p>
</> </>
) )

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

@@ -10,7 +10,7 @@ export default function Philosophy() {
Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things. Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.
</p> </p>
<Card additionalClasses="medium short" /> <Card additionalClasses="medium short thyme" />
<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. 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.

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

@@ -1,9 +1,13 @@
@import "../helpers/variables"; @import "../helpers/variables";
@import "../helpers/placeholders";
.ui-page-component { .ui-page-component {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
background-color: $darkred;
@extend %background-colors;
&.homepage { &.homepage {
height: 100vh; height: 100vh;

18
client/src/sass/helpers/_placeholders.scss
View File

@@ -21,6 +21,16 @@
background-color: $papyrus; background-color: $papyrus;
color: black; color: black;
} }
&.lavender {
background-color: $lavender;
color: black;
}
&.turmeric {
background-color: $turmeric;
color: black;
}
} }
%text-colors { %text-colors {
@@ -43,4 +53,12 @@
&.papyrus { &.papyrus {
color: $papyrus; color: $papyrus;
} }
&.lavender {
color: $lavender;
}
&.turmeric {
color: $turmeric;
}
} }

4
client/src/sass/helpers/_variables.scss
View File

@@ -2,4 +2,6 @@ $coffee: rgb(58, 21, 21);
$darkred: rgb(100, 31, 31); $darkred: rgb(100, 31, 31);
$nutmeg: rgb(144, 113, 90); $nutmeg: rgb(144, 113, 90);
$thyme: rgb(63, 82, 53); $thyme: rgb(63, 82, 53);
$papyrus: rgb(236, 231, 221); $papyrus: rgb(236, 231, 221);
$lavender: rgb(194, 182, 224);
$turmeric: rgb(207, 174, 39);