Redesign Event Modal

[alexzhang1618]

Info

Closes #173
Closes #127

Changes

• Update EventModal design
• Switching to a grid layout, moving EventBadges into its own component

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)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have added new Cypress tests that are passing.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented any new functions in /src/lib/* and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

Desktop

Tablet

Mobile

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 30, 2024 5:22am

[SheepTester]

i dont see the add to calendar buttons anymore

[alexzhang1618]

i dont see the add to calendar buttons anymore

It's because live events aren't considered upcoming, so the calendar buttons are removed. Should we keep them if the event is live?

[SheepTester]

why are the image sizes different

[alexzhang1618]

why are the image sizes different

erm I was playing around with grid sizes to see what fits best and I have a 1fr thingy with a minmax of 20 or so rem on the image area. should it be like 50vw or something else?

[SheepTester]

I think you should keep the right side at least 30rem so the "add to calendar" buttons don't wrap. grid-template-columns: 1fr 30rem; or grid-template-columns: 1fr minmax(30rem, 1fr); both seem fine

I would also recommend adding white-space: pre-wrap; for the description to support line breaks

[SheepTester]

looks good! 🎉