Dark mode: Edit button and Explore card borders stay light #49

New issue

Open

opened 2026-10-03 19:44:40 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:40 +00:00

Member

What's wrong
Two spots ignore dark mode: the "Edit Event" button in the event details modal stays light gray, and Explore result cards keep light gray borders that glare on the dark background.

How to reproduce

Switch to dark mode and open /explore (pick January 12, 2026 if the list is empty).
Look at the border around each result card.
At phone width, open an event you can edit and look at "Edit Event". (The button only shows for event admins. If you cannot get it to show, temporarily set isAdmin to true locally to check the styling.)

Expected
Both use the same dark colors as the buttons and borders around them.

Where to look

web/src/app/components/ModalEvent.tsx: the Edit button uses bg-gray-200 with no dark: classes. Match "Learn more" in SearchResultSidebar.tsx (dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600).
web/src/app/components/SearchResultSidebar.tsx: each result <li> uses border with no color, which in Tailwind 3 is gray-200. Add a color such as border-gray-200 dark:border-gray-700.

Done when

The Edit button and the card borders look right in dark mode.
Light mode looks unchanged.

**What's wrong** Two spots ignore dark mode: the "Edit Event" button in the event details modal stays light gray, and Explore result cards keep light gray borders that glare on the dark background. **How to reproduce** 1. Switch to dark mode and open /explore (pick January 12, 2026 if the list is empty). 2. Look at the border around each result card. 3. At phone width, open an event you can edit and look at "Edit Event". (The button only shows for event admins. If you cannot get it to show, temporarily set `isAdmin` to true locally to check the styling.) **Expected** Both use the same dark colors as the buttons and borders around them. **Where to look** - `web/src/app/components/ModalEvent.tsx`: the Edit button uses `bg-gray-200` with no `dark:` classes. Match "Learn more" in `SearchResultSidebar.tsx` (`dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600`). - `web/src/app/components/SearchResultSidebar.tsx`: each result `<li>` uses `border` with no color, which in Tailwind 3 is gray-200. Add a color such as `border-gray-200 dark:border-gray-700`. **Done when** - [ ] The Edit button and the card borders look right in dark mode. - [ ] Light mode looks unchanged.

jalenluorion added this to the Phase 1 milestone

2026-10-03 19:44:40 +00:00

jalenluorion added the

good first issue

bug

frontend

labels

2026-10-03 19:44:40 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00