Edit Calendar Modal UI

[alexzhang1618]

Note: This is a continuation of PR #269

Description

Modified the popup that appears when users click the calendar icon on event cards; the google calendar and apple calendars are differentiated with colors and icons; an implementation of the design improvement for Calendar Modal.

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Logistical Change (something about code process / a readme change / documentation update)
• [ ] CI Change (relating to deployment / continuous integration)
• [x] Implementation of redesign

How Has This Been Tested?

• [x] Tested on Localhost (Desktop)
• [ ] Tested on Localhost (Mobile) - use https://ngrok.io to get a copy on a mobile device
• [ ] Tested on Deployed Preview (Desktop)
• [ ] Tested on Deployed Preview (Mobile)

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code as needed, particularly in hard-to-understand areas
• [x] My changes generate no new warnings (if they do, please explain why)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
main-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2023 2:34am

[alexzhang1618]

This happens when we view the modal on mobile (Apple iPhone SE, Safari):

[adahe8]

minor edits implemented! lmk if anything else could be better.

[adahe8]

I decreased the font and image size!

[adahe8]

@farisashai Thanks for all the feedback!! I really appreciate it, this was an awesome learning experience!