Skip to content

Fix calendar link placement and styling #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashleywolf merged 2 commits into from
May 1, 2026
Merged

Fix calendar link placement and styling #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f76af4b
Fix: move calendar links below event text, out of bubble
ashleywolf May 1, 2026
f7fbe72
Fix: calendar links styled as pill buttons matching theme
ashleywolf May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 23 additions & 21 deletions components/event-detail/EventDetail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,29 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
}}
/>
) : null}
{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}
Comment on lines +141 to +163
Copy link

Copilot AI May 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
</div>
{!isFullPage ? (
<PlayLink href={event.linkUrl}>
Expand All @@ -155,27 +178,6 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
>
{getLiteral(`event-button:${event.type}`)} <IconArrowRight />
</a>
<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>
</div>
) : null}
</article>
Expand Down
24 changes: 14 additions & 10 deletions components/event-detail/event-detail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,21 +293,25 @@
}
.event-detail__calendar-links {
display: flex;
gap: 16px;
margin-top: 12px;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}

.event-detail__calendar-link {
font-size: 14px;
color: var(--color-fg-muted, #656d76);
text-decoration: underline;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.875rem;
font-family: inherit;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 100px;
Comment on lines +304 to +307
Copy link

Copilot AI May 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
padding: 8px 16px;
cursor: pointer;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;

&:hover {
color: var(--color-fg-default, #1f2328);
background: rgba(255, 255, 255, 0.95);
color: #6e40c9;
}
Comment on lines 313 to 316
Copy link

Copilot AI May 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
}
Loading