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

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

Testing

• Desktop
• Mobile