Updated HTML to MUI components in ReturnUserForm

[jng34]

Fixes #1684

What changes did you make and why did you make them ?

• Updated all HTML to MUI components in returnUserForm
• Fixed error messages that did not correctly render when testing the check in button
• Updated CSS to show red error messages

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

How to review Pull Requests

• VRMS guide

[JackHaeg]

Additional change requests:

This will help maintain consistency between screens and ensure better UX going forward.

Specifically, I am proposing the following changes:

1. Add additional spacing between the title and the first element (between “Welcome Back!” and “Which email address….” sections). Spacing is roughly equidistant from the “Check In” header to the “Welcome Back!” header.
2. Add a space between “Which email address did you use….” and the Input field
3. Use the same style for the Input field we are using across the rest of the updated MUI pages (e.g., https://dev.vrms.io/login).
4. Change “This allows for easy use of the app…” to italics, normal or light weight font, and reduce the size of the text to fit as one line below the input field if possible. (I assume this already uses Source Sans 3)…
   a). Also, add a small space between the Input field and this text.
5. Add a space between “This allows for easy use of the app…” and “Check In” buttons. Measurement = roughly equal to the space mentioned in point # 2 above.

Resources

• You can access the Figma here

screenshot of changes

[jng34]

Screenshots of CSS changes

Before changes are applied

After changes are applied

[jng34]

@JackHaeg
While testing the component, I found that the error handling (error messages) do not work when invalid emails are entered and submitted. Changes are required in the checkEmail function inside the try-catch logic of CheckInForm component. I tested this locally but did not make any changes to other files since I thought this should be a separate issue.

[JackHaeg]

To any reviewers - this PR is now ready for review. This PR includes additional UI changes that were requested by team lead to improve UX, and an error handling fix (error message is now correctly shown to the user when an invalid email is entered).

[trillium]

Thanks for your changes James! Approving :)