fix(map): draw the map card's View button like the list's
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m13s
PR Checks / Backend Smoke (pull_request) Successful in 9s
PR Checks / Build Backend (no push) (pull_request) Successful in 19s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m20s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 12s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 14s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m13s
PR Checks / Backend Smoke (pull_request) Successful in 9s
PR Checks / Build Backend (no push) (pull_request) Successful in 19s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m20s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 12s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 14s
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 <noreply@anthropic.com>
This commit is contained in:
1 parent
e2fc7a8f15
commit
c077c27720
2 files changed
+13
No files matched your search
@@ -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 card.click({ position: { x: 6, y: 6 } });
|
||||||
await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
|
await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
|
||||||
await expect(page.locator('.sc-popup')).toContainText(name);
|
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
|
// And from the keyboard: each row has a "Show … on the map" button that
|
||||||
// appears on focus.
|
// appears on focus.
|
||||||
|
|||||||
@@ -645,6 +645,13 @@ html .leaflet-container a.leaflet-popup-close-button:focus {
|
|||||||
color: var(--text-primary);
|
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 content column */
|
||||||
.main {
|
.main {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
|
|||||||
Reference in new issue
Block a user