Frontend Calendar: Clean up top of page

[elizabethfoster02]

Purpose Clean up the top of the Calendars page on mobile and on desktop.

Designs Desktop Mobile (no mockup, but there is a list of things below)

TODO

• [x] Claim this ticket by adding your name and moving to "In Progress"
• [x] Get updated with the codebase
  • [x] git checkout dev
  • [x] git pull
  • [x] THEN create a new branch as per usual
  • [x] npm install (this updates your dependencies)
  • [x] npm run dev
• [ ] Implement Desktop design linked in the figma
• [x] Mobile
  • [x] round the corners of the white box of the page (see the My Profile page for an example)
  • [x] Center align
  • [x] "today/back/next"
  • [x] "month/day/agenda"
  • [x] Note: the alignment looks less centered when on iphone 12 pro and smaller devices
  • [x] Clean up buttons in terms of alignment
• [x] On "month/day/agenda" section, set default view to "Day" and delete "Week" from the list (so keep Month, Day, Agenda)
• [x] Create a PR for this ticket
• [x] Move this ticket into "Ready for Review"

Testing

• [x] Desktop
• [x] Mobile