Finish Modal

[ryanhu021]

HomeModal component:

• Uses MUI Modal component
• Accepts any React component as children
• Opened by changing a state boolean
• Props:
  • children: child components
  • open: boolean that opens modal when set to true
  • handleClose: state function to set open to false when modal is closed
• Width adjusts based on device type

Demo images:

• Homepage buttons

• Basic text modal

• Modal with calendar component

• Mobile

Other notes:

• Installed @emotion/react and @emotion/styled due to errors when importing MUI components

[vwinstea]

This is great! However, I'm personally struggling to figure out the best way move between pages. For example, a lot of the mock-ups show us navigating from one modal to another. However, with React Router, I'm not sure if we'll be able to change what's in the modal without exiting out of it. Right now, your demos do a good job showing entering/exiting modals, but I'm not sure how to change what's in the modal without getting out of it. Do you have any ideas?

[vwinstea]

Thanks for getting this done! I'm going to close this branch instead of merging it since it was more of a research task, but everything look good!

FYI - If you want to use this branch for the next part of your task, make sure to run git pull origin main on this branch so you can get this branch up to date before working on it.