From 37864368e26a123680d5cad41a7b6b93f90baaa2 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:44:04 -0400
Subject: [PATCH 01/10] fix: Detour modal header should be blank on new
 creation workflow (#2851)

---
 assets/src/components/detours/diversionPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index b3933def7..aad251dd9 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -427,9 +427,9 @@ export const DiversionPage = ({
                 {useDetourProps.author}
               </span>
             </>
-          ) : (
+          ) : isMobile(displayType) ? (
             <div className="flex-grow-1 fw-semibold text-center">Detours</div>
-          )}
+          ) : null}
           <CloseButton className="p-4" onClick={onClose} />
         </header>
 

From 1665070272930d7c98e97068932df52d521512f3 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:04:06 -0400
Subject: [PATCH 02/10] refactor: Explicitly export `vehicleLabel` (#2850)

* fix(ts/helpers/vehicleLabel): explicitly export `vehicleLabel`

* refactor: use `vehicleLabel` in `mapMarkers`

* refactor: remove default export `vehicleLabel`

Part of:
- https://github.com/mbta/skate/pull/2603
---
 assets/src/components/incomingBox.tsx            | 2 +-
 assets/src/components/ladder.tsx                 | 2 +-
 assets/src/components/mapMarkers.tsx             | 4 ++--
 assets/src/components/propertiesPanel/header.tsx | 2 +-
 assets/src/components/vehicleRouteSummary.tsx    | 2 +-
 assets/src/helpers/vehicleLabel.ts               | 4 +---
 assets/tests/helpers/vehicleLabel.test.ts        | 3 ++-
 7 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/src/components/incomingBox.tsx b/assets/src/components/incomingBox.tsx
index 82cf07ebc..0b946d70a 100644
--- a/assets/src/components/incomingBox.tsx
+++ b/assets/src/components/incomingBox.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
-import vehicleLabel from "../helpers/vehicleLabel"
+import { vehicleLabel } from "../helpers/vehicleLabel"
 import { blockWaiverAlertStyle } from "../models/blockWaiver"
 import { crowdingLabel, OccupancyStatus } from "../models/crowding"
 import {
diff --git a/assets/src/components/ladder.tsx b/assets/src/components/ladder.tsx
index f9d36e70f..01355a036 100644
--- a/assets/src/components/ladder.tsx
+++ b/assets/src/components/ladder.tsx
@@ -5,7 +5,7 @@ import "tippy.js/dist/tippy.css"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { flatten, partition } from "../helpers/array"
 import { joinClasses } from "../helpers/dom"
-import vehicleLabel from "../helpers/vehicleLabel"
+import { vehicleLabel } from "../helpers/vehicleLabel"
 import { blockWaiverAlertStyle } from "../models/blockWaiver"
 import { crowdingLabel, OccupancyStatus } from "../models/crowding"
 import {
diff --git a/assets/src/components/mapMarkers.tsx b/assets/src/components/mapMarkers.tsx
index e08dd899c..21f5431e5 100644
--- a/assets/src/components/mapMarkers.tsx
+++ b/assets/src/components/mapMarkers.tsx
@@ -12,7 +12,7 @@ import { Marker, Polyline, Popup, Tooltip } from "react-leaflet"
 
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { joinClasses } from "../helpers/dom"
-import vehicleLabelString from "../helpers/vehicleLabel"
+import { vehicleLabel } from "../helpers/vehicleLabel"
 import { drawnStatus, statusClasses } from "../models/vehicleStatus"
 import { TrainVehicle, Vehicle } from "../realtime"
 import { Shape, Stop } from "../schedule"
@@ -77,7 +77,7 @@ const makeLabelIcon = (
   settings: UserSettings,
   isSelected: boolean
 ): Leaflet.DivIcon => {
-  const labelString = vehicleLabelString(vehicle, settings)
+  const labelString = vehicleLabel(vehicle, settings)
   const labelBackgroundHeight = isPrimary ? 16 : 12
   const labelBackgroundWidth =
     labelString.length <= 4 ? (isPrimary ? 40 : 30) : isPrimary ? 62 : 40
diff --git a/assets/src/components/propertiesPanel/header.tsx b/assets/src/components/propertiesPanel/header.tsx
index 01c5bcace..ee6083818 100644
--- a/assets/src/components/propertiesPanel/header.tsx
+++ b/assets/src/components/propertiesPanel/header.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react"
 import { useRoute } from "../../contexts/routesContext"
 import { StateDispatchContext } from "../../contexts/stateDispatchContext"
 import { joinClasses } from "../../helpers/dom"
-import vehicleLabel from "../../helpers/vehicleLabel"
+import { vehicleLabel } from "../../helpers/vehicleLabel"
 import { secondsAgoLabel, secondsToMinutes } from "../../util/dateTime"
 import { useCurrentTimeSeconds } from "../../hooks/useCurrentTime"
 import { emptyLadderDirectionsByRouteId } from "../../models/ladderDirection"
diff --git a/assets/src/components/vehicleRouteSummary.tsx b/assets/src/components/vehicleRouteSummary.tsx
index 18f0ddc96..87a5e5da3 100644
--- a/assets/src/components/vehicleRouteSummary.tsx
+++ b/assets/src/components/vehicleRouteSummary.tsx
@@ -6,7 +6,7 @@ import React, {
 import { useRoute } from "../contexts/routesContext"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { joinClasses } from "../helpers/dom"
-import vehicleLabel from "../helpers/vehicleLabel"
+import { vehicleLabel } from "../helpers/vehicleLabel"
 import { emptyLadderDirectionsByRouteId } from "../models/ladderDirection"
 import { currentRouteTab } from "../models/routeTab"
 import {
diff --git a/assets/src/helpers/vehicleLabel.ts b/assets/src/helpers/vehicleLabel.ts
index 6dc8ed5c6..840b63cb5 100644
--- a/assets/src/helpers/vehicleLabel.ts
+++ b/assets/src/helpers/vehicleLabel.ts
@@ -18,7 +18,7 @@ export const runOrBusNumberLabel = (
   }
 }
 
-const vehicleLabel = (
+export const vehicleLabel = (
   vehicleOrGhost: Vehicle | Ghost,
   settings: UserSettings
 ): string => {
@@ -58,5 +58,3 @@ export const runIdToLabel = (runId: RunId | null): string => {
 
 const stripLeadingZero = (num: string): string =>
   num.startsWith("0") ? num.slice(1) : num
-
-export default vehicleLabel
diff --git a/assets/tests/helpers/vehicleLabel.test.ts b/assets/tests/helpers/vehicleLabel.test.ts
index f00550cf1..c30b74cd3 100644
--- a/assets/tests/helpers/vehicleLabel.test.ts
+++ b/assets/tests/helpers/vehicleLabel.test.ts
@@ -1,5 +1,6 @@
 import { describe, test, expect } from "@jest/globals"
-import vehicleLabel, {
+import {
+  vehicleLabel,
   runOrBusNumberLabel,
   runIdToLabel,
 } from "../../src/helpers/vehicleLabel"

From 7cd7729051a267516573744149e8cc137d90a087 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:24:48 -0400
Subject: [PATCH 03/10] feat(ts/components/vehicleMarker): use `ReactMarker`
 for `VehicleMarker` Icon and Label (#2847)

---
 .../components/map/utilities/reactMarker.tsx  |  50 ++-
 assets/src/components/mapMarkers.tsx          | 155 ++++-----
 .../__snapshots__/mapPage.test.tsx.snap       | 164 +++++----
 .../shuttleMapPage.test.tsx.snap              | 328 +++++++++---------
 4 files changed, 330 insertions(+), 367 deletions(-)

diff --git a/assets/src/components/map/utilities/reactMarker.tsx b/assets/src/components/map/utilities/reactMarker.tsx
index 1a000d94a..960089c35 100644
--- a/assets/src/components/map/utilities/reactMarker.tsx
+++ b/assets/src/components/map/utilities/reactMarker.tsx
@@ -1,9 +1,10 @@
-import React, { ReactNode } from "react"
+import React, { forwardRef, ReactNode } from "react"
 import { createPortal } from "react-dom"
 
 import { Marker, MarkerProps } from "react-leaflet"
 
 import { DivIconOptions, useReactDivIcon } from "./reactDivIcon"
+import { Marker as LeafletMarker } from "leaflet"
 
 /**
  * Component Props for {@link ReactMarker}
@@ -31,30 +32,27 @@ export interface ReactMarkerProps extends Omit<MarkerProps, "icon"> {
  *
  * @param {ReactMarkerProps} props Component Props with {@link DivIconOptions `divIconSettings`}
  */
-export const ReactMarker = ({
-  icon,
-  divIconSettings,
-  children,
-  ...markerProps
-}: ReactMarkerProps) => {
-  const { divIcon, iconContainer } = useReactDivIcon(divIconSettings)
+export const ReactMarker = forwardRef<LeafletMarker<any>, ReactMarkerProps>(
+  ({ icon, divIconSettings, children, ...markerProps }, ref) => {
+    const { divIcon, iconContainer } = useReactDivIcon(divIconSettings)
 
-  return (
-    <Marker {...(markerProps as MarkerProps)} icon={divIcon}>
-      <>
-        {
-          /*
-          React Events bubble up the React Virtual DOM,
-          so any Events to `icon` should bubble up to `Marker` first
-          */
-          createPortal(icon, iconContainer)
-        }
+    return (
+      <Marker {...(markerProps as MarkerProps)} icon={divIcon} ref={ref}>
+        <>
+          {
+            /*
+            React Events bubble up the React Virtual DOM,
+            so any Events to `icon` should bubble up to `Marker` first
+            */
+            createPortal(icon, iconContainer)
+          }
 
-        {
-          /* Provide children after portal so react has a stable virtual DOM reference */
-          children
-        }
-      </>
-    </Marker>
-  )
-}
+          {
+            /* Provide children after portal so react has a stable virtual DOM reference */
+            children
+          }
+        </>
+      </Marker>
+    )
+  }
+)
diff --git a/assets/src/components/mapMarkers.tsx b/assets/src/components/mapMarkers.tsx
index 21f5431e5..ac720d3e4 100644
--- a/assets/src/components/mapMarkers.tsx
+++ b/assets/src/components/mapMarkers.tsx
@@ -16,7 +16,6 @@ import { vehicleLabel } from "../helpers/vehicleLabel"
 import { drawnStatus, statusClasses } from "../models/vehicleStatus"
 import { TrainVehicle, Vehicle } from "../realtime"
 import { Shape, Stop } from "../schedule"
-import { UserSettings } from "../userSettings"
 
 import garages, { Garage as GarageData } from "../data/garages"
 import useDeviceSupportsHover from "../hooks/useDeviceSupportsHover"
@@ -37,71 +36,6 @@ import { fullStoryEvent } from "../helpers/fullStory"
 
 /*  eslint-enable @typescript-eslint/ban-ts-comment */
 
-const makeVehicleIcon = (
-  vehicle: Vehicle,
-  isPrimary: boolean,
-  userSettings: UserSettings,
-  isSelected: boolean
-): Leaflet.DivIcon => {
-  const centerX = 12
-  const centerY = 12
-  return Leaflet.divIcon({
-    html: `<svg
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class="${joinClasses([
-            ...statusClasses(
-              drawnStatus(vehicle),
-              userSettings.vehicleAdherenceColors
-            ),
-            isSelected ? "selected" : null,
-          ])}"
-          d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-          transform="scale(${isPrimary ? 1.0 : 0.8}) rotate(${
-      vehicle.bearing || 0
-    }) translate(${-centerX}, ${-centerY})"
-        />
-      </svg>`,
-    iconAnchor: [0, 0],
-    className: "c-vehicle-map__icon",
-  })
-}
-
-const makeLabelIcon = (
-  vehicle: Vehicle,
-  isPrimary: boolean,
-  settings: UserSettings,
-  isSelected: boolean
-): Leaflet.DivIcon => {
-  const labelString = vehicleLabel(vehicle, settings)
-  const labelBackgroundHeight = isPrimary ? 16 : 12
-  const labelBackgroundWidth =
-    labelString.length <= 4 ? (isPrimary ? 40 : 30) : isPrimary ? 62 : 40
-  const selectedClass = isSelected ? "selected" : null
-  return Leaflet.divIcon({
-    className: joinClasses([
-      "c-vehicle-map__label",
-      isPrimary ? "primary" : "secondary",
-      selectedClass,
-    ]),
-    html: `<svg viewBox="0 0 ${labelBackgroundWidth} ${labelBackgroundHeight}" width="${labelBackgroundWidth}" height="${labelBackgroundHeight}">
-            <rect
-                class="c-vehicle-icon__label-background"
-                width="100%" height="100%"
-                rx="5.5px" ry="5.5px"
-              />
-            <text class="c-vehicle-icon__label" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">
-              ${labelString}
-            </text>
-          </svg>`,
-    iconAnchor: [labelBackgroundWidth / 2, isPrimary ? -16 : -10],
-  })
-}
-
 interface VehicleMarkerProps extends PropsWithChildren {
   vehicle: Vehicle
   isPrimary: boolean
@@ -152,18 +86,15 @@ export const VehicleMarker = ({
     },
   }
   const position: LatLngExpression = [vehicle.latitude, vehicle.longitude]
-  const vehicleIcon: Leaflet.DivIcon = makeVehicleIcon(
-    vehicle,
-    isPrimary,
-    userSettings,
-    isSelected
-  )
-  const labelIcon: Leaflet.DivIcon = makeLabelIcon(
-    vehicle,
-    isPrimary,
-    userSettings,
-    isSelected
-  )
+  const labelBackgroundHeight = isPrimary ? 16 : 12
+  const labelBackgroundWidth =
+    vehicleLabel(vehicle, userSettings).length <= 4
+      ? isPrimary
+        ? 40
+        : 30
+      : isPrimary
+      ? 62
+      : 40
 
   // https://leafletjs.com/reference.html#marker-zindexoffset
   // > By default, marker images zIndex is set automatically based on its latitude
@@ -173,19 +104,77 @@ export const VehicleMarker = ({
 
   return (
     <>
-      <Marker
+      <ReactMarker
         position={position}
-        icon={vehicleIcon}
         eventHandlers={eventHandlers}
         zIndexOffset={zIndexOffset}
         ref={markerRef}
+        divIconSettings={{
+          iconAnchor: [0, 0],
+          className: "c-vehicle-map__icon",
+        }}
+        icon={
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              className={joinClasses([
+                ...statusClasses(
+                  drawnStatus(vehicle),
+                  userSettings.vehicleAdherenceColors
+                ),
+                isSelected ? "selected" : null,
+              ])}
+              d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+              transform={
+                `scale(${isPrimary ? 1.0 : 0.8}) ` +
+                `rotate(${vehicle.bearing || 0}) ` +
+                `translate(-12, -12)`
+              }
+            />
+          </svg>
+        }
       >
         {children}
-      </Marker>
+      </ReactMarker>
 
-      <Marker
+      <ReactMarker
         position={position}
-        icon={labelIcon}
+        divIconSettings={{
+          iconAnchor: [labelBackgroundWidth / 2, isPrimary ? -16 : -10],
+          className: joinClasses([
+            "c-vehicle-map__label",
+            isPrimary ? "primary" : "secondary",
+            isSelected && "selected",
+          ]),
+        }}
+        icon={
+          <svg
+            viewBox={`0 0 ${labelBackgroundWidth} ${labelBackgroundHeight}`}
+            width={labelBackgroundWidth}
+            height={labelBackgroundHeight}
+          >
+            <rect
+              className="c-vehicle-icon__label-background"
+              width="100%"
+              height="100%"
+              rx="5.5px"
+              ry="5.5px"
+            />
+            <text
+              className="c-vehicle-icon__label"
+              x="50%"
+              y="50%"
+              textAnchor="middle"
+              dominantBaseline="central"
+            >
+              {vehicleLabel(vehicle, userSettings)}
+            </text>
+          </svg>
+        }
         eventHandlers={eventHandlers}
         zIndexOffset={zIndexOffset}
       />
diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
index a981858dd..7824800e9 100644
--- a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
@@ -1780,22 +1780,22 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <svg
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="w-100 h-100"
               >
-                
-        
-                <path
-                  class="on-time early-red selected"
-                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                  transform="scale(1) rotate(33) translate(-12, -12)"
-                />
-                
-      
-              </svg>
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="on-time early-red selected"
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
+              </div>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label primary selected leaflet-zoom-hide leaflet-interactive"
@@ -1803,36 +1803,32 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <svg
-                height="16"
-                viewBox="0 0 40 16"
-                width="40"
+              <div
+                class="w-100 h-100"
               >
-                
-            
-                <rect
-                  class="c-vehicle-icon__label-background"
-                  height="100%"
-                  rx="5.5px"
-                  ry="5.5px"
-                  width="100%"
-                />
-                
-            
-                <text
-                  class="c-vehicle-icon__label"
-                  dominant-baseline="central"
-                  text-anchor="middle"
-                  x="50%"
-                  y="50%"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
                 >
-                  
-              1
-            
-                </text>
-                
-          
-              </svg>
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
+                  >
+                    1
+                  </text>
+                </svg>
+              </div>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
@@ -1840,22 +1836,22 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <svg
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="w-100 h-100"
               >
-                
-        
-                <path
-                  class="on-time early-red"
-                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                  transform="scale(0.8) rotate(33) translate(-12, -12)"
-                />
-                
-      
-              </svg>
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="on-time early-red"
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(0.8) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
+              </div>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label secondary leaflet-zoom-hide leaflet-interactive"
@@ -1863,36 +1859,32 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -15px; margin-top: 10px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <svg
-                height="12"
-                viewBox="0 0 30 12"
-                width="30"
+              <div
+                class="w-100 h-100"
               >
-                
-            
-                <rect
-                  class="c-vehicle-icon__label-background"
-                  height="100%"
-                  rx="5.5px"
-                  ry="5.5px"
-                  width="100%"
-                />
-                
-            
-                <text
-                  class="c-vehicle-icon__label"
-                  dominant-baseline="central"
-                  text-anchor="middle"
-                  x="50%"
-                  y="50%"
+                <svg
+                  height="12"
+                  viewBox="0 0 30 12"
+                  width="30"
                 >
-                  
-              2
-            
-                </text>
-                
-          
-              </svg>
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
+                  >
+                    2
+                  </text>
+                </svg>
+              </div>
             </div>
           </div>
           <div
diff --git a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
index 44540a4cd..a0b8c8fb6 100644
--- a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
@@ -213,22 +213,22 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-        
-                  <path
-                    class=""
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                  
-      
-                </svg>
+                  <svg
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                      transform="scale(1) rotate(33) translate(-12, -12)"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -236,36 +236,32 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-            
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  
-            
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
+                  <svg
+                    height="16"
+                    viewBox="0 0 40 16"
+                    width="40"
                   >
-                    
-              1818
-            
-                  </text>
-                  
-          
-                </svg>
+                    <rect
+                      class="c-vehicle-icon__label-background"
+                      height="100%"
+                      rx="5.5px"
+                      ry="5.5px"
+                      width="100%"
+                    />
+                    <text
+                      class="c-vehicle-icon__label"
+                      dominant-baseline="central"
+                      text-anchor="middle"
+                      x="50%"
+                      y="50%"
+                    >
+                      1818
+                    </text>
+                  </svg>
+                </div>
               </div>
             </div>
             <div
@@ -968,22 +964,22 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-        
-                  <path
-                    class=""
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                  
-      
-                </svg>
+                  <svg
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                      transform="scale(1) rotate(33) translate(-12, -12)"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -991,36 +987,32 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-            
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  
-            
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
+                  <svg
+                    height="16"
+                    viewBox="0 0 40 16"
+                    width="40"
                   >
-                    
-              1818
-            
-                  </text>
-                  
-          
-                </svg>
+                    <rect
+                      class="c-vehicle-icon__label-background"
+                      height="100%"
+                      rx="5.5px"
+                      ry="5.5px"
+                      width="100%"
+                    />
+                    <text
+                      class="c-vehicle-icon__label"
+                      dominant-baseline="central"
+                      text-anchor="middle"
+                      x="50%"
+                      y="50%"
+                    >
+                      1818
+                    </text>
+                  </svg>
+                </div>
               </div>
             </div>
             <div
@@ -1723,22 +1715,22 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-        
-                  <path
-                    class=""
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                  
-      
-                </svg>
+                  <svg
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                      transform="scale(1) rotate(33) translate(-12, -12)"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -1746,36 +1738,32 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-            
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  
-            
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
+                  <svg
+                    height="16"
+                    viewBox="0 0 40 16"
+                    width="40"
                   >
-                    
-              1818
-            
-                  </text>
-                  
-          
-                </svg>
+                    <rect
+                      class="c-vehicle-icon__label-background"
+                      height="100%"
+                      rx="5.5px"
+                      ry="5.5px"
+                      width="100%"
+                    />
+                    <text
+                      class="c-vehicle-icon__label"
+                      dominant-baseline="central"
+                      text-anchor="middle"
+                      x="50%"
+                      y="50%"
+                    >
+                      1818
+                    </text>
+                  </svg>
+                </div>
               </div>
             </div>
             <div
@@ -2787,22 +2775,22 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-        
-                  <path
-                    class=""
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                  
-      
-                </svg>
+                  <svg
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                      transform="scale(1) rotate(33) translate(-12, -12)"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -2810,36 +2798,32 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <div
+                  class="w-100 h-100"
                 >
-                  
-            
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  
-            
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
+                  <svg
+                    height="16"
+                    viewBox="0 0 40 16"
+                    width="40"
                   >
-                    
-              1818
-            
-                  </text>
-                  
-          
-                </svg>
+                    <rect
+                      class="c-vehicle-icon__label-background"
+                      height="100%"
+                      rx="5.5px"
+                      ry="5.5px"
+                      width="100%"
+                    />
+                    <text
+                      class="c-vehicle-icon__label"
+                      dominant-baseline="central"
+                      text-anchor="middle"
+                      x="50%"
+                      y="50%"
+                    >
+                      1818
+                    </text>
+                  </svg>
+                </div>
               </div>
             </div>
             <div

From 272f428434c189575bd8abbc13f0c358d9565599 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:41:31 -0400
Subject: [PATCH 04/10] feat(ts/components/reactDivIcon): create custom
 `DivIcon` for React portals [optional] (#2848)

* feat(ts/components/reactDivIcon): create custom `DivIcon` for React portals

* chore(ts/components/reactDivIcon): update snapshots
---
 .../components/map/utilities/reactDivIcon.tsx |   65 +-
 .../__snapshots__/mapPage.test.tsx.snap       |  338 +++---
 .../shuttleMapPage.test.tsx.snap              | 1080 +++++++----------
 .../detoursListPage.openDetour.test.tsx.snap  |  308 +++--
 .../map/utilities/reactMarker.test.tsx        |    4 +-
 5 files changed, 793 insertions(+), 1002 deletions(-)

diff --git a/assets/src/components/map/utilities/reactDivIcon.tsx b/assets/src/components/map/utilities/reactDivIcon.tsx
index f99a662fd..a2b3c6abf 100644
--- a/assets/src/components/map/utilities/reactDivIcon.tsx
+++ b/assets/src/components/map/utilities/reactDivIcon.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react"
 
-import L, { DivIconOptions as LeafletDivIconOptions } from "leaflet"
+import { DivIcon, DivIconOptions as LeafletDivIconOptions } from "leaflet"
 
 // Prevent user from setting parameters we intend to provide
 export type DivIconOptions = Omit<LeafletDivIconOptions, "html">
@@ -8,6 +8,61 @@ export type DivIconOptions = Omit<LeafletDivIconOptions, "html">
 // Prevent useEffect from triggering by providing stable default reference
 const defaultOptions = {}
 
+// DefinitelyTyped definitions _seem_ to allow us to use a "real" class instead of `.extend`?
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/3923
+// https://leafletjs.com/examples/extending/extending-1-classes.html
+/**
+ * A Leaflet {@linkcode DivIcon} which uses a provided {@linkcode HTMLElement}
+ * as the marker element returned to leaflet when the associated Marker is added
+ * to the map.
+ *
+ * The provided {@linkcode HTMLElement} is a stable element that is created
+ * before the {@linkcode DivIcon} is added to a Map via a Marker. This is
+ * required so that the {@linkcode HTMLElement} reference can be created before
+ * the Marker and Icon are added to the `Map`
+ */
+class DivIconReactPortal extends DivIcon {
+  /**
+   * Stable element reference for React Portals.
+   */
+  element: HTMLElement
+
+  constructor(element: HTMLElement, options?: DivIconOptions) {
+    super(options)
+    this.element = element
+  }
+
+  /**
+   * Overridden function which returns our stable {@linkcode HTMLElement}
+   * reference and configures the {@linkcode DivIconReactPortal.element}
+   * attributes according to Leaflet.
+   *
+   * ---
+   *
+   * {@linkcode _oldIcon} is the {@linkcode HTMLElement} reference that a
+   * Leaflet Marker stores between `onAdd` and `onRemove` calls.
+   * Because we _always_ want Leaflet to use our stable element reference,
+   * {@linkcode DivIconReactPortal.element} is always returned.
+   */
+  createIcon(_oldIcon?: HTMLElement): HTMLElement {
+    this.setElementIconStyles()
+    return this.element
+  }
+
+  // The whole reason we have to recreate the `DivIcon` entirely is because we
+  // need to call `_setIconStyles` on the element, when the `DivIcon` `options`
+  // change. Pulling this out into it's own known function may allow us to
+  // avoid recreating the DivIcon entirely in the future, and instead update it
+  // when the `options` change.
+  setElementIconStyles() {
+    // We KNOW that this function exists, but the `DefinitelyTyped` definitions
+    // do not include it.
+    if ("_setIconStyles" in this && typeof this._setIconStyles === "function") {
+      this._setIconStyles(this.element, "icon")
+    }
+  }
+}
+
 /**
  * Hook to create a `divIcon` compatible with {@link ReactDOM.createPortal}, by
  * creating a stable {@link HTMLDivElement container} for React to use for
@@ -28,7 +83,7 @@ export function useReactDivIcon(options?: DivIconOptions) {
   // To ensure that the `divIcon` updates when `opts` change
   // regenerate the `divIcon` with the portal element and provided `opts`
   const divIcon = useMemo(
-    () => L.divIcon({ ...opts, html: iconContainer }),
+    () => new DivIconReactPortal(iconContainer, opts),
     [iconContainer, opts]
   )
 
@@ -40,8 +95,4 @@ export function useReactDivIcon(options?: DivIconOptions) {
 
 // Extend this function or add more parameters to `useReactDivIcon` to override
 // portal element creation
-const createPortalElement = () => {
-  const element = document.createElement("div")
-  element.classList.add("w-100", "h-100")
-  return element
-}
+const createPortalElement = () => document.createElement("div")
diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
index 7824800e9..aec1bb37f 100644
--- a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
@@ -1517,21 +1517,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -57px; top: 1295px; z-index: 1295;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1547,21 +1543,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2115px; top: 3617px; z-index: 3617;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1577,21 +1569,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 273px; top: 1319px; z-index: 1319;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1607,21 +1595,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -456px; top: -1720px; z-index: -1720;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1637,21 +1621,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1173px; top: -3823px; z-index: -3823;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1667,21 +1647,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 4158px; top: -5947px; z-index: -5947;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1697,21 +1673,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3032px; top: -2266px; z-index: -2266;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1727,21 +1699,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2539px; top: 6390px; z-index: 6390;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1757,21 +1725,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -65px; top: 1854px; z-index: 1854;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1780,22 +1744,18 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class="on-time early-red selected"
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                </svg>
-              </div>
+                <path
+                  class="on-time early-red selected"
+                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                  transform="scale(1) rotate(33) translate(-12, -12)"
+                />
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label primary selected leaflet-zoom-hide leaflet-interactive"
@@ -1803,32 +1763,28 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="16"
+                viewBox="0 0 40 16"
+                width="40"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <rect
+                  class="c-vehicle-icon__label-background"
+                  height="100%"
+                  rx="5.5px"
+                  ry="5.5px"
+                  width="100%"
+                />
+                <text
+                  class="c-vehicle-icon__label"
+                  dominant-baseline="central"
+                  text-anchor="middle"
+                  x="50%"
+                  y="50%"
                 >
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
-                  >
-                    1
-                  </text>
-                </svg>
-              </div>
+                  1
+                </text>
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
@@ -1836,22 +1792,18 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class="on-time early-red"
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(0.8) rotate(33) translate(-12, -12)"
-                  />
-                </svg>
-              </div>
+                <path
+                  class="on-time early-red"
+                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                  transform="scale(0.8) rotate(33) translate(-12, -12)"
+                />
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label secondary leaflet-zoom-hide leaflet-interactive"
@@ -1859,32 +1811,28 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -15px; margin-top: 10px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="12"
+                viewBox="0 0 30 12"
+                width="30"
               >
-                <svg
-                  height="12"
-                  viewBox="0 0 30 12"
-                  width="30"
+                <rect
+                  class="c-vehicle-icon__label-background"
+                  height="100%"
+                  rx="5.5px"
+                  ry="5.5px"
+                  width="100%"
+                />
+                <text
+                  class="c-vehicle-icon__label"
+                  dominant-baseline="central"
+                  text-anchor="middle"
+                  x="50%"
+                  y="50%"
                 >
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
-                  >
-                    2
-                  </text>
-                </svg>
-              </div>
+                  2
+                </text>
+              </svg>
             </div>
           </div>
           <div
diff --git a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
index a0b8c8fb6..a5913c6dc 100644
--- a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
@@ -213,22 +213,18 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -236,32 +232,28 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -286,21 +278,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -316,21 +304,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -346,21 +330,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -376,21 +356,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -406,21 +382,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -436,21 +408,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -466,21 +434,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -496,21 +460,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -526,21 +486,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -964,22 +920,18 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -987,32 +939,28 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1037,21 +985,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1067,21 +1011,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1097,21 +1037,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1127,21 +1063,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1157,21 +1089,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1187,21 +1115,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1217,21 +1141,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1247,21 +1167,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1277,21 +1193,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -1715,22 +1627,18 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -1738,32 +1646,28 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1788,21 +1692,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1818,21 +1718,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1848,21 +1744,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1878,21 +1770,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1908,21 +1796,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1938,21 +1822,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1968,21 +1848,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1998,21 +1874,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2028,21 +1900,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -2775,22 +2643,18 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -2798,32 +2662,28 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -2877,21 +2737,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2907,21 +2763,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2937,21 +2789,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2967,21 +2815,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2997,21 +2841,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3027,21 +2867,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3057,21 +2893,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3087,21 +2919,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3117,21 +2945,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index 63bcb2e6d..4dbe2b0ef 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -573,30 +573,26 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   tabindex="0"
                   title="Detour Start"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--start"
+                    height="100%"
+                    viewBox="0 0 16 16"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--start"
-                      height="100%"
-                      viewBox="0 0 16 16"
-                      width="100%"
-                    >
-                      <circle
-                        cx="8"
-                        cy="8"
-                        opacity="0.5"
-                        r="7.5"
-                      />
-                      <circle
-                        cx="8"
-                        cy="8"
-                        r="6"
-                        stroke="white"
-                        stroke-width="2"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="8"
+                      cy="8"
+                      opacity="0.5"
+                      r="7.5"
+                    />
+                    <circle
+                      cx="8"
+                      cy="8"
+                      r="6"
+                      stroke="white"
+                      stroke-width="2"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -604,23 +600,19 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   style="margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; left: 0px; top: -1px; z-index: -1;"
                   tabindex="0"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--detour-point"
+                    fill="none"
+                    height="100%"
+                    viewBox="0 0 10 10"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--detour-point"
-                      fill="none"
-                      height="100%"
-                      viewBox="0 0 10 10"
-                      width="100%"
-                    >
-                      <circle
-                        cx="5"
-                        cy="5"
-                        r="4.5"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="5"
+                      cy="5"
+                      r="4.5"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -629,30 +621,26 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   tabindex="0"
                   title="Detour End"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--end"
+                    height="100%"
+                    viewBox="0 0 16 16"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--end"
-                      height="100%"
-                      viewBox="0 0 16 16"
-                      width="100%"
-                    >
-                      <circle
-                        cx="8"
-                        cy="8"
-                        opacity="0.5"
-                        r="7.5"
-                      />
-                      <circle
-                        cx="8"
-                        cy="8"
-                        r="6"
-                        stroke="white"
-                        stroke-width="2"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="8"
+                      cy="8"
+                      opacity="0.5"
+                      r="7.5"
+                    />
+                    <circle
+                      cx="8"
+                      cy="8"
+                      r="6"
+                      stroke="white"
+                      stroke-width="2"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon c-stop-icon-container c-vehicle-map__stop leaflet-zoom-hide leaflet-interactive"
@@ -660,33 +648,29 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   style="margin-left: -7px; margin-top: -7px; width: 14px; height: 14px; left: 0px; top: -1px; z-index: -1;"
                   tabindex="0"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-stop-icon"
+                    height="100%"
+                    width="100%"
                   >
                     <svg
-                      class="c-stop-icon"
-                      height="100%"
-                      width="100%"
+                      fill="none"
+                      viewBox="0 0 14 14"
                     >
-                      <svg
-                        fill="none"
-                        viewBox="0 0 14 14"
-                      >
-                        <circle
-                          class="c-stop-icon__focus-circle"
-                          cx="7"
-                          cy="7"
-                          r="8"
-                        />
-                        <circle
-                          class="c-stop-icon__circle c-stop-icon__circle--small"
-                          cx="7"
-                          cy="7"
-                          r="5"
-                        />
-                      </svg>
+                      <circle
+                        class="c-stop-icon__focus-circle"
+                        cx="7"
+                        cy="7"
+                        r="8"
+                      />
+                      <circle
+                        class="c-stop-icon__circle c-stop-icon__circle--small"
+                        cx="7"
+                        cy="7"
+                        r="5"
+                      />
                     </svg>
-                  </div>
+                  </svg>
                 </div>
               </div>
               <div
@@ -1349,30 +1333,26 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   tabindex="0"
                   title="Detour Start"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--start"
+                    height="100%"
+                    viewBox="0 0 16 16"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--start"
-                      height="100%"
-                      viewBox="0 0 16 16"
-                      width="100%"
-                    >
-                      <circle
-                        cx="8"
-                        cy="8"
-                        opacity="0.5"
-                        r="7.5"
-                      />
-                      <circle
-                        cx="8"
-                        cy="8"
-                        r="6"
-                        stroke="white"
-                        stroke-width="2"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="8"
+                      cy="8"
+                      opacity="0.5"
+                      r="7.5"
+                    />
+                    <circle
+                      cx="8"
+                      cy="8"
+                      r="6"
+                      stroke="white"
+                      stroke-width="2"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -1380,23 +1360,19 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   style="margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; left: 0px; top: 0px; z-index: 0;"
                   tabindex="0"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--detour-point"
+                    fill="none"
+                    height="100%"
+                    viewBox="0 0 10 10"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--detour-point"
-                      fill="none"
-                      height="100%"
-                      viewBox="0 0 10 10"
-                      width="100%"
-                    >
-                      <circle
-                        cx="5"
-                        cy="5"
-                        r="4.5"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="5"
+                      cy="5"
+                      r="4.5"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -1405,30 +1381,26 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   tabindex="0"
                   title="Detour End"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-detour_map-circle-marker--end"
+                    height="100%"
+                    viewBox="0 0 16 16"
+                    width="100%"
                   >
-                    <svg
-                      class="c-detour_map-circle-marker--end"
-                      height="100%"
-                      viewBox="0 0 16 16"
-                      width="100%"
-                    >
-                      <circle
-                        cx="8"
-                        cy="8"
-                        opacity="0.5"
-                        r="7.5"
-                      />
-                      <circle
-                        cx="8"
-                        cy="8"
-                        r="6"
-                        stroke="white"
-                        stroke-width="2"
-                      />
-                    </svg>
-                  </div>
+                    <circle
+                      cx="8"
+                      cy="8"
+                      opacity="0.5"
+                      r="7.5"
+                    />
+                    <circle
+                      cx="8"
+                      cy="8"
+                      r="6"
+                      stroke="white"
+                      stroke-width="2"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon c-stop-icon-container c-vehicle-map__stop leaflet-zoom-hide leaflet-interactive"
@@ -1436,33 +1408,29 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   style="margin-left: -7px; margin-top: -7px; width: 14px; height: 14px; left: 0px; top: 0px; z-index: 0;"
                   tabindex="0"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-stop-icon"
+                    height="100%"
+                    width="100%"
                   >
                     <svg
-                      class="c-stop-icon"
-                      height="100%"
-                      width="100%"
+                      fill="none"
+                      viewBox="0 0 14 14"
                     >
-                      <svg
-                        fill="none"
-                        viewBox="0 0 14 14"
-                      >
-                        <circle
-                          class="c-stop-icon__focus-circle"
-                          cx="7"
-                          cy="7"
-                          r="8"
-                        />
-                        <circle
-                          class="c-stop-icon__circle c-stop-icon__circle--small"
-                          cx="7"
-                          cy="7"
-                          r="5"
-                        />
-                      </svg>
+                      <circle
+                        class="c-stop-icon__focus-circle"
+                        cx="7"
+                        cy="7"
+                        r="8"
+                      />
+                      <circle
+                        class="c-stop-icon__circle c-stop-icon__circle--small"
+                        cx="7"
+                        cy="7"
+                        r="5"
+                      />
                     </svg>
-                  </div>
+                  </svg>
                 </div>
               </div>
               <div
diff --git a/assets/tests/components/map/utilities/reactMarker.test.tsx b/assets/tests/components/map/utilities/reactMarker.test.tsx
index af5e42eaf..80578e695 100644
--- a/assets/tests/components/map/utilities/reactMarker.test.tsx
+++ b/assets/tests/components/map/utilities/reactMarker.test.tsx
@@ -78,7 +78,7 @@ describe("ReactMarker", () => {
 
     expect(icon).toBeEmptyDOMElement()
 
-    expect(icon.parentElement?.parentElement).toHaveStyle({
+    expect(icon.parentElement).toHaveStyle({
       width: `${initialSizeX}px`,
       height: `${initialSizeY}px`,
     })
@@ -91,7 +91,7 @@ describe("ReactMarker", () => {
       />
     )
 
-    expect(icon.parentElement?.parentElement).toHaveStyle({
+    expect(icon.parentElement).toHaveStyle({
       width: `${newSizeX}px`,
       height: `${newSizeY}px`,
     })

From 52b5eee7d01fb4a69171c49da5902aafe5f6444b Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:36:17 -0400
Subject: [PATCH 05/10] fix: disable distributed elixir connections in
 production (#2854)

---
 config/runtime.exs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/config/runtime.exs b/config/runtime.exs
index d41f217f6..cfd6e3e63 100644
--- a/config/runtime.exs
+++ b/config/runtime.exs
@@ -105,5 +105,7 @@ if config_env() == :prod do
     config :skate, Skate.Detours.TripModificationPublisher, start: true
   end
 
-  config :skate, DNSCluster, query: System.get_env("DNS_CLUSTER_QUERY") || :ignore
+  # There are currently issues with Distributed Elixir and our Data Pipelines.
+  # So we need to disable clustering in prod until we figure this out
+  # config :skate, DNSCluster, query: System.get_env("DNS_CLUSTER_QUERY") || :ignore
 end

From 08dc1eb885c1f0a3573610450c63e982829ad378 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:04:29 -0400
Subject: [PATCH 06/10] tweak: Detour notifications behind test group (#2855)

Co-authored-by: Kayla Firestack <kfirestack@mbta.com>
---
 assets/src/components/notificationBellIcon.tsx             | 7 +++++--
 assets/src/components/notificationCard.tsx                 | 5 ++++-
 assets/src/userInTestGroup.ts                              | 1 +
 assets/tests/components/notificationBellIcon.test.tsx      | 7 ++++++-
 .../tests/components/notificationCard.openDetour.test.tsx  | 6 +++++-
 assets/tests/components/notificationCard.test.tsx          | 4 +++-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/assets/src/components/notificationBellIcon.tsx b/assets/src/components/notificationBellIcon.tsx
index 4dc2a1dc2..eb83cd228 100644
--- a/assets/src/components/notificationBellIcon.tsx
+++ b/assets/src/components/notificationBellIcon.tsx
@@ -17,12 +17,15 @@ const NotificationBellIcon = ({
   } = usePanelStateFromStateDispatchContext()
   const { notifications } = useContext(NotificationsContext)
 
-  const inDetoursList = inTestGroup(TestGroups.DetoursList)
+  const inDetoursNotificationGroup =
+    inTestGroup(TestGroups.DetoursList) &&
+    inTestGroup(TestGroups.DetoursNotifications)
   const unreadNotifications = (notifications || []).filter(
     (notification) =>
       notification.state === "unread" &&
       !(
-        notification.content.$type === NotificationType.Detour && !inDetoursList
+        notification.content.$type === NotificationType.Detour &&
+        !inDetoursNotificationGroup
       )
   )
   const unreadBadge: boolean = unreadNotifications.length > 0
diff --git a/assets/src/components/notificationCard.tsx b/assets/src/components/notificationCard.tsx
index 3bd961496..aef5de1ea 100644
--- a/assets/src/components/notificationCard.tsx
+++ b/assets/src/components/notificationCard.tsx
@@ -53,7 +53,10 @@ export const NotificationCard = ({
 
   if (
     notification.content.$type === NotificationType.Detour &&
-    !inTestGroup(TestGroups.DetoursList)
+    !(
+      inTestGroup(TestGroups.DetoursList) &&
+      inTestGroup(TestGroups.DetoursNotifications)
+    )
   ) {
     return null
   }
diff --git a/assets/src/userInTestGroup.ts b/assets/src/userInTestGroup.ts
index eeab87498..2228c89ff 100644
--- a/assets/src/userInTestGroup.ts
+++ b/assets/src/userInTestGroup.ts
@@ -4,6 +4,7 @@ export enum TestGroups {
   BackwardsDetourPrevention = "backwards-detour-prevention",
   DemoMode = "demo-mode",
   DetoursList = "detours-list",
+  DetoursNotifications = "detours-notifications",
   DetoursPilot = "detours-pilot",
   MinimalLadderPage = "minimal-ladder-page",
   LateView = "late-view",
diff --git a/assets/tests/components/notificationBellIcon.test.tsx b/assets/tests/components/notificationBellIcon.test.tsx
index 58aae50c0..3032ce815 100644
--- a/assets/tests/components/notificationBellIcon.test.tsx
+++ b/assets/tests/components/notificationBellIcon.test.tsx
@@ -160,7 +160,12 @@ describe("NotificationBellIcon", () => {
     },
   ])("$type detour notification", () => {
     test("renders when there are new detour notifications and user is part of DetoursList group", () => {
-      jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList])
+      jest
+        .mocked(getTestGroups)
+        .mockReturnValue([
+          TestGroups.DetoursList,
+          TestGroups.DetoursNotifications,
+        ])
 
       const { baseElement } = render(
         <StateDispatchProvider
diff --git a/assets/tests/components/notificationCard.openDetour.test.tsx b/assets/tests/components/notificationCard.openDetour.test.tsx
index 3f21d4c5c..eb8c8f4b3 100644
--- a/assets/tests/components/notificationCard.openDetour.test.tsx
+++ b/assets/tests/components/notificationCard.openDetour.test.tsx
@@ -37,7 +37,11 @@ describe("NotificationCard", () => {
   test("renders detour details modal to match mocked fetchDetour", async () => {
     jest
       .mocked(getTestGroups)
-      .mockReturnValue([TestGroups.DetoursPilot, TestGroups.DetoursList])
+      .mockReturnValue([
+        TestGroups.DetoursPilot,
+        TestGroups.DetoursList,
+        TestGroups.DetoursNotifications,
+      ])
 
     jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build()))
     jest
diff --git a/assets/tests/components/notificationCard.test.tsx b/assets/tests/components/notificationCard.test.tsx
index c4b42dd9b..175f4040d 100644
--- a/assets/tests/components/notificationCard.test.tsx
+++ b/assets/tests/components/notificationCard.test.tsx
@@ -32,7 +32,9 @@ jest.mock("../../src/helpers/fullStory")
 jest.mock("../../src/userTestGroups")
 
 beforeEach(() => {
-  jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList])
+  jest
+    .mocked(getTestGroups)
+    .mockReturnValue([TestGroups.DetoursList, TestGroups.DetoursNotifications])
   jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build()))
   jest
     .mocked(fetchDetour)

From 945a2e9ac6dae6b30c107192ddcf9d4039d649ca Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:25:47 -0400
Subject: [PATCH 07/10] fix(ex/Realtime.Server): use `broadcast_local` instead
 of `broadcast` (#2856)

* fix(ex/Realtime.Server): use `broadcast_local` instead of `broadcast`

* fix: re-enable `DNSCluster`

Reverts: https://github.com/mbta/skate/pull/2854
---
 config/runtime.exs     | 4 +---
 lib/realtime/server.ex | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/config/runtime.exs b/config/runtime.exs
index cfd6e3e63..d41f217f6 100644
--- a/config/runtime.exs
+++ b/config/runtime.exs
@@ -105,7 +105,5 @@ if config_env() == :prod do
     config :skate, Skate.Detours.TripModificationPublisher, start: true
   end
 
-  # There are currently issues with Distributed Elixir and our Data Pipelines.
-  # So we need to disable clustering in prod until we figure this out
-  # config :skate, DNSCluster, query: System.get_env("DNS_CLUSTER_QUERY") || :ignore
+  config :skate, DNSCluster, query: System.get_env("DNS_CLUSTER_QUERY") || :ignore
 end
diff --git a/lib/realtime/server.ex b/lib/realtime/server.ex
index 91cc60add..3cde364c8 100644
--- a/lib/realtime/server.ex
+++ b/lib/realtime/server.ex
@@ -510,7 +510,7 @@ defmodule Realtime.Server do
         :alerts -> "realtime_alerts"
       end
 
-    Phoenix.PubSub.broadcast(pubsub_name(), topic, {:new_realtime_data, state.ets})
+    Phoenix.PubSub.local_broadcast(pubsub_name(), topic, {:new_realtime_data, state.ets})
   end
 
   @spec block_is_active?(VehicleOrGhost.t()) :: boolean

From ba6bd8e14df9db18a9bea9bfa193330aa55545e7 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:45:57 -0400
Subject: [PATCH 08/10] tweak: Make the missed stops count badge round (#2857)

Co-authored-by: Kayla Firestack <firestack@users.noreply.github.com>
---
 assets/src/components/detours/detourPanelComponents.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/src/components/detours/detourPanelComponents.tsx b/assets/src/components/detours/detourPanelComponents.tsx
index accd3ff45..384f96138 100644
--- a/assets/src/components/detours/detourPanelComponents.tsx
+++ b/assets/src/components/detours/detourPanelComponents.tsx
@@ -13,7 +13,10 @@ export const MissedStops = ({ missedStops }: MissedStopsProps) => (
     {missedStops && (
       <section className="pb-3">
         <h2 className="c-diversion-panel__h2">
-          Missed Stops <Badge bg="missed-stop">{missedStops.length}</Badge>
+          Missed Stops
+          <Badge pill bg="missed-stop" className="ps-2 fs-4">
+            {missedStops.length}
+          </Badge>
         </h2>
         <ListGroup as="ul">
           {uniqBy(missedStops, (stop) => stop.id).map((missedStop) => (

From 829201a94a61a62feb3c428789d051e3d13d170a Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:47:43 -0400
Subject: [PATCH 09/10] tweak: Update detour panel titles / buttons to match
 hi-fi language (#2853)

---
 .../detourPanels/detourFinishedPanel.tsx      |  4 +-
 .../detours/detourPanels/drawDetourPanel.tsx  |  2 +-
 .../detoursListPage.openDetour.test.tsx.snap  |  8 +--
 .../detoursListPage.openDetour.test.tsx       |  5 +-
 .../detours/diversionPage.activate.test.tsx   | 13 ++--
 .../components/detours/diversionPage.test.tsx | 63 +++++++------------
 assets/tests/components/mapPage.test.tsx      |  3 +-
 .../notificationCard.openDetour.test.tsx      |  5 +-
 .../components/detours/diversionPage.tsx      |  6 ++
 9 files changed, 46 insertions(+), 63 deletions(-)

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index 112399934..a9d2115ed 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -19,7 +19,7 @@ export const DetourFinishedPanel = ({
 }: DetourFinishedPanelProps) => (
   <Panel as="article">
     <Panel.Header className="">
-      <h1 className="c-diversion-panel__h1 my-3">Share Detour Details</h1>
+      <h1 className="c-diversion-panel__h1 my-3">View Draft Detour</h1>
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
@@ -30,7 +30,7 @@ export const DetourFinishedPanel = ({
           variant="outline-primary"
           onClick={onNavigateBack}
         >
-          <BsIcons.ArrowLeft /> Edit Detour
+          <BsIcons.ArrowLeft /> Edit
         </Button>
 
         <Form.Control
diff --git a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
index 83c880461..1904487e6 100644
--- a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
@@ -31,7 +31,7 @@ export const DrawDetourPanel = ({
 }: DrawDetourPanelProps) => (
   <Panel as="article" className="c-diversion-panel">
     <Panel.Header>
-      <h1 className="c-diversion-panel__h1 my-3">Create Detour</h1>
+      <h1 className="c-diversion-panel__h1 my-3">Draw Detour</h1>
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index 4dbe2b0ef..3ebde0096 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -405,7 +405,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
               <h1
                 class="c-diversion-panel__h1 my-3"
               >
-                Share Detour Details
+                View Draft Detour
               </h1>
             </header>
             <div
@@ -432,7 +432,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                       fill-rule="evenodd"
                     />
                   </svg>
-                   Edit Detour
+                   Edit
                 </button>
                 <textarea
                   class="flex-grow-1 mb-3 form-control"
@@ -1169,7 +1169,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             <h1
               class="c-diversion-panel__h1 my-3"
             >
-              Share Detour Details
+              View Draft Detour
             </h1>
           </header>
           <div
@@ -1196,7 +1196,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                     fill-rule="evenodd"
                   />
                 </svg>
-                 Edit Detour
+                 Edit
               </button>
               <textarea
                 class="flex-grow-1 mb-3 form-control"
diff --git a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
index 0e03e3665..57b0400be 100644
--- a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
+++ b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
@@ -15,6 +15,7 @@ import getTestGroups from "../../../src/userTestGroups"
 import { detourListFactory } from "../../factories/detourListFactory"
 import { TestGroups } from "../../../src/userInTestGroup"
 import { detourStateMachineFactory } from "../../factories/detourStateMachineFactory"
+import { viewDraftDetourHeading } from "../../testHelpers/selectors/components/detours/diversionPage"
 
 jest
   .useFakeTimers({ doNotFake: ["setTimeout"] })
@@ -55,9 +56,7 @@ describe("Detours Page: Open a Detour", () => {
     await userEvent.click(await screen.findByText("Headsign Z"))
 
     // Render modal based on mocked value, which is a detour-in-progress
-    expect(
-      await screen.findByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
 
     // Finally, check snapshot
     await waitFor(() => expect(baseElement).toMatchSnapshot())
diff --git a/assets/tests/components/detours/diversionPage.activate.test.tsx b/assets/tests/components/detours/diversionPage.activate.test.tsx
index fb741d386..d5a2e90e5 100644
--- a/assets/tests/components/detours/diversionPage.activate.test.tsx
+++ b/assets/tests/components/detours/diversionPage.activate.test.tsx
@@ -14,6 +14,7 @@ import {
   activateDetourButton,
   originalRouteShape,
   reviewDetourButton,
+  viewDraftDetourHeading,
 } from "../../testHelpers/selectors/components/detours/diversionPage"
 import {
   fetchDetourDirections,
@@ -152,9 +153,7 @@ describe("DiversionPage activate workflow", () => {
     test("does not show the activate flow modal before clicking the activate button", async () => {
       await diversionPageOnReviewScreen()
 
-      expect(
-        screen.getByRole("heading", { name: "Share Detour Details" })
-      ).toBeVisible()
+      expect(viewDraftDetourHeading.get()).toBeVisible()
       expect(step1Heading.query()).not.toBeInTheDocument()
     })
 
@@ -163,9 +162,7 @@ describe("DiversionPage activate workflow", () => {
 
       await userEvent.click(activateDetourButton.get())
 
-      expect(
-        screen.getByRole("heading", { name: "Share Detour Details" })
-      ).toBeVisible()
+      expect(viewDraftDetourHeading.get()).toBeVisible()
       expect(step1Heading.get()).toBeVisible()
     })
   })
@@ -356,9 +353,7 @@ describe("DiversionPage activate workflow", () => {
 
       await userEvent.click(activateButton.get())
 
-      expect(
-        screen.queryByRole("heading", { name: "Share Detour Details" })
-      ).not.toBeInTheDocument()
+      expect(viewDraftDetourHeading.query()).not.toBeInTheDocument()
       expect(
         screen.getByRole("heading", { name: "Active Detour" })
       ).toBeVisible()
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index 986778ce4..bd301af02 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -25,8 +25,11 @@ import {
 import { stopFactory } from "../../factories/stop"
 import userEvent from "@testing-library/user-event"
 import {
+  drawDetourHeading,
+  editDetourButton,
   originalRouteShape,
   reviewDetourButton,
+  viewDraftDetourHeading,
 } from "../../testHelpers/selectors/components/detours/diversionPage"
 import {
   finishedDetourFactory,
@@ -1071,7 +1074,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("When 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1084,15 +1087,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchFinishedDetour).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1107,15 +1106,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchDetourDirections).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1130,15 +1125,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("'Share Detour Details' screen has alert describing that the detour is not editable", async () => {
+  test("'View Draft Detour' screen has alert describing that the detour is not editable", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1156,7 +1147,7 @@ describe("DiversionPage", () => {
     )
   })
 
-  test("'Share Detour Details' screen disables the 'Undo' and 'Clear' buttons", async () => {
+  test("'View Draft Detour' screen disables the 'Undo' and 'Clear' buttons", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1175,7 +1166,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("'Share Detour Details' screen has back button to edit detour again", async () => {
+  test("'View Draft Detour' screen has back button to edit detour again", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1188,10 +1179,10 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(screen.getByRole("button", { name: "Edit Detour" })).toBeVisible()
+    expect(editDetourButton.get()).toBeVisible()
   })
 
-  test("'Share Detour Details' screen returns to editing screen when edit detour button is clicked", async () => {
+  test("'View Draft Detour' screen returns to editing screen when edit detour button is clicked", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1204,14 +1195,10 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    await userEvent.click(
-      await screen.findByRole("button", { name: "Edit Detour" })
-    )
+    await userEvent.click(editDetourButton.get())
 
     await waitFor(() => {
-      expect(
-        screen.queryByRole("button", { name: "Edit Detour" })
-      ).not.toBeInTheDocument()
+      expect(editDetourButton.query()).not.toBeInTheDocument()
       expect(
         screen.getByRole("button", { name: "Review Detour" })
       ).toBeVisible()
@@ -1221,7 +1208,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("'Share Detour Details' screen has button to copy details", async () => {
+  test("'View Draft Detour' screen has button to copy details", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1237,7 +1224,7 @@ describe("DiversionPage", () => {
     expect(screen.getByRole("button", { name: "Copy Details" })).toBeVisible()
   })
 
-  test("'Share Detour Details' screen copies text content to clipboard when clicked copy details button", async () => {
+  test("'View Draft Detour' screen copies text content to clipboard when clicked copy details button", async () => {
     const stops = stopFactory.buildList(4)
     const [start, end] = stopFactory.buildList(2)
 
@@ -1409,9 +1396,7 @@ describe("DiversionPage", () => {
         />
       )
 
-      expect(
-        await screen.findByRole("heading", { name: "Create Detour" })
-      ).toBeInTheDocument()
+      expect(await drawDetourHeading.find()).toBeInTheDocument()
       expect(
         screen.queryByRole("button", { name: "Change route or direction" })
       ).toBeInTheDocument()
@@ -1927,8 +1912,6 @@ describe("DiversionPage", () => {
       </RoutesProvider>
     )
 
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 })
diff --git a/assets/tests/components/mapPage.test.tsx b/assets/tests/components/mapPage.test.tsx
index 8a0a01111..62b54ce4e 100644
--- a/assets/tests/components/mapPage.test.tsx
+++ b/assets/tests/components/mapPage.test.tsx
@@ -95,6 +95,7 @@ import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
 import { fetchNearestIntersection } from "../../src/api"
+import { drawDetourHeading } from "../testHelpers/selectors/components/detours/diversionPage"
 
 jest.mock("../../src/hooks/useLocationSearchResults", () => ({
   useLocationSearchResults: jest.fn(() => null),
@@ -1850,7 +1851,7 @@ describe("<MapPage />", () => {
         })
       )
 
-      expect(screen.getByText("Create Detour")).toBeVisible()
+      expect(drawDetourHeading.get()).toBeVisible()
     })
 
     test("dismisses the detour modal on escape key", async () => {
diff --git a/assets/tests/components/notificationCard.openDetour.test.tsx b/assets/tests/components/notificationCard.openDetour.test.tsx
index eb8c8f4b3..4abf955fb 100644
--- a/assets/tests/components/notificationCard.openDetour.test.tsx
+++ b/assets/tests/components/notificationCard.openDetour.test.tsx
@@ -13,6 +13,7 @@ import { detourListFactory } from "../factories/detourListFactory"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
 import { detourStateMachineFactory } from "../factories/detourStateMachineFactory"
+import { viewDraftDetourHeading } from "../testHelpers/selectors/components/detours/diversionPage"
 
 jest.mock("../../src/api")
 jest.mock("../../src/helpers/fullStory")
@@ -63,8 +64,6 @@ describe("NotificationCard", () => {
     await userEvent.click(screen.getByRole("button", { name: /Detour/ }))
     // Render modal based on mocked value, which is a detour-in-progress
 
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 })
diff --git a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
index 312f54589..f5d2706cb 100644
--- a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
+++ b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
@@ -5,6 +5,12 @@ export const reviewDetourButton = byRole("button", { name: "Review Detour" })
 export const activateDetourButton = byRole("button", {
   name: "Activate Detour",
 })
+export const editDetourButton = byRole("button", { name: "Edit" })
+
+export const viewDraftDetourHeading = byRole("heading", {
+  name: "View Draft Detour",
+})
+export const drawDetourHeading = byRole("heading", { name: "Draw Detour" })
 
 export const originalRouteShape = {
   interactive: {

From 493e088d9b3b8579fbefc19aa07174724c3aac01 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:55:23 -0400
Subject: [PATCH 10/10] feat: Button icons for detour creation (#2849)

* feat: Add icons to buttons in create detour workflow
---
 .../detourPanels/detourFinishedPanel.tsx      |  6 +-
 .../detourRouteSelectionPanel.tsx             |  7 ++-
 .../detours/detourPanels/drawDetourPanel.tsx  | 10 +++-
 assets/src/helpers/bsIcons.tsx                | 56 +++++++++++++++++++
 .../components/detours/diversionPage.test.tsx | 16 ++----
 .../components/detours/diversionPage.tsx      |  4 +-
 6 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index a9d2115ed..45d53b9fe 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -65,11 +65,11 @@ export const DetourFinishedPanel = ({
         </OverlayTrigger>
         {onActivateDetour && (
           <Button
-            className="m-3 flex-grow-1"
-            variant="missed-stop"
+            className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onActivateDetour}
           >
-            Activate Detour
+            <BsIcons.Power />
+            Start Detour
           </Button>
         )}
       </Panel.Body.Footer>
diff --git a/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx b/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
index fcc3a359d..c82b704f5 100644
--- a/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
@@ -8,6 +8,7 @@ import {
   RoutePatternId,
 } from "../../../schedule"
 import RoutePropertiesCard from "../../mapPage/routePropertiesCard"
+import { Brush } from "../../../helpers/bsIcons"
 
 interface SelectedRouteInfoWithRoutePatterns {
   selectedRoute: Route
@@ -142,7 +143,11 @@ export const DetourRouteSelectionPanel = ({
         </Panel.Body.ScrollArea>
 
         <Panel.Body.Footer className="d-flex">
-          <Button className="m-3 flex-grow-1" onClick={onConfirm}>
+          <Button
+            className="m-3 flex-grow-1 icon-link justify-content-center"
+            onClick={onConfirm}
+          >
+            <Brush />
             Start drawing detour
           </Button>
         </Panel.Body.Footer>
diff --git a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
index 1904487e6..cec5bb915 100644
--- a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
@@ -3,7 +3,7 @@ import { DetourShape } from "../../../models/detour"
 import { Button, ListGroup } from "react-bootstrap"
 import { Panel } from "../diversionPage"
 import { Stop } from "../../../schedule"
-import { ArrowLeft } from "../../../helpers/bsIcons"
+import { ArrowLeft, CardChecklist } from "../../../helpers/bsIcons"
 import { AffectedRoute, MissedStops } from "../detourPanelComponents"
 
 export interface DrawDetourPanelProps {
@@ -77,8 +77,12 @@ export const DrawDetourPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer hidden={!detourFinished}>
-        <Button className="flex-grow-1 m-3" onClick={onReviewDetour}>
-          Review Detour
+        <Button
+          className="flex-grow-1 m-3 icon-link justify-content-center"
+          onClick={onReviewDetour}
+        >
+          <CardChecklist />
+          Review
         </Button>
       </Panel.Body.Footer>
     </Panel.Body>
diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
index 782c13e1f..3b3a55b88 100644
--- a/assets/src/helpers/bsIcons.tsx
+++ b/assets/src/helpers/bsIcons.tsx
@@ -105,6 +105,43 @@ export const BoxArrowRight = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/brush/
+ */
+export const Brush = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-brush"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.1 6.1 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.1 8.1 0 0 1-3.078.132 4 4 0 0 1-.562-.135 1.4 1.4 0 0 1-.466-.247.7.7 0 0 1-.204-.288.62.62 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896q.19.012.348.048c.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04M4.705 11.912a1.2 1.2 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.4 3.4 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3 3 0 0 0 .126-.75zm1.44.026c.12-.04.277-.1.458-.183a5.1 5.1 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005zm3.582-3.043.002.001h-.002z" />
+  </svg>
+)
+
+/**
+ * @returns https://icons.getbootstrap.com/icons/card-checklist/
+ */
+export const CardChecklist = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-card-checklist"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z" />
+    <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0M7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/chat-fill/
  */
@@ -321,6 +358,25 @@ export const PlusSquare = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/power/
+ */
+export const Power = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-power"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M7.5 1v7h1V1z" />
+    <path d="M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/question-circle-fill/
  */
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index bd301af02..63bc288e3 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -377,15 +377,13 @@ describe("DiversionPage", () => {
       fireEvent.click(originalRouteShape.get(container))
     })
 
-    expect(
-      screen.getByRole("button", { name: "Review Detour", hidden: true })
-    ).not.toBeVisible()
+    expect(reviewDetourButton.query()).not.toBeInTheDocument()
 
     act(() => {
       fireEvent.click(originalRouteShape.get(container))
     })
 
-    expect(screen.getByRole("button", { name: "Review Detour" })).toBeVisible()
+    expect(reviewDetourButton.get()).toBeVisible()
   })
 
   test.each<{
@@ -1074,7 +1072,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("When 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1091,7 +1089,7 @@ describe("DiversionPage", () => {
     expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When the finished-detour API call errors and 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchFinishedDetour).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1110,7 +1108,7 @@ describe("DiversionPage", () => {
     expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When the detour-directions API call errors and 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchDetourDirections).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1199,9 +1197,7 @@ describe("DiversionPage", () => {
 
     await waitFor(() => {
       expect(editDetourButton.query()).not.toBeInTheDocument()
-      expect(
-        screen.getByRole("button", { name: "Review Detour" })
-      ).toBeVisible()
+      expect(reviewDetourButton.get()).toBeVisible()
 
       expect(screen.getByRole("button", { name: "Undo" })).not.toBeDisabled()
       expect(screen.getByRole("button", { name: "Clear" })).not.toBeDisabled()
diff --git a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
index f5d2706cb..b4c3c132a 100644
--- a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
+++ b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
@@ -1,9 +1,9 @@
 import { expect } from "@jest/globals"
 import { byRole } from "testing-library-selector"
 
-export const reviewDetourButton = byRole("button", { name: "Review Detour" })
+export const reviewDetourButton = byRole("button", { name: "Review" })
 export const activateDetourButton = byRole("button", {
-  name: "Activate Detour",
+  name: "Start Detour",
 })
 export const editDetourButton = byRole("button", { name: "Edit" })