Redesigned the Add/Edit Student Modal

[namanhboi]

Summary

Changed the styling of the Add/Edit Student Modal to reflect design by Lazim. Changed first and last name fields to just a name field and extracted the first and last name to submit to html form.

The code to extract the first and last name from one name field I took from this PR#425 by Desmond.

I still need to redesign the other multiselect needs box and the svg image for the calenders should be gray to reflect Lazim's designs.

What it looks like

Here, the correct error for an empty name shows up

Here you can see everything filled in and that I still need to style the multiselect accessibility dropdown

You can see that the first and last name was extracted correctly. Although I wasn't able to make the request to the server because of a 500.

Here is my error when trying to add a new student to the server

This pull request is the first step towards redesigning the Add / Edit Student Modal.

Test Plan

I tested the design on multiple screensizes and it seems to be working correctly

For testing the backend, I need to figure out how to connect to the server and finish the multiselect for needs to test everything.

[dti-github-bot]

[diff-counting] Significant lines: 266.

[Atikpui007]

Looks great. You followed the styling to the tea and thats impressive.
A couple things though

1. The font color for the labels I suggest you change it to match WCAG guidelines

• a quick way to check is using this site. The ratio should be 4.5+

2. The reason why you are getting the server error when trying to add a student is with the Address. I made a note in an older PR about that Redesigned Add Student Modal #425
3. Leave the multiselect for the mean time I am working on that PR

[raissaji]

Hey Nam! Like Desmond said, styling looks great! The modal adapts when I shrink the screen size, which is impressive and something I am looking to implement as well.

A few things:

• On my machine, the modal dimensions do not follow Lazim's design. I attached an image below—I'm not sure why this is

• Desmond said that you're getting a server error because of a conflict with address parsing. I addressed this issue in PR Student address requirements #501 by getting rid of the stringent address requirement entirely. If we merge these two PRs, I believe we should be able to add a student seamlessly

[namanhboi]

Updated color of the fonts in the Add/Edit Student Modal to reflect WCAG guidelines. Address Parsing issue still needs to be addressed in Raissa's pr. Also CI test is failiing due to timeout issue?