This PR adds a Material UI Drawer component for mobile views and adjusts styling so that it more closely matches the Figma design.
Opening as a draft as it's still a work in progress.
Video would have been better to provide than screenshots but I couldn't get a reliable program to record with.
1. Adds ModalBase component that conditionally uses a Dialog or Drawer for modals based on viewport size.
2. Due to how ModalBase is set up, it had a bit of a cascading effect. As a result, I reevaluated styling in other components such as FormSection. Making this PR more of an overhaul than first expected.
3. Thus the larger viewports are also affected and need review.
4. Includes various minor changes in other files as well (removing extra spaces, grammar fixes, adding bold to notifications to match Figma design, etc.)
Screenshots (if applicable):
To give an idea how the changes look when in desktop mode:
Additional Context (optional):
I ended up taking on more than what I outlined in the issue in hopes of pushing this closer to MVP.
Future Steps/PRs Needed to Finish This Work (optional):
Fix the broken tests. (Edit: Should now be complete)
Additionally, this PR would benefit from extensive testing in various conditions, such as different browsers and different devices. Another reason I am opening this as a draft and earlier than I otherwise would.
Issues needing discussion/feedback (optional):
1. Some code was intentionally left commented-out, namely CSS-related lines. This is to make testing the styling with it slightly easier. These comments will ultimately be removed.
2. Discuss whether to set a minimum width for modals. They are responsive to the size of their content currently. This works but it might look nicer if there was a consistency.
3. Styling needs to be fully finalized. The mobile version of the navbar (the left-anchored Drawer component in the eighth screenshot) in particular may benefit from reevaluation.
This PR:
Resolves #625, #621, and #620.
This PR adds a Material UI Drawer component for mobile views and adjusts styling so that it more closely matches the Figma design.
Opening as a draft as it's still a work in progress.
Video would have been better to provide than screenshots but I couldn't get a reliable program to record with.
1. Adds
ModalBasecomponent that conditionally uses a Dialog or Drawer for modals based on viewport size. 2. Due to howModalBaseis set up, it had a bit of a cascading effect. As a result, I reevaluated styling in other components such asFormSection. Making this PR more of an overhaul than first expected. 3. Thus the larger viewports are also affected and need review. 4. Includes various minor changes in other files as well (removing extra spaces, grammar fixes, adding bold to notifications to match Figma design, etc.)Screenshots (if applicable):
To give an idea how the changes look when in desktop mode:
Additional Context (optional):
I ended up taking on more than what I outlined in the issue in hopes of pushing this closer to MVP.
Future Steps/PRs Needed to Finish This Work (optional):
Fix the broken tests. (Edit: Should now be complete)
Additionally, this PR would benefit from extensive testing in various conditions, such as different browsers and different devices. Another reason I am opening this as a draft and earlier than I otherwise would.
Issues needing discussion/feedback (optional):
1. Some code was intentionally left commented-out, namely CSS-related lines. This is to make testing the styling with it slightly easier. These comments will ultimately be removed. 2. Discuss whether to set a minimum width for modals. They are responsive to the size of their content currently. This works but it might look nicer if there was a consistency. 3. Styling needs to be fully finalized. The mobile version of the navbar (the left-anchored Drawer component in the eighth screenshot) in particular may benefit from reevaluation.