Fix calendar link placement and styling

[ashleywolf]

Moves calendar links from the circular bubble area to below the event description. Styles them as pill-shaped buttons matching the purple theme (white text/border on purple, purple text on white hover).

[Copilot]

Pull request overview

Moves event “Add to calendar” actions out of the circular CTA area and into the main event text column on full event detail pages, with updated pill/button styling to match the purple theme.

Changes:

• Repositions Google Calendar / ICS actions to render below the event description on full pages only.
• Updates calendar link styles (pill shape, spacing, hover state, wrapping).

Show a summary per file

File	Description
components/event-detail/EventDetail.jsx	Renders calendar actions below the description (full-page view) instead of inside the circular CTA area.
components/event-detail/event-detail.scss	Restyles calendar actions as pill-like buttons and adjusts layout spacing/wrapping.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

• Files reviewed: 2/2 changed files
• Comments generated: 3

[Copilot]

getGoogleCalendarUrl(event) is computed 3 times and getIcsContent(event) is computed 2 times in this render path. These functions allocate dates/URLSearchParams and build long strings; consider computing them once (e.g., const googleUrl = …; const icsContent = …) and reusing the values for the condition + render, to avoid redundant work and keep the JSX simpler.

Suggested change

	{isFullPage && (getGoogleCalendarUrl(event) || getIcsContent(event)) ? (
	<div className="event-detail__calendar-links">
	{getGoogleCalendarUrl(event) && (
	<a
	className="event-detail__calendar-link"
	href={getGoogleCalendarUrl(event)}
	target="_blank"
	rel="noreferrer"
	>
	Add to Google Calendar
	</a>
	)}
	{getIcsContent(event) && (
	<button
	className="event-detail__calendar-link"
	onClick={() => downloadIcs(event)}
	type="button"
	>
	Download .ics
	</button>
	)}
	</div>
	) : null}
	{(() => {
	if (!isFullPage) {
	return null
	}
	const googleCalendarUrl = getGoogleCalendarUrl(event)
	const icsContent = getIcsContent(event)
	if (!googleCalendarUrl && !icsContent) {
	return null
	}
	return (
	<div className="event-detail__calendar-links">
	{googleCalendarUrl && (
	<a
	className="event-detail__calendar-link"
	href={googleCalendarUrl}
	target="_blank"
	rel="noreferrer"
	>
	Add to Google Calendar
	</a>
	)}
	{icsContent && (
	<button
	className="event-detail__calendar-link"
	onClick={() => downloadIcs(event)}
	type="button"
	>
	Download .ics
	</button>
	)}
	</div>
	)
	})()}

[Copilot]

The new .event-detail__calendar-link hover styling doesn't add any :focus-visible/focus state. This makes keyboard navigation hard to see and is inconsistent with other interactive controls in this codebase (e.g. filter pills and event links). Add a visible focus style (outline + offset, and/or match the hover colors on focus-visible).

See below for a potential fix:

  transition: background 0.2s ease, color 0.2s ease, outline-color 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #6e40c9;
  }

  &:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    color: #6e40c9;
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 2px;
  }

[Copilot]

This block hard-codes theme colors (e.g. #6e40c9 and several rgba(255, 255, 255, …) values). Elsewhere in this stylesheet the theme uses SCSS variables like $purple, $white, $white-20, $white-80, etc. Using the existing variables here will keep the calendar links consistent with theme changes and avoid color drift.