Mentors can look at their mentor sessions information from their profile page

[esparr]

The mentor profile page is very clunky and the components are just thrown on the page. We have a Figma account, so this card is to create a new design to help the UI/UX of the mentor profile page.

We have no constraints on how it should look other than staying within our style guide. Would love to see what you come up with!

This issue is dependent on this issue: https://github.com/orgs/TeamProductionSystem/projects/2?pane=issue&itemId=44507729

This should be pair with the following ticket:
https://github.com/orgs/TeamProductionSystem/projects/2/views/1?pane=issue&itemId=44524435

Acceptance Criteria:

• Updated Design exists in Figma for Mentors Profile

• Design follows our style guide

  Functionality

  • Mentor can see their user profile information
  • Mentor can edit their profile
  • Mentor can update their notification settings
  • Mentor can add availabilities
  • Mentor can delete availabilities
  • Mentor can see upcoming availabilities
  • Mentor has a link to archived availabilities
  • Mentor skills are listed
  • Mentor upcoming sessions are listed
  • Mentor requested sessions from Mentees are listed
  • Mentor can confirm sessions
  • Mentor confirmed sessions with Mentees are listed
  • Mentor can cancel confirmed sessions
  • Mentor can navigate to archived sessions

Possible things to think about:

• What is most important for the Mentors to be able to interact with quickly?
• What will keep this looking as streamlined as possible?
• Where should modals be used?
• Should there be pagination?
• Is there any useful data we could show mentors? (ex: total hours they have mentored)

Get with Luke if you need access to Figma

Current Design is two pages: