Profile Page

[elizabethfoster02]

Purpose Basic placing of components for the Profile page

Design

Desktop: https://www.figma.com/file/8kPY1C2UNsyWYtl59b6rwr/Initial-Design-Thoughts?type=design&node-id=63-587&mode=design&t=yB7HqDpRX1UBKR1V-0

Mobile: https://www.figma.com/file/8kPY1C2UNsyWYtl59b6rwr/Initial-Design-Thoughts?type=design&node-id=63-798&mode=design&t=yB7HqDpRX1UBKR1V-0

TODO

• [x] Place components:
  • [x] First Name
  • [x] Last Name
  • [x] Pronouns
  • [x] Role
  • [x] Profile picture
  • [x] Username

Testing

• [x] Desktop
• [x] Mobile

Notes

• [x] Use Flex to make placing components work between mobile and desktop!
• [x] Don't worry about the icons yet

Resources

• [x] MUI Components

[maddier0gers]

Developer: Maddie and Pam Dates: October 24 and 26 Time spent: ~4 hours

Summary Created profile page components based on figma design!

Testing Tested with desktop and mobile

Reflection: I think it was a relatively simple idea, but in application it was tough to get things in the right place and we are still having difficulty adjusting spacing for mobile without ruining how the desktop layout looks (the different text fields go automatically to the left when we want them in the center).