From 282474fbd9345e53d657f68cc15510c4a6d94293 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Thu, 25 Sep 2025 15:12:11 -0700
Subject: [PATCH 1/8] Migrate HTML to MUI Line 22 to 60.

---
 .../components/presentational/newUserForm.jsx | 111 ++++++++----------
 1 file changed, 48 insertions(+), 63 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index 178be15fb..7ab4f6168 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
-import { FormControl, TextField } from '@mui/material';
+import { useState } from 'react';
+import { Box, FormControl, TextField, Typography } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { format } from 'date-fns';
 import '../../sass/CheckIn.scss';
 
 const NewUserForm = (props) => {
@@ -20,61 +19,47 @@ const NewUserForm = (props) => {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <div className="check-in-container">
-        <div className="check-in-headers">
-          <h3>Welcome!</h3>
-          <h4>Tell us a little bit about yourself:</h4>
-        </div>
-        <div className="check-in-form">
+      <Box className="check-in-container">
+        <Box className="check-in-headers">
+          <Typography variant="h3">Welcome!</Typography>
+          <Typography variant="h4">
+            Tell us a little bit about yourself:
+          </Typography>
+        </Box>
+        <Box className="check-in-form">
           <form
             className="form-check-in"
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}
           >
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="text"
-                  name="firstName"
-                  placeholder="First Name"
-                  value={props.firstName.toString()}
-                  onChange={props.handleFirstNameChange}
-                  aria-label="First Name"
-                  required
-                />
-              </div>
-            </div>
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="text"
-                  name="lastName"
-                  placeholder="Last Name"
-                  value={props.lastName.toString()}
-                  onChange={props.handleLastNameChange}
-                  aria-label="Last Name"
-                  required
-                />
-              </div>
-            </div>
-            <div className="form-row">
-              <div className="form-input-text">
-                <input
-                  type="email"
-                  name="email"
-                  placeholder="Email Address"
-                  value={props.formInput.email.toString().toLowerCase()}
-                  onChange={props.handleInputChange}
-                  aria-label="Email Address"
-                  required
-                />
-                <label htmlFor="email">
-                  {
-                    "(This allows easy use of the app. We'll never sell your data!)"
-                  }
-                </label>
-              </div>
-            </div>
+            <Box className="form-row">
+              <TextField
+                label="First Name"
+                name="firstName"
+                value={props.firstName.toString()}
+                onChange={props.handleFirstNameChange}
+                required
+              />
+            </Box>
+            <Box className="form-row">
+              <TextField
+                label="Last Name"
+                name="lastName"
+                value={props.lastName.toString()}
+                onChange={props.handleLastNameChange}
+                required
+              />
+            </Box>
+            <Box className="form-row">
+              <TextField
+                label="Email Address"
+                name="email"
+                value={props.formInput.email.toString().toLowerCase()}
+                onChange={props.handleInputChange}
+                helperText="This allows easy use of the app. We'll never sell your data!"
+                required
+              />
+            </Box>
 
             {props.questions.length !== 0 &&
               props.questions.map((question) => {
@@ -88,7 +73,7 @@ const NewUserForm = (props) => {
                           placeholder={question.placeholderText}
                           value={
                             Object.keys(props.formInput).includes(
-                              question.htmlName
+                              question.htmlName,
                             )
                               ? props.formInput[
                                   question.htmlName.toString()
@@ -176,13 +161,13 @@ const NewUserForm = (props) => {
                                 maxWidth: '300px',
                                 borderBottom: 'none',
                                 '& input[type=text]': {
-                                    height: '40px',
-                                    width: '100%',
-                                    borderBottom: 'none',
-                                    paddingLeft: '0.5rem',
-                                    color: 'rgb(250, 17, 79)',
-                                    fontWeight: '600', // semi-bold
-                                  },
+                                  height: '40px',
+                                  width: '100%',
+                                  borderBottom: 'none',
+                                  paddingLeft: '0.5rem',
+                                  color: 'rgb(250, 17, 79)',
+                                  fontWeight: '600', // semi-bold
+                                },
                               }}
                             >
                               {(params) => (
@@ -227,8 +212,8 @@ const NewUserForm = (props) => {
               </div>
             )}
           </form>
-        </div>
-      </div>
+        </Box>
+      </Box>
     </LocalizationProvider>
   );
 };

From 7193ec38e26a88867f49ffc543baee97c8134c44 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Thu, 25 Sep 2025 22:12:38 -0700
Subject: [PATCH 2/8] Migrated HTML to MUI

---
 .../components/presentational/newUserForm.jsx | 156 +++++++++---------
 1 file changed, 74 insertions(+), 82 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index 7ab4f6168..efac74b92 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -1,5 +1,15 @@
 import { useState } from 'react';
-import { Box, FormControl, TextField, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -27,7 +37,7 @@ const NewUserForm = (props) => {
           </Typography>
         </Box>
         <Box className="check-in-form">
-          <form
+          <Box
             className="form-check-in"
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}
@@ -65,29 +75,24 @@ const NewUserForm = (props) => {
               props.questions.map((question) => {
                 return (
                   question.type === 'text' && (
-                    <div key={question._id} className="form-row">
-                      <div className="form-input-text">
-                        <input
-                          type="text"
-                          name={question.htmlName}
-                          placeholder={question.placeholderText}
-                          value={
-                            Object.keys(props.formInput).includes(
-                              question.htmlName,
-                            )
-                              ? props.formInput[
-                                  question.htmlName.toString()
-                                ].toString()
-                              : ''
-                          }
-                          onChange={props.handleInputChange}
-                          required
-                        />
-                        <label htmlFor={question.htmlName}>
-                          {question.questionText}
-                        </label>
-                      </div>
-                    </div>
+                    <Box key={question._id} className="form-row">
+                      <TextField
+                        label={question.questionText}
+                        name={question.htmlName}
+                        placeholder={question.placeholderText}
+                        value={
+                          Object.keys(props.formInput).includes(
+                            question.htmlName,
+                          )
+                            ? props.formInput[
+                                question.htmlName.toString()
+                              ].toString()
+                            : ''
+                        }
+                        onChange={props.handleInputChange}
+                        required
+                      />
+                    </Box>
                   )
                 );
               })}
@@ -96,34 +101,29 @@ const NewUserForm = (props) => {
               props.questions.map((question) => {
                 return (
                   question.type === 'select' && (
-                    <div key={question._id} className="form-row last-row">
-                      <div className="form-input-radio">
-                        <label htmlFor={question.htmlName}>
-                          IS THIS YOUR FIRST TIME ATTENDING A HACK FOR LA
-                          MEETING?
-                        </label>
-                        <div className="radio-buttons first-time-select">
-                          <input
-                            id="radio1"
-                            type="radio"
-                            name={question.htmlName}
-                            value={true}
-                            onChange={props.handleNewMemberChange}
-                            defaultChecked
-                            required
+                    <Box key={question._id} className="form-row last-row">
+                      <FormControl component="fieldset">
+                        <FormLabel component="legend">
+                          {question.questionText}
+                        </FormLabel>
+                        <RadioGroup
+                          name={question.htmlName}
+                          defaultValue="true"
+                          onChange={props.handleNewMemberChange}
+                        >
+                          <FormControlLabel
+                            value="true"
+                            control={<Radio />}
+                            label="Yes"
                           />
-                          <label htmlFor="radio1">Yes</label>
-                          <input
-                            id="radio2"
-                            type="radio"
-                            name={question.htmlName}
-                            value={false}
-                            onChange={props.handleNewMemberChange}
+                          <FormControlLabel
+                            value="false"
+                            control={<Radio />}
+                            label="No"
                           />
-                          <label htmlFor="radio2">No</label>
-                        </div>
-                      </div>
-                    </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </Box>
                   )
                 );
               })}
@@ -133,11 +133,11 @@ const NewUserForm = (props) => {
                 props.questions.map((question) => {
                   return (
                     question.htmlName === 'attendanceLength' && (
-                      <div key={question._id} className="form-row">
-                        <div className="form-input-text">
-                          <label htmlFor={question.htmlName}>
+                      <Box key={question._id} className="form-row">
+                        <FormControl component="fieldset">
+                          <FormLabel component="legend">
                             {question.questionText}
-                          </label>
+                          </FormLabel>
                           <FormControl
                             sx={{
                               margin: '1rem 0',
@@ -175,43 +175,35 @@ const NewUserForm = (props) => {
                               )}
                             </DatePicker>
                           </FormControl>
-                        </div>
-                      </div>
+                        </FormControl>
+                      </Box>
                     )
                   );
                 })}
 
             {props.isError && props.errorMessage.length > 1 && (
-              <div className="error">{props.errorMessage}</div>
+              <Typography className="error">{props.errorMessage}</Typography>
             )}
 
             {!props.isLoading ? (
-              <div className="form-row">
-                <div className="form-input-button">
-                  <button
-                    type="submit"
-                    className="form-check-in-submit"
-                    onClick={(e) => props.checkInNewUser(e, selectedDate)}
-                    disabled={!selectedDate}
-                  >
-                    {props.newMember ? 'CREATE PROFILE' : 'CHECK IN'}
-                  </button>
-                </div>
-              </div>
+              <Box className="form-row">
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={(e) => props.checkInNewUser(e, selectedDate)}
+                  disabled={!selectedDate}
+                >
+                  {props.newMember ? 'CREATE PROFILE' : 'CHECK IN'}
+                </Button>
+              </Box>
             ) : (
-              <div className="form-row">
-                <div className="form-input-button">
-                  <button
-                    type="submit"
-                    className="form-check-in-submit"
-                    onClick={(e) => e.preventDefault()}
-                  >
-                    CHECKING IN...
-                  </button>
-                </div>
-              </div>
+              <Box className="form-row">
+                <Button variant="contained" disabled>
+                  CHECKING IN...
+                </Button>
+              </Box>
             )}
-          </form>
+          </Box>
         </Box>
       </Box>
     </LocalizationProvider>

From e2d91ed4309c6b9a6b4b4008ad2bf31dac8b282b Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Fri, 26 Sep 2025 09:35:37 -0700
Subject: [PATCH 3/8] Added outlined variants and removed few lines.

---
 .../components/presentational/newUserForm.jsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index efac74b92..c9b466293 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -37,7 +37,7 @@ const NewUserForm = (props) => {
           </Typography>
         </Box>
         <Box className="check-in-form">
-          <Box
+          <form
             className="form-check-in"
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}
@@ -45,6 +45,7 @@ const NewUserForm = (props) => {
             <Box className="form-row">
               <TextField
                 label="First Name"
+                variant="outlined"
                 name="firstName"
                 value={props.firstName.toString()}
                 onChange={props.handleFirstNameChange}
@@ -54,6 +55,7 @@ const NewUserForm = (props) => {
             <Box className="form-row">
               <TextField
                 label="Last Name"
+                variant="outlined"
                 name="lastName"
                 value={props.lastName.toString()}
                 onChange={props.handleLastNameChange}
@@ -63,6 +65,7 @@ const NewUserForm = (props) => {
             <Box className="form-row">
               <TextField
                 label="Email Address"
+                variant="outlined"
                 name="email"
                 value={props.formInput.email.toString().toLowerCase()}
                 onChange={props.handleInputChange}
@@ -72,12 +75,13 @@ const NewUserForm = (props) => {
             </Box>
 
             {props.questions.length !== 0 &&
-              props.questions.map((question) => {
-                return (
+              props.questions.map(
+                (question) =>
                   question.type === 'text' && (
                     <Box key={question._id} className="form-row">
                       <TextField
                         label={question.questionText}
+                        variant="outlined"
                         name={question.htmlName}
                         placeholder={question.placeholderText}
                         value={
@@ -93,13 +97,12 @@ const NewUserForm = (props) => {
                         required
                       />
                     </Box>
-                  )
-                );
-              })}
+                  ),
+              )}
 
             {props.questions.length !== 0 &&
-              props.questions.map((question) => {
-                return (
+              props.questions.map(
+                (question) =>
                   question.type === 'select' && (
                     <Box key={question._id} className="form-row last-row">
                       <FormControl component="fieldset">
@@ -124,14 +127,13 @@ const NewUserForm = (props) => {
                         </RadioGroup>
                       </FormControl>
                     </Box>
-                  )
-                );
-              })}
+                  ),
+              )}
             {props.newMember === true
               ? null
               : props.questions.length !== 0 &&
-                props.questions.map((question) => {
-                  return (
+                props.questions.map(
+                  (question) =>
                     question.htmlName === 'attendanceLength' && (
                       <Box key={question._id} className="form-row">
                         <FormControl component="fieldset">
@@ -177,9 +179,8 @@ const NewUserForm = (props) => {
                           </FormControl>
                         </FormControl>
                       </Box>
-                    )
-                  );
-                })}
+                    ),
+                )}
 
             {props.isError && props.errorMessage.length > 1 && (
               <Typography className="error">{props.errorMessage}</Typography>
@@ -203,7 +204,7 @@ const NewUserForm = (props) => {
                 </Button>
               </Box>
             )}
-          </Box>
+          </form>
         </Box>
       </Box>
     </LocalizationProvider>

From ad69fe5ef14044cf3915207c8766ddd10e9be896 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Fri, 26 Sep 2025 09:54:08 -0700
Subject: [PATCH 4/8] Change HTML form to MUI Box

---
 client/src/components/presentational/newUserForm.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index c9b466293..d3bdfef6c 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -37,7 +37,7 @@ const NewUserForm = (props) => {
           </Typography>
         </Box>
         <Box className="check-in-form">
-          <form
+          <Box
             className="form-check-in"
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}
@@ -204,7 +204,7 @@ const NewUserForm = (props) => {
                 </Button>
               </Box>
             )}
-          </form>
+          </Box>
         </Box>
       </Box>
     </LocalizationProvider>

From 3130993f729e7161e91d7177635ffcd9db40da70 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Mon, 29 Sep 2025 20:15:55 -0700
Subject: [PATCH 5/8] Updated h3 style on 'Welcome'ls

---
 client/src/components/presentational/newUserForm.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index d3bdfef6c..b5d8d64ef 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -31,7 +31,9 @@ const NewUserForm = (props) => {
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Box className="check-in-container">
         <Box className="check-in-headers">
-          <Typography variant="h3">Welcome!</Typography>
+          <Typography variant="h3" fontSize="2.8em">
+            Welcome!
+          </Typography>
           <Typography variant="h4">
             Tell us a little bit about yourself:
           </Typography>

From 5c09d59b7df6097fc1f029c73c4a3c2a2c0f4221 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Tue, 30 Sep 2025 21:07:24 -0700
Subject: [PATCH 6/8] Improve MUI styling

---
 .../components/presentational/newUserForm.jsx | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index b5d8d64ef..c4437b7b0 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -26,15 +26,23 @@ const NewUserForm = (props) => {
       console.error('Invalid date selected:', newValue);
     }
   };
+  // MUI InputLabelProps Style
+  const InputLabelProps = {
+    sx: {
+      backgroundColor: 'white',
+      px: 0, // padding left/right
+      width: '17em',
+    },
+  };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Box className="check-in-container">
         <Box className="check-in-headers">
-          <Typography variant="h3" fontSize="2.8em">
+          <Typography variant="h3" fontSize="3em">
             Welcome!
           </Typography>
-          <Typography variant="h4">
+          <Typography variant="h6">
             Tell us a little bit about yourself:
           </Typography>
         </Box>
@@ -48,6 +56,13 @@ const NewUserForm = (props) => {
               <TextField
                 label="First Name"
                 variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '6.3em',
+                  },
+                }}
                 name="firstName"
                 value={props.firstName.toString()}
                 onChange={props.handleFirstNameChange}
@@ -58,6 +73,13 @@ const NewUserForm = (props) => {
               <TextField
                 label="Last Name"
                 variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '6.2em',
+                  },
+                }}
                 name="lastName"
                 value={props.lastName.toString()}
                 onChange={props.handleLastNameChange}
@@ -68,6 +90,13 @@ const NewUserForm = (props) => {
               <TextField
                 label="Email Address"
                 variant="outlined"
+                InputLabelProps={{
+                  sx: {
+                    backgroundColor: 'white',
+                    px: 0,
+                    width: '8em',
+                  },
+                }}
                 name="email"
                 value={props.formInput.email.toString().toLowerCase()}
                 onChange={props.handleInputChange}
@@ -84,6 +113,7 @@ const NewUserForm = (props) => {
                       <TextField
                         label={question.questionText}
                         variant="outlined"
+                        InputLabelProps={InputLabelProps}
                         name={question.htmlName}
                         placeholder={question.placeholderText}
                         value={
@@ -172,6 +202,10 @@ const NewUserForm = (props) => {
                                   color: 'rgb(250, 17, 79)',
                                   fontWeight: '600', // semi-bold
                                 },
+                                label: {
+                                  backgroundColor: 'white',
+                                  width: '8em',
+                                },
                               }}
                             >
                               {(params) => (

From 7681de2a277cf36a417160fe526f65ad589d03b6 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Tue, 30 Sep 2025 21:13:48 -0700
Subject: [PATCH 7/8] Improve helperText styling under Email Address Inputbox

---
 client/src/components/presentational/newUserForm.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index c4437b7b0..457d8bbf3 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -101,6 +101,11 @@ const NewUserForm = (props) => {
                 value={props.formInput.email.toString().toLowerCase()}
                 onChange={props.handleInputChange}
                 helperText="This allows easy use of the app. We'll never sell your data!"
+                FormHelperTextProps={{
+                  sx: {
+                    marginBottom: '10px',
+                  },
+                }}
                 required
               />
             </Box>

From 90e905720af59fa4eaeecc12832739baea313af7 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Wed, 1 Oct 2025 18:28:09 -0700
Subject: [PATCH 8/8] Improve FormLabel's and InputProps' styles

---
 .../components/presentational/newUserForm.jsx | 36 +++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
index 457d8bbf3..f0e9c193c 100644
--- a/client/src/components/presentational/newUserForm.jsx
+++ b/client/src/components/presentational/newUserForm.jsx
@@ -32,8 +32,19 @@ const NewUserForm = (props) => {
       backgroundColor: 'white',
       px: 0, // padding left/right
       width: '17em',
+      '&.Mui-focused': {
+        mt: 0.4, // only applies when the input is focused
+      },
+      '&.MuiInputLabel-shrink': {
+        mt: 0.4,
+      },
     },
   };
+  // MUI FormLabel Style
+  const FormLabelStyle = {
+    color: 'black',
+    fontWeight: 500,
+  };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -61,6 +72,12 @@ const NewUserForm = (props) => {
                     backgroundColor: 'white',
                     px: 0,
                     width: '6.3em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
                   },
                 }}
                 name="firstName"
@@ -78,6 +95,12 @@ const NewUserForm = (props) => {
                     backgroundColor: 'white',
                     px: 0,
                     width: '6.2em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
                   },
                 }}
                 name="lastName"
@@ -95,15 +118,22 @@ const NewUserForm = (props) => {
                     backgroundColor: 'white',
                     px: 0,
                     width: '8em',
+                    '&.Mui-focused': {
+                      mt: 0.4, // only applies when the input is focused
+                    },
+                    '&.MuiInputLabel-shrink': {
+                      mt: 0.4,
+                    },
                   },
                 }}
                 name="email"
                 value={props.formInput.email.toString().toLowerCase()}
                 onChange={props.handleInputChange}
-                helperText="This allows easy use of the app. We'll never sell your data!"
+                helperText="(This allows easy use of the app. We'll never sell your data!)"
                 FormHelperTextProps={{
                   sx: {
                     marginBottom: '10px',
+                    color: 'black',
                   },
                 }}
                 required
@@ -143,7 +173,7 @@ const NewUserForm = (props) => {
                   question.type === 'select' && (
                     <Box key={question._id} className="form-row last-row">
                       <FormControl component="fieldset">
-                        <FormLabel component="legend">
+                        <FormLabel component="legend" sx={FormLabelStyle}>
                           {question.questionText}
                         </FormLabel>
                         <RadioGroup
@@ -174,7 +204,7 @@ const NewUserForm = (props) => {
                     question.htmlName === 'attendanceLength' && (
                       <Box key={question._id} className="form-row">
                         <FormControl component="fieldset">
-                          <FormLabel component="legend">
+                          <FormLabel component="legend" sx={FormLabelStyle}>
                             {question.questionText}
                           </FormLabel>
                           <FormControl