From c077c2772003e81e16903083a03068970d26e53f Mon Sep 17 00:00:00 2001 From: Tudor Date: Thu, 1 Oct 2026 21:10:14 +0100 Subject: [PATCH] fix(map): draw the map card's View button like the list's leaflet.css colours every link in the map `.leaflet-container a` (#0078A8, specificity 0,1,1), which beat .btn-tertiary (0,1,0), so the card's View button came out in Leaflet's link blue in both themes. Pull it back onto --text-secondary next to the other Leaflet overrides. Co-Authored-By: Claude Opus 5.5 --- e2e/tests/journeys.spec.ts | 6 ++++++ nextjs-app/app/(frontend)/globals.css | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/e2e/tests/journeys.spec.ts b/e2e/tests/journeys.spec.ts index 8c0c9b7..7341330 100644 --- a/e2e/tests/journeys.spec.ts +++ b/e2e/tests/journeys.spec.ts @@ -644,6 +644,12 @@ test('a desktop postcode search opens on the map with the list beside it', async await card.click({ position: { x: 6, y: 6 } }); await expect(page.locator('.sc-pin--selected')).toHaveCount(1); await expect(page.locator('.sc-popup')).toContainText(name); + // The card's View link is drawn like the list's, not in Leaflet's link blue. + // Polled, because .btn transitions its colour. + const colour = (l: Locator) => l.evaluate(el => getComputedStyle(el).color); + const listViewColour = await colour(card.getByRole('link', { name: 'View', exact: true })); + await expect.poll(() => colour(page.locator('.sc-popup').getByRole('link', { name: 'View', exact: true }))) + .toBe(listViewColour); // And from the keyboard: each row has a "Show … on the map" button that // appears on focus. diff --git a/nextjs-app/app/(frontend)/globals.css b/nextjs-app/app/(frontend)/globals.css index 327e68c..f7992df 100644 --- a/nextjs-app/app/(frontend)/globals.css +++ b/nextjs-app/app/(frontend)/globals.css @@ -645,6 +645,13 @@ html .leaflet-container a.leaflet-popup-close-button:focus { color: var(--text-primary); } +/* The popup card's View link is a .btn-tertiary, which leaflet.css's + `.leaflet-container a` (0,1,1) paints #0078A8 over its 0,1,0. Its hover + rule, at 0,3,0, still wins over this. */ +html .leaflet-container a.btn-tertiary { + color: var(--text-secondary); +} + /* Main content column */ .main { max-width: 1400px;