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

client/src/components/Auth/AuthForm.tsx

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

client/src/components/Auth/authExtraText.tsx

@@ -1,6 +1,6 @@
 export const loginHTML = (
     <>
-    <h2>Welcome back!</h2>
+    <h1>Welcome back!</h1>
     <p>It's great to see you again.</p>
     <p>Please enter your credentials below to login:</p>
     </>
@@ -8,8 +8,8 @@ export const loginHTML = (
 
 export const registerHTML = (
     <>
-    <h2>Hi there!</h2>
+    <h1>Hi there!</h1>
     <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>
     </>
 )

client/src/components/Content/Philosophy.tsx

@@ -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.
             </p>
 
-            <Card additionalClasses="medium short" />
+            <Card additionalClasses="medium short thyme" />
 
             <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.

client/src/sass/components/_Page.scss

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

client/src/sass/helpers/_placeholders.scss

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

client/src/sass/helpers/_variables.scss

@@ -2,4 +2,6 @@ $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);
+$papyrus: rgb(236, 231, 221);
+$lavender: rgb(194, 182, 224);
+$turmeric: rgb(207, 174, 39);