Merge pull request 'fix(map): draw the map card's View button like the list's' (#166) from fix/map-popup-view-button into main

Reviewed-on: #166

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.

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;