From f46546c4fda88b0040b8b1c1aacd30e468e8024c Mon Sep 17 00:00:00 2001
From: Evan Yang <evanjyang4@gmail.com>
Date: Tue, 20 Aug 2024 13:19:56 -0700
Subject: [PATCH 1/2] mui

---
 .../presentational/returnUserForm.jsx         | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/client/src/components/presentational/returnUserForm.jsx b/client/src/components/presentational/returnUserForm.jsx
index bde529317..4e4fb17c8 100644
--- a/client/src/components/presentational/returnUserForm.jsx
+++ b/client/src/components/presentational/returnUserForm.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
+import { Box } from '@mui/material';
 
 const ReturnUserForm = (props) => {
   return (
-    <div className="check-in-container">
-      <div className="check-in-headers">
-        <h3>Welcome back!</h3>
-      </div>
-      <div className="check-in-form">
+    <Box className="check-in-container">
+      <Box className="check-in-headers">
+        <Typography variant="h3">Welcome back!</Typography>
+      </Box>
+      <Box className="check-in-form">
         <form
           className="form-check-in"
           autoComplete="on"
           onSubmit={(e) => e.preventDefault()}
         >
-          <div className="form-row">
-            <div className="form-input-text">
+          <Box className="form-row">
+            <Box className="form-input-text">
               <label htmlFor="email">
                 Which email address did you use to check-in last time?
               </label>
@@ -27,22 +28,22 @@ const ReturnUserForm = (props) => {
                 required
                 autoComplete="email"
               />
-            </div>
+            </Box>
             <p>
               {"(This allows easy use of the app. We'll never sell your data!)"}
             </p>
-          </div>
+          </Box>
 
-          {props.isError && props.errorMessage.length > 1 &&
-            <div className="error">{props.errorMessage}</div>
-          }
+          {props.isError && props.errorMessage.length > 1 && (
+            <Box className="error">{props.errorMessage}</Box>
+          )}
           {props.user === false && (
-            <div className="error">Try entering your email again.</div>
+            <Box className="error">Try entering your email again.</Box>
           )}
 
           {!props.user && !props.isLoading ? (
-            <div className="form-row">
-              <div className="form-input-button">
+            <Box className="form-row">
+              <Box className="form-input-button">
                 <button
                   type="submit"
                   className="form-check-in-submit"
@@ -53,11 +54,11 @@ const ReturnUserForm = (props) => {
                 >
                   CHECK IN
                 </button>
-              </div>
-            </div>
+              </Box>
+            </Box>
           ) : (
-            <div className="form-row">
-              <div className="form-input-button">
+            <Box className="form-row">
+              <Box className="form-input-button">
                 <button
                   type="submit"
                   className="form-check-in-submit block"
@@ -65,12 +66,12 @@ const ReturnUserForm = (props) => {
                 >
                   CHECKING IN...
                 </button>
-              </div>
-            </div>
+              </Box>
+            </Box>
           )}
         </form>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 export default ReturnUserForm;

From bd02f9c2e262b4f8511c5591a2d2220736119bae Mon Sep 17 00:00:00 2001
From: Evan Yang <evanjyang4@gmail.com>
Date: Wed, 13 Nov 2024 15:44:31 -0800
Subject: [PATCH 2/2] corrections

---
 .../presentational/returnUserForm.jsx         | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/src/components/presentational/returnUserForm.jsx b/client/src/components/presentational/returnUserForm.jsx
index 4e4fb17c8..c8ad13881 100644
--- a/client/src/components/presentational/returnUserForm.jsx
+++ b/client/src/components/presentational/returnUserForm.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
+import Button from '@mui/material/Button';
+import { FormControl, FormLabel, TextField } from '@mui/material';
 
 const ReturnUserForm = (props) => {
   return (
@@ -8,17 +10,17 @@ const ReturnUserForm = (props) => {
         <Typography variant="h3">Welcome back!</Typography>
       </Box>
       <Box className="check-in-form">
-        <form
+        <FormControl
           className="form-check-in"
           autoComplete="on"
           onSubmit={(e) => e.preventDefault()}
         >
           <Box className="form-row">
             <Box className="form-input-text">
-              <label htmlFor="email">
+              <FormLabel htmlFor="email">
                 Which email address did you use to check-in last time?
-              </label>
-              <input
+              </FormLabel>
+              <TextField
                 type="email"
                 name="email"
                 placeholder="Email Address"
@@ -44,7 +46,8 @@ const ReturnUserForm = (props) => {
           {!props.user && !props.isLoading ? (
             <Box className="form-row">
               <Box className="form-input-button">
-                <button
+                <Button
+                  variant="contained"
                   type="submit"
                   className="form-check-in-submit"
                   onClick={(e) => props.checkEmail(e)}
@@ -53,23 +56,24 @@ const ReturnUserForm = (props) => {
                   }
                 >
                   CHECK IN
-                </button>
+                </Button>
               </Box>
             </Box>
           ) : (
             <Box className="form-row">
               <Box className="form-input-button">
-                <button
+                <Button
+                  variant="contained"
                   type="submit"
                   className="form-check-in-submit block"
                   onClick={(e) => e.preventDefault()}
                 >
                   CHECKING IN...
-                </button>
+                </Button>
               </Box>
             </Box>
           )}
-        </form>
+        </FormControl>
       </Box>
     </Box>
   );