From 97bfc61d87df2c577d81514c1132119c4d204581 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 13 Jun 2024 11:37:38 -0400
Subject: [PATCH 01/21] add class names to nearby view

---
 lib/components/viewers/nearby/nearby-view.tsx | 1 +
 lib/components/viewers/pattern-row.tsx        | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx
index c087e1af3..9f4b24310 100644
--- a/lib/components/viewers/nearby/nearby-view.tsx
+++ b/lib/components/viewers/nearby/nearby-view.tsx
@@ -208,6 +208,7 @@ function NearbyView({
       >
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
+          className="nearby-view-card"
           onBlur={onMouseLeave}
           onFocus={() => onMouseEnter(n.place)}
           onMouseEnter={() => onMouseEnter(n.place)}
diff --git a/lib/components/viewers/pattern-row.tsx b/lib/components/viewers/pattern-row.tsx
index f893a3293..ed70da046 100644
--- a/lib/components/viewers/pattern-row.tsx
+++ b/lib/components/viewers/pattern-row.tsx
@@ -78,7 +78,7 @@ const PatternRow = ({
   const routeColor = getRouteColorBasedOnSettings(route.operator, route)
 
   return (
-    <PatternRowItem roundedTop={roundedTop}>
+    <PatternRowItem className="pattern-row-item" roundedTop={roundedTop}>
       {/* header row */}
       <div
         className="header stop-view"
@@ -107,13 +107,13 @@ const PatternRow = ({
         </div>
         {/* next departure preview (only shows up to 3 entries) */}
         {hasStopTimes && (
-          <NextTripPreview>
+          <NextTripPreview className="departure-times">
             {homeTimezone && renderDay(homeTimezone, stopTimes?.[0].serviceDay)}
             {[0, 1, 2].map(
               (index) =>
                 stopTimes?.[index] && (
                   // TODO: use stop time id as index
-                  <li key={index}>
+                  <li className="departure-time" key={index}>
                     <StopTimeCell
                       homeTimezone={homeTimezone}
                       key={index}

From cc5a8e7be79ef434819f91e13b324d8e7a9634e3 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 14 Jun 2024 13:22:37 -0400
Subject: [PATCH 02/21] route viewer styles

---
 lib/components/viewers/pattern-viewer.tsx | 2 +-
 lib/components/viewers/route-details.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/viewers/pattern-viewer.tsx b/lib/components/viewers/pattern-viewer.tsx
index 1f6204633..4f2fc90bc 100644
--- a/lib/components/viewers/pattern-viewer.tsx
+++ b/lib/components/viewers/pattern-viewer.tsx
@@ -78,7 +78,7 @@ const PatternViewer = ({
 
     return (
       <div
-        className="route-viewer"
+        className="route-viewer pattern-viewer"
         style={{
           backgroundColor: routeColor,
           color: textColor,
diff --git a/lib/components/viewers/route-details.tsx b/lib/components/viewers/route-details.tsx
index aaacb4a42..c7e05b135 100644
--- a/lib/components/viewers/route-details.tsx
+++ b/lib/components/viewers/route-details.tsx
@@ -169,7 +169,7 @@ class RouteDetails extends Component<Props> {
         full={pattern != null}
         textColor={getMostReadableTextColor(routeColor, route?.textColor)}
       >
-        <RouteNameContainer>
+        <RouteNameContainer className="operator-info">
           <LogoLinkContainer>
             {agency && (
               <>
@@ -196,7 +196,7 @@ class RouteDetails extends Component<Props> {
           </LogoLinkContainer>
         </RouteNameContainer>
         {headsigns && headsigns.length > 0 && (
-          <PatternContainer>
+          <PatternContainer className="pattern-picker">
             <HeadsignSelectLabel htmlFor="headsign-selector-label">
               <FormattedMessage id="components.RouteDetails.stopsTo" />
             </HeadsignSelectLabel>

From a1c199685ba7696c065669c4ffbef09056d07146 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 21 Jun 2024 14:18:22 -0400
Subject: [PATCH 03/21] itinerary tweaks to allow more styling

---
 example-config.yml                            |  2 +
 i18n/en-US.yml                                |  1 +
 lib/app.js                                    |  3 +
 .../narrative/metro/departure-times-list.tsx  |  2 +-
 .../narrative/metro/metro-itinerary.tsx       | 75 ++++++++++++-------
 .../narrative/metro/route-block.tsx           |  4 +-
 lib/util/config-types.ts                      |  1 +
 7 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 0bc4e0feb..19cf97e7f 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -404,6 +404,8 @@ itinerary:
   previewOverlay: false
   # Whether to add a OTP_RR_A11Y_ROUTING_ENABLED error to all itineraries with accessibility scores
   displayA11yError: false
+  # Whether to display itinerary info in the side of the preview or next to the departure times
+  showInlineItinerarySummary: false
   # The sort option to use by default
   # Available sort options: 'BEST', 'DURATION', 'ARRIVALTIME', 'WALKTIME', 'COST', 'DEPARTURETIME'
   # defaultSort: "BEST" # Default
diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index c041d1e56..38b859df4 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -280,6 +280,7 @@ components:
   MetroUI:
     arriveAt: You arrive
     itineraryDescription: "{time} itinerary using {routes}"
+    itinerarySummary: from {stopName} | {cost}
     leaveAt: You leave
     multipleOptions: Multiple Options
     orAlternatives: or other routes in the same direction
diff --git a/lib/app.js b/lib/app.js
index 4e3fb6728..83b0d9c02 100644
--- a/lib/app.js
+++ b/lib/app.js
@@ -63,6 +63,7 @@ const ErrorBoundary = bugsnagApiKey
 const {
   getCustomIcon,
   ItineraryBody,
+  ItineraryPreviewSupplement,
   LegIcon,
   MainPanel,
   MobileResultsScreen,
@@ -171,6 +172,8 @@ const components = {
 
   ItineraryBody: DefaultItinerary,
 
+  ItineraryPreviewSupplement,
+
   MainPanel: BatchRoutingPanel,
 
   MapWindows: isCallTakerModuleEnabled ? jsConfig.MapWindows : null,
diff --git a/lib/components/narrative/metro/departure-times-list.tsx b/lib/components/narrative/metro/departure-times-list.tsx
index bebfd30e8..c5a287e28 100644
--- a/lib/components/narrative/metro/departure-times-list.tsx
+++ b/lib/components/narrative/metro/departure-times-list.tsx
@@ -37,7 +37,7 @@ const TimeButton = ({
   setActiveItinerary
 }: TimeButtonProps) => {
   const intl = useIntl()
-  const classNames = []
+  const classNames = ['timeInfo']
   if (realTime) classNames.push('realtime')
   if (active) classNames.push('active')
   const timeString = intl.formatTime(displayedTime)
diff --git a/lib/components/narrative/metro/metro-itinerary.tsx b/lib/components/narrative/metro/metro-itinerary.tsx
index 27cad87bd..85fbb5c85 100644
--- a/lib/components/narrative/metro/metro-itinerary.tsx
+++ b/lib/components/narrative/metro/metro-itinerary.tsx
@@ -28,7 +28,7 @@ import ItineraryBody from '../line-itin/connected-itinerary-body'
 import NarrativeItinerary from '../narrative-itinerary'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
 
-import { getFlexAttributes } from './attribute-utils'
+import { getFirstTransitLegStop, getFlexAttributes } from './attribute-utils'
 import DepartureTimesList, {
   SetActiveItineraryHandler
 } from './departure-times-list'
@@ -253,10 +253,11 @@ class MetroItinerary extends NarrativeItinerary {
       setActiveItinerary,
       setActiveLeg,
       setItineraryView,
+      showInlineItinerarySummary,
       showLegDurations,
       showRealtimeAnnotation
     } = this.props
-    const { SvgIcon } = this.context
+    const { ItineraryPreviewSupplement, SvgIcon } = this.context
 
     const { isCallAhead, isContinuousDropoff, isFlexItinerary, phone } =
       getFlexAttributes(itinerary)
@@ -307,6 +308,22 @@ class MetroItinerary extends NarrativeItinerary {
       )
     }
 
+    const fareInfo =
+      // Hide the fare information entirely if the defaultFareType isn't specified.
+      transitFare === null || transitFare === undefined || transitFare < 0 ? (
+        <FormattedMessage id="common.itineraryDescriptions.fareUnknown" />
+      ) : (
+        // TODO: re-implement TNC fares for metro UI?
+        <FormattedNumber
+          currency={fareCurrency}
+          currencyDisplay="narrowSymbol"
+          // This isn't a "real" style prop
+          // eslint-disable-next-line react/style-prop-object
+          style="currency"
+          value={transitFare}
+        />
+      )
+
     // Use first leg's agency as a fallback
     return (
       <div
@@ -341,6 +358,9 @@ class MetroItinerary extends NarrativeItinerary {
             {!mini && (
               <ItineraryGrid className="itin-grid" role="group">
                 {/* TODO: a11y: add aria-label to parent element */}
+                {ItineraryPreviewSupplement && (
+                  <ItineraryPreviewSupplement itinerary={itinerary} />
+                )}
                 <MetroItineraryRoutes
                   expanded={expanded}
                   itinerary={itinerary}
@@ -369,26 +389,10 @@ class MetroItinerary extends NarrativeItinerary {
                       />
                     </SecondaryInfo>
                   )}
-                  {
-                    // Hide the fare information entirely if the defaultFareType isn't specified.
-                    <SecondaryInfo>
-                      {transitFare === null ||
-                      transitFare === undefined ||
-                      transitFare < 0 ? (
-                        <FormattedMessage id="common.itineraryDescriptions.fareUnknown" />
-                      ) : (
-                        // TODO: re-implement TNC fares for metro UI?
-                        <FormattedNumber
-                          currency={fareCurrency}
-                          currencyDisplay="narrowSymbol"
-                          // This isn't a "real" style prop
-                          // eslint-disable-next-line react/style-prop-object
-                          style="currency"
-                          value={transitFare}
-                        />
-                      )}
-                    </SecondaryInfo>
-                  }
+                  {/* If inline summary is enabled, don't show fare in side */}
+                  {showInlineItinerarySummary === true && (
+                    <SecondaryInfo>{fareInfo}</SecondaryInfo>
+                  )}
                   <SecondaryInfo>
                     <FormattedMessage
                       id="components.MetroUI.timeWalking"
@@ -404,17 +408,31 @@ class MetroItinerary extends NarrativeItinerary {
                   </SecondaryInfo>
                 </ItineraryDetails>
                 <DepartureTimes>
-                  {arrivesAt ? (
-                    <FormattedMessage id="components.MetroUI.arriveAt" />
-                  ) : (
-                    <FormattedMessage id="components.MetroUI.leaveAt" />
-                  )}{' '}
+                  <span className="timeInfo">
+                    {arrivesAt ? (
+                      <FormattedMessage id="components.MetroUI.arriveAt" />
+                    ) : (
+                      <FormattedMessage id="components.MetroUI.leaveAt" />
+                    )}
+                  </span>{' '}
                   <DepartureTimesList
                     expanded={expanded}
                     itinerary={itinerary}
                     setActiveItinerary={setActiveItinerary}
                     showArrivals={arrivesAt}
                   />
+                  {showInlineItinerarySummary && (
+                    <>
+                      {' '}
+                      <FormattedMessage
+                        id="components.MetroUI.itinerarySummary"
+                        values={{
+                          cost: fareInfo,
+                          stopName: getFirstTransitLegStop(itinerary)
+                        }}
+                      />
+                    </>
+                  )}{' '}
                 </DepartureTimes>
               </ItineraryGrid>
             )}
@@ -464,6 +482,9 @@ const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
     enableDot: !state.otp.config.itinerary?.disableMetroSeperatorDot,
     // @ts-expect-error TODO: type activeSearch
     pending: activeSearch ? Boolean(activeSearch.pending) : false,
+
+    showInlineItinerarySummary:
+      state.otp.config.itinerary?.showInlineItinerarySummary,
     showLegDurations: state.otp.config.itinerary?.showLegDurations
   }
 }
diff --git a/lib/components/narrative/metro/route-block.tsx b/lib/components/narrative/metro/route-block.tsx
index dfa37408b..e167edceb 100644
--- a/lib/components/narrative/metro/route-block.tsx
+++ b/lib/components/narrative/metro/route-block.tsx
@@ -144,7 +144,9 @@ const RouteBlock = ({
 
   return (
     <>
-      {showDivider && previousLegMode && <Divider>•</Divider>}
+      {showDivider && previousLegMode && (
+        <Divider className="route-block-divider">•</Divider>
+      )}
       <Wrapper className="route-block-wrapper">
         {leg.mode !== previousLegMode && (
           <LegIconWrapper>
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index e8008d9eb..cde93c4d1 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -281,6 +281,7 @@ export interface ItineraryConfig {
   showAllWalkLegs?: boolean
   showFirstResultByDefault?: boolean
   showHeaderText?: boolean
+  showInlineItinerarySummary?: boolean
   showLegDurations?: boolean
   showPlanFirstLastButtons?: boolean
   showRouteFares?: boolean

From 0133041313574c53af87824ac788c6cd25e13ac6 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 26 Jun 2024 12:15:01 -0400
Subject: [PATCH 04/21] `ItineraryPreviewSupplement` more props

---
 lib/components/narrative/metro/metro-itinerary.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/components/narrative/metro/metro-itinerary.tsx b/lib/components/narrative/metro/metro-itinerary.tsx
index 85fbb5c85..dd06b6447 100644
--- a/lib/components/narrative/metro/metro-itinerary.tsx
+++ b/lib/components/narrative/metro/metro-itinerary.tsx
@@ -359,7 +359,10 @@ class MetroItinerary extends NarrativeItinerary {
               <ItineraryGrid className="itin-grid" role="group">
                 {/* TODO: a11y: add aria-label to parent element */}
                 {ItineraryPreviewSupplement && (
-                  <ItineraryPreviewSupplement itinerary={itinerary} />
+                  <ItineraryPreviewSupplement
+                    active={active}
+                    itinerary={itinerary}
+                  />
                 )}
                 <MetroItineraryRoutes
                   expanded={expanded}

From cc07efa704615df9c2fdd19ffe484cdffb3e48cd Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 26 Jun 2024 14:00:51 -0400
Subject: [PATCH 05/21] more class names

---
 lib/components/narrative/line-itin/connected-itinerary-body.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 287a9852a..5274b176b 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -118,6 +118,7 @@ class ConnectedItineraryBody extends Component {
         <StyledItineraryBody
           accessibilityScoreGradationMap={accessibilityScoreGradationMap}
           alwaysCollapseAlerts={allowUserAlertCollapsing}
+          className="itin-body"
           config={config}
           diagramVisible={diagramVisible}
           itinerary={clonedItinerary}

From 07a5da1847d3d9f513b5f2a1fdd281c406b0d070 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 28 Jun 2024 13:37:01 -0400
Subject: [PATCH 06/21] correct nearby view mobile link class

---
 lib/components/app/app-menu.tsx | 2 +-
 lib/components/app/app.css      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/components/app/app-menu.tsx b/lib/components/app/app-menu.tsx
index 2bb891739..fe3870e5c 100644
--- a/lib/components/app/app-menu.tsx
+++ b/lib/components/app/app-menu.tsx
@@ -233,7 +233,7 @@ class AppMenu extends Component<
             {/* This item is duplicated by the view-switcher, but only shown on mobile
             when the view switcher isn't shown (using css) */}
             <AppMenuItem
-              className="app-menu-route-viewer-link"
+              className="app-menu-nearby-viewer-link"
               icon={<MapPin />}
               onClick={this._togglePane}
               text={intl.formatMessage({
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 59aea38f2..87fe44222 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -33,12 +33,14 @@
 
 /* Don't show route viewer link in the app menu on desktop as it is in the navbar */
 .app-menu .app-menu-route-viewer-link,
+.app-menu .app-menu-nearby-viewer-link,
 .app-menu .app-menu-trip-planner-link,
 .app-menu #app-menu-locale-selector {
   display: none;
 }
 @media (max-width: 768px) {
   .app-menu .app-menu-route-viewer-link,
+  .app-menu .app-menu-nearby-viewer-link,
   .app-menu .app-menu-trip-planner-link,
   .app-menu #app-menu-locale-selector {
     display: flex;

From ec811598f76562831c5d8d637c3f9ea2c8c92f49 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 1 Jul 2024 10:51:12 -0400
Subject: [PATCH 07/21] add missing fr string

---
 i18n/fr.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/i18n/fr.yml b/i18n/fr.yml
index ff8f6deaf..99a1985f2 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -297,6 +297,7 @@ components:
   MetroUI:
     arriveAt: Vous arrivez à
     itineraryDescription: Trajet de {time} par les lignes {routes}
+    itinerarySummary: Partez à {stopName} | {cost}
     leaveAt: Partez à
     multipleOptions: Plusieurs options
     orAlternatives: ou autres lignes dans la même direction

From fac98214a0dbe84fac8641d4625ea606f945d9cc Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 1 Jul 2024 11:18:28 -0400
Subject: [PATCH 08/21] correct condition

---
 lib/components/narrative/metro/metro-itinerary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/narrative/metro/metro-itinerary.tsx b/lib/components/narrative/metro/metro-itinerary.tsx
index dd06b6447..158f619f3 100644
--- a/lib/components/narrative/metro/metro-itinerary.tsx
+++ b/lib/components/narrative/metro/metro-itinerary.tsx
@@ -393,7 +393,7 @@ class MetroItinerary extends NarrativeItinerary {
                     </SecondaryInfo>
                   )}
                   {/* If inline summary is enabled, don't show fare in side */}
-                  {showInlineItinerarySummary === true && (
+                  {showInlineItinerarySummary !== true && (
                     <SecondaryInfo>{fareInfo}</SecondaryInfo>
                   )}
                   <SecondaryInfo>

From a470b0ac8bd92db6740cf7403dcf78f68805e38d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 1 Jul 2024 11:25:37 -0400
Subject: [PATCH 09/21] update snapshots

---
 .../viewers/__snapshots__/nearby-view.js.snap | 1352 +++++++++--------
 .../stop-schedule-viewer.ts.snap              |    6 +-
 2 files changed, 755 insertions(+), 603 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index 3c60f41c2..6ab8ca118 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -45,7 +45,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
+            className="sc-ctaXho PpeYk nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -84,7 +84,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-ehsPLh bsdzfb base-color-bg"
+                className="sc-dacGJm iCwywb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4078,7 +4078,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
+            className="sc-ctaXho PpeYk nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4117,7 +4117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-ehsPLh bsdzfb base-color-bg"
+                className="sc-dacGJm iCwywb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4132,6 +4132,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6MDM1NDBhOWUtZTY1Ny00NTRlLWFlN2ItOGFkOWRhODZjZmVk"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -4221,15 +4222,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4264,7 +4265,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4310,7 +4311,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4329,7 +4330,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4403,11 +4404,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4419,7 +4420,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4432,7 +4433,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4480,11 +4481,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4496,7 +4497,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4509,7 +4510,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4563,6 +4564,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6NjliMWJmZmEtMzk0Yi00Mzc0LWIwN2MtMzdlMTA2MjAzMWU5"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -4652,15 +4654,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4695,7 +4697,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4741,7 +4743,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4760,7 +4762,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4834,11 +4836,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4850,7 +4852,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4863,7 +4865,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4911,11 +4913,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -4927,7 +4929,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -4940,7 +4942,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -4994,6 +4996,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6MWQzN2RiMGEtMWM2MC00ZTgyLWEwY2YtNmFkNmE4NTEyNmEw"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -5083,15 +5086,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -5126,7 +5129,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -5172,7 +5175,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5191,7 +5194,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5265,11 +5268,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -5281,7 +5284,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -5294,7 +5297,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -5342,11 +5345,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -5358,7 +5361,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -5371,7 +5374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -5425,6 +5428,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDprY206MzY5NDA"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -7704,7 +7708,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10014,11 +10018,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 2
@@ -10030,7 +10034,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10049,7 +10053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -10106,7 +10110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -11326,11 +11330,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -11342,7 +11346,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -11355,7 +11359,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -11403,11 +11407,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -11419,7 +11423,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -11432,7 +11436,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -11481,7 +11485,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -11654,10 +11658,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -11705,7 +11710,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -11730,9 +11735,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Loyal Heights Greenwood
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -11756,7 +11763,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -11813,6 +11820,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -11867,7 +11875,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -11879,10 +11887,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -11893,7 +11901,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -11905,7 +11913,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -11928,7 +11936,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -11973,6 +11981,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -12027,7 +12036,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12039,10 +12048,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12053,7 +12062,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12065,7 +12074,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12088,7 +12097,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12133,6 +12142,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -12187,7 +12197,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12243,7 +12253,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12464,10 +12474,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12515,7 +12526,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12540,9 +12551,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Downtown Seattle Fremont
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12566,7 +12579,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -12623,6 +12636,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -12677,7 +12691,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12689,10 +12703,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12703,7 +12717,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12715,7 +12729,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12738,7 +12752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12783,6 +12797,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -12837,7 +12852,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12893,7 +12908,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12938,6 +12953,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -12992,7 +13008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13048,7 +13064,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13204,10 +13220,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13255,7 +13272,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13280,9 +13297,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Roosevelt Station Sand Point
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13306,7 +13325,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -13363,6 +13382,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -13417,7 +13437,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13429,10 +13449,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13443,7 +13463,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13455,7 +13475,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13478,7 +13498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13523,6 +13543,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -13577,7 +13598,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13633,7 +13654,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13678,6 +13699,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -13732,7 +13754,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13788,7 +13810,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13852,6 +13874,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDo0MDo5OTAwMDM"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -15327,7 +15350,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -16833,11 +16856,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt
@@ -16849,7 +16872,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -16868,7 +16891,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -16925,7 +16948,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -17743,11 +17766,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -17759,7 +17782,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -17772,7 +17795,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -17820,11 +17843,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -17836,7 +17859,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -17849,7 +17872,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -17898,7 +17921,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -18006,10 +18029,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18057,7 +18081,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-dFJtaz dfvczx"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18082,9 +18106,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Angle Lake
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18108,7 +18134,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18165,6 +18191,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -18219,7 +18246,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18275,7 +18302,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18320,6 +18347,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -18374,7 +18402,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18430,7 +18458,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18475,6 +18503,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -18529,7 +18558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18585,7 +18614,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18689,10 +18718,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18740,7 +18770,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-dFJtaz dfvczx"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18765,9 +18795,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Northgate
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18791,7 +18823,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18848,6 +18880,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -18902,7 +18935,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18958,7 +18991,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19179,10 +19212,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19230,7 +19264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-dFJtaz dfvczx"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19255,9 +19289,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Capitol Hill
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19281,7 +19317,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -19338,6 +19374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -19392,7 +19429,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19448,7 +19485,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19493,6 +19530,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -19547,7 +19585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19603,7 +19641,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19648,6 +19686,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -19702,7 +19741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19758,7 +19797,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19822,6 +19861,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpiaXJkLXNlYXR0bGUtd2FzaGluZ3RvbjpjZTM4MDA4Ny1lMjU1LTQzYjgtYjM5ZC04MjY3Y2E3MmJjMGQ"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -19911,15 +19951,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -19954,7 +19994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20000,7 +20040,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20019,7 +20059,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20093,11 +20133,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20109,7 +20149,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20122,7 +20162,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20170,11 +20210,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20186,7 +20226,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20199,7 +20239,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20253,6 +20293,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6ODQ4M2VmZGUtZDRkMC00NWZkLWI0YzItZWNhOTg4MDhjMDQ4"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -20342,15 +20383,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -20385,7 +20426,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20431,7 +20472,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20450,7 +20491,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20524,11 +20565,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20540,7 +20581,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20553,7 +20594,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20601,11 +20642,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20617,7 +20658,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20630,7 +20671,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -20684,6 +20725,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6ZmUwZjM4ZjAtMjc3YS00MjQ4LTlkNzYtMTc4Y2UxZGQ0MDY0"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -20773,15 +20815,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -20816,7 +20858,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20862,7 +20904,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20881,7 +20923,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20955,11 +20997,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -20971,7 +21013,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -20984,7 +21026,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -21032,11 +21074,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -21048,7 +21090,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -21061,7 +21103,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -21115,6 +21157,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDprY206MTY0MzA"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -23702,7 +23745,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -26320,11 +26363,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 1
@@ -26336,7 +26379,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -26355,7 +26398,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -26412,7 +26455,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -27786,11 +27829,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -27802,7 +27845,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -27815,7 +27858,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -27863,11 +27906,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -27879,7 +27922,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -27892,7 +27935,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -27941,7 +27984,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -28114,10 +28157,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28165,7 +28209,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -28190,9 +28234,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               University District Roosevelt Station
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -28216,7 +28262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -28273,6 +28319,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -28327,7 +28374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28339,10 +28386,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28353,7 +28400,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28365,7 +28412,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28388,7 +28435,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28433,6 +28480,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -28487,7 +28535,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28499,10 +28547,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28513,7 +28561,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28525,7 +28573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28548,7 +28596,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28593,6 +28641,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -28647,7 +28696,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28703,7 +28752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28937,10 +28986,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28988,7 +29038,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29013,9 +29063,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Sand Point East Green Lake
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29039,7 +29091,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29096,6 +29148,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -29150,7 +29203,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29162,10 +29215,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29176,7 +29229,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29188,7 +29241,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29211,7 +29264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29256,6 +29309,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -29310,7 +29364,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29366,7 +29420,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29411,6 +29465,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -29465,7 +29520,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29477,10 +29532,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29491,7 +29546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29503,7 +29558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29526,7 +29581,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29682,10 +29737,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29733,7 +29789,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29758,9 +29814,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               University District Sand Point
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29784,7 +29842,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29841,6 +29899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -29895,7 +29954,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29951,7 +30010,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29996,6 +30055,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -30050,7 +30110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30106,7 +30166,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30151,6 +30211,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -30205,7 +30266,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30261,7 +30322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30365,10 +30426,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30416,7 +30478,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30441,9 +30503,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Madrona Special
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30467,7 +30531,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -30524,6 +30588,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -30578,7 +30643,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30634,7 +30699,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30698,6 +30763,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6YTg5MDZiYTctMmU2NC00ZDk4LWI0ZGYtNmJjNDBlZTVkYzc3"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -30787,15 +30853,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -30830,7 +30896,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -30876,7 +30942,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -30895,7 +30961,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -30969,11 +31035,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -30985,7 +31051,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -30998,7 +31064,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31046,11 +31112,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31062,7 +31128,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31075,7 +31141,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31129,6 +31195,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6NTU0NzM5MWEtMzZmNS00YjNkLWI3NWItZmI2YWExY2JjMjdh"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -31218,15 +31285,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -31261,7 +31328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31307,7 +31374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31326,7 +31393,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31400,11 +31467,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31416,7 +31483,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31429,7 +31496,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31477,11 +31544,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31493,7 +31560,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31506,7 +31573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31560,6 +31627,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6NmMyNDRhZjEtZjJjOC00N2JhLWIzOTMtNDhkMGVhY2ZlMDFj"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -31649,15 +31717,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -31692,7 +31760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31738,7 +31806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31757,7 +31825,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31831,11 +31899,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31847,7 +31915,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31860,7 +31928,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31908,11 +31976,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -31924,7 +31992,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -31937,7 +32005,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -31991,6 +32059,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6NDJjMjA0NWUtZDEyYS00MTg1LTlkNjEtM2ZkNjMwMzQyNjUz"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -32080,15 +32149,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -32123,7 +32192,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32169,7 +32238,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32188,7 +32257,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32262,11 +32331,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32278,7 +32347,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32291,7 +32360,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32339,11 +32408,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32355,7 +32424,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32368,7 +32437,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32422,6 +32491,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6NTZkNTJkNzktOGMwZC00NzJiLThlMzgtZjgwMGJjZTBhN2Iy"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -32511,15 +32581,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -32554,7 +32624,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32600,7 +32670,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32619,7 +32689,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32693,11 +32763,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32709,7 +32779,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32722,7 +32792,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32770,11 +32840,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -32786,7 +32856,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -32799,7 +32869,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -32853,6 +32923,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDprY206MTY0NDA"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -34328,7 +34399,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -35834,11 +35905,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt Station Bay 5 - Bay 5
@@ -35850,7 +35921,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -35869,7 +35940,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -35926,7 +35997,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -36744,11 +36815,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -36760,7 +36831,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -36773,7 +36844,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -36821,11 +36892,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -36837,7 +36908,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -36850,7 +36921,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -36899,7 +36970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -37007,10 +37078,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37058,7 +37130,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37083,9 +37155,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               University District Roosevelt
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37109,7 +37183,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -37166,6 +37240,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -37220,7 +37295,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37232,10 +37307,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -37246,7 +37321,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -37258,7 +37333,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -37281,7 +37356,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37326,6 +37401,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -37380,7 +37456,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37436,7 +37512,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37481,6 +37557,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -37535,7 +37612,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37591,7 +37668,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37812,10 +37889,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37863,7 +37941,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37888,9 +37966,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               University District Maple Leaf
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37914,7 +37994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -37971,6 +38051,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -38025,7 +38106,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38081,7 +38162,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38126,6 +38207,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -38180,7 +38262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38236,7 +38318,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38281,6 +38363,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -38335,7 +38418,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38391,7 +38474,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38495,10 +38578,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38546,7 +38630,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -38571,9 +38655,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Downtown Seattle Special
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38597,7 +38683,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -38654,6 +38740,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -38708,7 +38795,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38764,7 +38851,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38828,6 +38915,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6OWM3ZDZkYjEtYWJiMi00OWFlLTg3NzAtOGNkNjQ1MzcwMGUw"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -38917,15 +39005,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -38960,7 +39048,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -39006,7 +39094,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -39025,7 +39113,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -39099,11 +39187,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -39115,7 +39203,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -39128,7 +39216,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -39176,11 +39264,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -39192,7 +39280,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -39205,7 +39293,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -39259,6 +39347,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDo0MDo5OTAwMDQ"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -41434,7 +41523,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -43640,11 +43729,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt
@@ -43656,7 +43745,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -43675,7 +43764,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -43732,7 +43821,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -44900,11 +44989,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -44916,7 +45005,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -44929,7 +45018,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -44977,11 +45066,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -44993,7 +45082,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -45006,7 +45095,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -45055,7 +45144,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -45319,10 +45408,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -45370,7 +45460,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-dFJtaz dfvczx"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -45395,9 +45485,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Northgate
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -45421,7 +45513,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -45478,6 +45570,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -45532,7 +45625,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45544,10 +45637,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45558,7 +45651,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45570,7 +45663,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45593,7 +45686,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45638,6 +45731,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -45692,7 +45786,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45704,10 +45798,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45718,7 +45812,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45730,7 +45824,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45753,7 +45847,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45798,6 +45892,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -45852,7 +45947,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45864,10 +45959,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45878,7 +45973,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45890,7 +45985,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45913,7 +46008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45977,6 +46072,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDprY206MjM1NjE"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -48564,7 +48660,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -51182,11 +51278,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 3
@@ -51198,7 +51294,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -51217,7 +51313,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -51274,7 +51370,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -52648,11 +52744,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -52664,7 +52760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -52677,7 +52773,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -52725,11 +52821,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -52741,7 +52837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -52754,7 +52850,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -52803,7 +52899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -52911,10 +53007,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -52962,7 +53059,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho jinUgQ"
+                                                    className="sc-dFJtaz fcRZtF"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -52987,9 +53084,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Bothell
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53013,7 +53112,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53070,6 +53169,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -53124,7 +53224,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53180,7 +53280,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53225,6 +53325,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -53279,7 +53380,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53335,7 +53436,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53380,6 +53481,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -53434,7 +53536,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53490,7 +53592,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53646,10 +53748,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53697,7 +53800,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -53722,9 +53825,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Northgate Station Roosevelt Station
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53748,7 +53853,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53805,6 +53910,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -53859,7 +53965,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53871,10 +53977,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -53885,7 +53991,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -53897,7 +54003,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -53920,7 +54026,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53965,6 +54071,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -54019,7 +54126,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54075,7 +54182,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54120,6 +54227,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -54174,7 +54282,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54230,7 +54338,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54386,10 +54494,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -54437,7 +54546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho jinUgQ"
+                                                    className="sc-dFJtaz fcRZtF"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -54462,9 +54571,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Woodinville
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -54488,7 +54599,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -54545,6 +54656,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -54599,7 +54711,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54655,7 +54767,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54700,6 +54812,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -54754,7 +54867,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54810,7 +54923,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54855,6 +54968,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -54909,7 +55023,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54965,7 +55079,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55186,10 +55300,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55237,7 +55352,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55262,9 +55377,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Jackson Park Maple Leaf
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55288,7 +55405,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -55345,6 +55462,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -55399,7 +55517,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55455,7 +55573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55500,6 +55618,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -55554,7 +55673,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55610,7 +55729,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55655,6 +55774,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -55709,7 +55829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55765,7 +55885,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55921,10 +56041,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55972,7 +56093,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55997,9 +56118,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Kenmore P&R Roosevelt Station
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56023,7 +56146,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56080,6 +56203,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -56134,7 +56258,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56190,7 +56314,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56235,6 +56359,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -56289,7 +56414,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56345,7 +56470,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56390,6 +56515,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -56444,7 +56570,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56500,7 +56626,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56630,10 +56756,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56681,7 +56808,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -56706,9 +56833,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Kenmore P&R
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56732,7 +56861,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56789,6 +56918,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -56843,7 +56973,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56899,7 +57029,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56944,6 +57074,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -56998,7 +57129,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57054,7 +57185,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57099,6 +57230,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -57153,7 +57285,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57209,7 +57341,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57273,6 +57405,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="UmVudGFsVmVoaWNsZTpsaW1lX3NlYXR0bGU6YTM0YzhmNTUtMjY4Ny00MjhlLWJmZTMtYWZiODgwNjdmNDM2"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -57362,15 +57495,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-jQbJRc jPoPQ"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-fvhFOF eEJTMU"
                                   >
                                     <IconWithText
                                       icon={
@@ -57405,7 +57538,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -57451,7 +57584,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-GTVdH hvoxCk"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -57470,7 +57603,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-gsxoIA fEzsen"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -57544,11 +57677,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <DotCircle
-                                                      className="sc-kmATbt bhVrag"
+                                                      className="sc-Azgjq cvPmYm"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-kmATbt bhVrag"
+                                                        className="sc-Azgjq cvPmYm"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -57560,7 +57693,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -57573,7 +57706,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -57621,11 +57754,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                     size="0.9em"
                                                   >
                                                     <MapMarkerAlt
-                                                      className="sc-dkmKIT cEQWzV"
+                                                      className="sc-hTZgZg kyAYqR"
                                                       size="0.9em"
                                                     >
                                                       <StyledIconBase
-                                                        className="sc-dkmKIT cEQWzV"
+                                                        className="sc-hTZgZg kyAYqR"
                                                         iconAttrs={
                                                           Object {
                                                             "fill": "currentColor",
@@ -57637,7 +57770,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <ForwardRef
-                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                          className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                           iconAttrs={
                                                             Object {
                                                               "fill": "currentColor",
@@ -57650,7 +57783,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                            className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                             fill="currentColor"
                                                             focusable="false"
                                                             height="0.9em"
@@ -57704,6 +57837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                   key="U3RvcDprY206MzY5MzE"
                 >
                   <div
+                    className="nearby-view-card"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseEnter={[Function]}
@@ -59983,7 +60117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-jUEmfL eaQNeE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -62293,11 +62427,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-jQbJRc jPoPQ"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-fvhFOF eEJTMU"
                                       >
                                         <span>
                                           NE 65th St & 14th Ave NE
@@ -62309,7 +62443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-GTVdH hvoxCk"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -62328,7 +62462,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-gsxoIA fEzsen"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -62385,7 +62519,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -63605,11 +63739,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <DotCircle
-                                                          className="sc-kmATbt bhVrag"
+                                                          className="sc-Azgjq cvPmYm"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-kmATbt bhVrag"
+                                                            className="sc-Azgjq cvPmYm"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -63621,7 +63755,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -63634,7 +63768,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kmATbt bhVrag"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-Azgjq cvPmYm"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -63682,11 +63816,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         size="0.9em"
                                                       >
                                                         <MapMarkerAlt
-                                                          className="sc-dkmKIT cEQWzV"
+                                                          className="sc-hTZgZg kyAYqR"
                                                           size="0.9em"
                                                         >
                                                           <StyledIconBase
-                                                            className="sc-dkmKIT cEQWzV"
+                                                            className="sc-hTZgZg kyAYqR"
                                                             iconAttrs={
                                                               Object {
                                                                 "fill": "currentColor",
@@ -63698,7 +63832,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             size="0.9em"
                                                           >
                                                             <ForwardRef
-                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                              className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                               iconAttrs={
                                                                 Object {
                                                                   "fill": "currentColor",
@@ -63711,7 +63845,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                             >
                                                               <svg
                                                                 aria-hidden="true"
-                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-dkmKIT cEQWzV"
+                                                                className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hTZgZg kyAYqR"
                                                                 fill="currentColor"
                                                                 focusable="false"
                                                                 height="0.9em"
@@ -63760,7 +63894,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-eGCaLh dpUXHF"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -63933,10 +64067,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -63984,7 +64119,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64009,9 +64144,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Loyal Heights Greenwood
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64035,7 +64172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -64092,6 +64229,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -64146,7 +64284,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64158,10 +64296,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64172,7 +64310,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64184,7 +64322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64207,7 +64345,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64252,6 +64390,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -64306,7 +64445,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64318,10 +64457,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64332,7 +64471,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64344,7 +64483,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64367,7 +64506,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64412,6 +64551,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -64466,7 +64606,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64522,7 +64662,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64743,10 +64883,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64794,7 +64935,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64819,9 +64960,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Downtown Seattle Fremont
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64845,7 +64988,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -64902,6 +65045,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -64956,7 +65100,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64968,10 +65112,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64982,7 +65126,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64994,7 +65138,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65017,7 +65161,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65062,6 +65206,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -65116,7 +65261,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65172,7 +65317,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65217,6 +65362,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -65271,7 +65417,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65327,7 +65473,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65483,10 +65629,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     }
                                   >
                                     <styled.li
+                                      className="pattern-row-item"
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-biBsmb doErGK pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65534,7 +65681,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-dFJtaz kcciLh"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -65559,9 +65706,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                               Roosevelt Station Sand Point
                                             </span>
                                           </div>
-                                          <styled.ol>
+                                          <styled.ol
+                                            className="departure-times"
+                                          >
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-eHfRjS bxdpnb departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65585,7 +65734,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -65642,6 +65791,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </IconWithText>
                                               </p>
                                               <li
+                                                className="departure-time"
                                                 key="0"
                                               >
                                                 <Connect(StopTimeCell)
@@ -65696,7 +65846,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65708,10 +65858,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-hzMMVR dLEyZp"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-hzMMVR dLEyZp"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -65722,7 +65872,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -65734,7 +65884,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65757,7 +65907,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65802,6 +65952,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="1"
                                               >
                                                 <Connect(StopTimeCell)
@@ -65856,7 +66007,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65912,7 +66063,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65957,6 +66108,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                 </Connect(StopTimeCell)>
                                               </li>
                                               <li
+                                                className="departure-time"
                                                 key="2"
                                               >
                                                 <Connect(StopTimeCell)
@@ -66011,7 +66163,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -66067,7 +66219,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-bSFUlv gQvqxk"
+                                                            className="sc-iNqMzA iydGFI"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
diff --git a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
index 888e4ad46..402b6785e 100644
--- a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
@@ -211,7 +211,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                         >
                           <Styled(styled.span)>
                             <span
-                              className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
+                              className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
                             >
                               <ArrowLeft>
                                 <StyledIconBase
@@ -267,11 +267,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                 </div>
                 <styled.div>
                   <div
-                    className="sc-hJxDiT dbjOgr"
+                    className="sc-gsxoIA ejOyjx"
                   >
                     <styled.div>
                       <div
-                        className="sc-jlIlqL sdJoA"
+                        className="sc-nFqVA eirZbo"
                       >
                         <h1>
                           <FormattedMessage

From 7543ab9606086c618cdfb0276b18d65903f080ab Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 9 Jul 2024 13:00:13 -0400
Subject: [PATCH 10/21] update otp ui

---
 package.json |  28 ++++-----
 yarn.lock    | 170 ++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 135 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 776150b9f..6f869b442 100644
--- a/package.json
+++ b/package.json
@@ -42,28 +42,28 @@
     "@bugsnag/js": "^7.17.0",
     "@bugsnag/plugin-react": "^7.17.0",
     "@floating-ui/react": "^0.19.2",
-    "@opentripplanner/base-map": "^3.1.0",
+    "@opentripplanner/base-map": "^3.2.0",
     "@opentripplanner/building-blocks": "^1.0.3",
-    "@opentripplanner/core-utils": "^11.4.1",
-    "@opentripplanner/endpoints-overlay": "^2.0.12",
-    "@opentripplanner/from-to-location-picker": "^2.1.12",
+    "@opentripplanner/core-utils": "^11.4.2",
+    "@opentripplanner/endpoints-overlay": "^2.1.1",
+    "@opentripplanner/from-to-location-picker": "^2.1.13",
     "@opentripplanner/geocoder": "^3.0.1",
     "@opentripplanner/humanize-distance": "^1.2.0",
-    "@opentripplanner/icons": "^2.0.10",
-    "@opentripplanner/itinerary-body": "^5.3.0",
-    "@opentripplanner/location-field": "^2.0.18",
+    "@opentripplanner/icons": "^2.0.11",
+    "@opentripplanner/itinerary-body": "^5.3.2",
+    "@opentripplanner/location-field": "^2.0.20",
     "@opentripplanner/location-icon": "^1.4.1",
-    "@opentripplanner/map-popup": "^3.1.0",
+    "@opentripplanner/map-popup": "^3.1.1",
     "@opentripplanner/otp2-tile-overlay": "^1.0.12",
     "@opentripplanner/park-and-ride-overlay": "^2.0.8",
-    "@opentripplanner/printable-itinerary": "^2.0.20",
+    "@opentripplanner/printable-itinerary": "^2.0.21",
     "@opentripplanner/route-viewer-overlay": "^2.0.15",
     "@opentripplanner/stop-viewer-overlay": "^2.0.8",
-    "@opentripplanner/stops-overlay": "^5.2.2",
-    "@opentripplanner/transit-vehicle-overlay": "^4.0.10",
     "@opentripplanner/transitive-overlay": "^3.0.18",
-    "@opentripplanner/trip-details": "^5.0.11",
-    "@opentripplanner/trip-form": "^3.6.0",
+    "@opentripplanner/stops-overlay": "^5.3.0",
+    "@opentripplanner/transit-vehicle-overlay": "^4.0.11",
+    "@opentripplanner/trip-details": "^5.0.12",
+    "@opentripplanner/trip-form": "^3.6.2",
     "@opentripplanner/trip-viewer-overlay": "^2.0.8",
     "@opentripplanner/vehicle-rental-overlay": "^2.1.7",
     "@styled-icons/fa-regular": "^10.34.0",
@@ -140,7 +140,7 @@
     "@graphql-tools/schema": "^10.0.0",
     "@jackwilsdon/craco-use-babelrc": "^1.0.0",
     "@opentripplanner/scripts": "^1.2.0",
-    "@opentripplanner/types": "^6.5.0",
+    "@opentripplanner/types": "^6.5.1",
     "@percy/cli": "^1.20.3",
     "@percy/puppeteer": "^2.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
diff --git a/yarn.lock b/yarn.lock
index dbe7c368e..32c5bae1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2392,12 +2392,22 @@
     maplibre-gl "^2.1.9"
     react-map-gl "^7.0.15"
 
+"@opentripplanner/base-map@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-3.2.0.tgz#db4410319d9614077ec925d739165a998c4a2485"
+  integrity sha512-d/yTKEnXqrw9pXhSvCERT+wLFa077Xr4wEFu4pYB+WYoZFflNxuTuAXXjm268HS/d0kjNndkjSMkxaKk6AjsvA==
+  dependencies:
+    "@opentripplanner/map-popup" "^3.1.0"
+    mapbox-gl "npm:empty-npm-package@1.0.0"
+    maplibre-gl "^2.1.9"
+    react-map-gl "^7.0.15"
+
 "@opentripplanner/building-blocks@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.0.3.tgz#74de32daba0d7fae7d10d5738db6d2f2824da3dd"
   integrity sha512-065pZZTzR+qisgbvJd9swhitMMin1/ooMwuzqqRknsKYK+wOGge3Y3sbgQZATyjR/oH43uF0P2ZhGcbgqgM+YQ==
 
-"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.3.1", "@opentripplanner/core-utils@^11.4.1":
+"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.3.1":
   version "11.4.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.1.tgz#9ccfed82f9a05078bd8e815dd4025af164e37acb"
   integrity sha512-5FZT0ESVctyoO3V0W80QMZuzAc8hEYZxLAyrEARYXNeAHnBNxngGGMj7QMLK4JZgJDESnNietSRnBJd2MBWhOw==
@@ -2415,14 +2425,33 @@
     lodash.isequal "^4.5.0"
     qs "^6.9.1"
 
-"@opentripplanner/endpoints-overlay@^2.0.12":
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-2.0.12.tgz#d320c23777008550f350f614798c4a6300f4dba6"
-  integrity sha512-Vih8PGEJNEjNEdBzbd8eErQJ3e+VgI0J0BreVTsAejOb+7gEf+YBRVaq7NHVPBkt6dcsiQmZrw8IIhpqDkqo2Q==
+"@opentripplanner/core-utils@^11.4.0", "@opentripplanner/core-utils@^11.4.2":
+  version "11.4.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84"
+  integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA==
   dependencies:
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/core-utils" "^11.2.3"
+    "@conveyal/lonlat" "^1.4.1"
+    "@mapbox/polyline" "^1.1.0"
+    "@opentripplanner/geocoder" "^3.0.0"
+    "@styled-icons/foundation" "^10.34.0"
+    "@turf/along" "^6.0.1"
+    chroma-js "^2.4.2"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    graphql "^16.6.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+    qs "^6.9.1"
+
+"@opentripplanner/endpoints-overlay@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-2.1.1.tgz#e7029d95bd13436aacbc6f854c243d1fcf7e8570"
+  integrity sha512-llBGk8eRa8JRJreMp73zWXeCzTzirBNd2N4UtK66vLL9s7YYPFm/yKGLTIKg1MRHrJ+DGpaFkEOi/ajos8YiLA==
+  dependencies:
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/core-utils" "^11.4.0"
     "@opentripplanner/location-icon" "^1.4.1"
+    "@opentripplanner/map-popup" "^3.1.0"
     "@styled-icons/fa-solid" "^10.34.0"
     flat "^5.0.2"
 
@@ -2434,6 +2463,14 @@
     "@opentripplanner/location-icon" "^1.4.1"
     flat "^5.0.2"
 
+"@opentripplanner/from-to-location-picker@^2.1.13":
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-2.1.13.tgz#d13acd582929175c676cd4303a6cdc6e1c289d99"
+  integrity sha512-6/7+wYQuuQhnGvxkDQcvoACdmuwUL1BlPqBIUFwyBpkdJ1VQGZiUSAAZTxXdY1Fv/p5mKR1vRsvZgtSPhcxgcg==
+  dependencies:
+    "@opentripplanner/location-icon" "^1.4.1"
+    flat "^5.0.2"
+
 "@opentripplanner/geocoder@^2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480"
@@ -2445,7 +2482,7 @@
     isomorphic-mapzen-search "^1.6.1"
     lodash.memoize "^4.1.2"
 
-"@opentripplanner/geocoder@^3.0.1":
+"@opentripplanner/geocoder@^3.0.0", "@opentripplanner/geocoder@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.1.tgz#834960bc52f515e1223346a8002fb847674d33bc"
   integrity sha512-+LHTqY8pHmPE39IjVev5T5baa+BohEyvsLwVwFB2bYWzM+m/RgAJ188uBcDzXKdqk5y3dZR9ZODYVMtrvIiKzQ==
@@ -2461,7 +2498,7 @@
   resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.2.0.tgz#71cf5d5d1b756adef15300edbba0995ccd4b35ee"
   integrity sha512-x0QRXMDhypFeazZ6r6vzrdU8vhiV56nZ/WX6zUbxpgp6T9Oclw0gwR2Zdw6DZiiFpSYVNeVNxVzZwsu6NRGjcA==
 
-"@opentripplanner/icons@^2.0.10", "@opentripplanner/icons@^2.0.9":
+"@opentripplanner/icons@^2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-2.0.10.tgz#688e75190ebe772ad45bb852517e93bdde28df74"
   integrity sha512-9X6kV6jDsNnQT4foZU9X530zTN7kjYLtWBjWmeA5EVHth0qZx5T3iFjzqeG4wK+rwZKUMLGS5lAhLIQdaXKZMQ==
@@ -2469,6 +2506,14 @@
     "@opentripplanner/core-utils" "^11.2.3"
     prop-types "^15.7.2"
 
+"@opentripplanner/icons@^2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-2.0.11.tgz#08ac56bee164c988748fb2b94a60e9e932dfbb3f"
+  integrity sha512-VOdp/SGn/bnVIQCdqGrLwqI0EFexw7eIuHIP1yNYGgDZETO2d6f/FUr6suw69Y59/4l6CoZvGZD5jCPi2vz/bA==
+  dependencies:
+    "@opentripplanner/core-utils" "^11.4.0"
+    prop-types "^15.7.2"
+
 "@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0":
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.0.tgz#1a611dc6c49438666e58c34d0f1f88ab6ff48f2d"
@@ -2487,14 +2532,32 @@
     react-resize-detector "^4.2.1"
     string-similarity "^4.0.4"
 
-"@opentripplanner/location-field@^2.0.18":
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.18.tgz#e64c61d73b8858a6f9401cf132c3ec0c39395bab"
-  integrity sha512-Wsk5Rk8nWreQqlAcQLg/4PiIYa9DaYN1oNZzFyoZ5MLaAyN1voZHS6iuO5MYvxWx/3FOMR5pX+kgBa4Pr8CacA==
+"@opentripplanner/itinerary-body@^5.3.2":
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.2.tgz#282c5963de16b165084d46f6e55d5afc3d563c87"
+  integrity sha512-1uatzGTnmlY5YoJFH+u4pznb/6MKUqai1/Rb91Kh4GfNwl8eMPQ3RmwGRWejOJEGtXMIlq7LJ5O8I6Swwc+1RQ==
+  dependencies:
+    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/humanize-distance" "^1.2.0"
+    "@opentripplanner/icons" "^2.0.10"
+    "@opentripplanner/location-icon" "^1.4.1"
+    "@styled-icons/fa-solid" "^10.34.0"
+    "@styled-icons/foundation" "^10.34.0"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    flat "^5.0.2"
+    react-animate-height "^3.0.4"
+    react-resize-detector "^4.2.1"
+    string-similarity "^4.0.4"
+
+"@opentripplanner/location-field@^2.0.20":
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.20.tgz#ade02af802ba9295aa73cabc2351da758fcfeb4d"
+  integrity sha512-sYiemP4v2OmNWRKh2J0soLq9EO53piuJ8I5Du8X6wUfsTIk7yFH+xVLHN1IfA3XPRHy0gE8wEAnWzhxh4Qa+NQ==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^11.3.1"
-    "@opentripplanner/geocoder" "^2.2.2"
+    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/geocoder" "^3.0.0"
     "@opentripplanner/humanize-distance" "^1.2.0"
     "@opentripplanner/location-icon" "^1.4.1"
     "@styled-icons/fa-solid" "^10.34.0"
@@ -2518,6 +2581,15 @@
     "@opentripplanner/from-to-location-picker" "^2.1.12"
     flat "^5.0.2"
 
+"@opentripplanner/map-popup@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.1.1.tgz#54f081162d328cc4bb0e89562f9ea200e29e01a1"
+  integrity sha512-yWBIPuYGw7biaRNIpglQm5+opZ+D5QQgXHLhKnYaCR0eNijjl9cx34lGXdyKPXt26S6MiyJZXL81uc6w6CnQ3A==
+  dependencies:
+    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/from-to-location-picker" "^2.1.12"
+    flat "^5.0.2"
+
 "@opentripplanner/otp2-tile-overlay@^1.0.12":
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/@opentripplanner/otp2-tile-overlay/-/otp2-tile-overlay-1.0.12.tgz#1fc6ea68f47c44ff39fd04c13d946a68ed62d279"
@@ -2533,13 +2605,13 @@
     "@opentripplanner/base-map" "^3.0.16"
     "@opentripplanner/from-to-location-picker" "^2.1.11"
 
-"@opentripplanner/printable-itinerary@^2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-2.0.20.tgz#4554b66fc5021eede2ebe0713d4065a5673fa2cc"
-  integrity sha512-Pcl5LeZxbnB+VsboNEbyU7VGBM2+7imEFJLkvHvxTR8xoQ+OMZUQaml3VIBvOaYcdoa7Gt+/1AEOAR+YzpU2+g==
+"@opentripplanner/printable-itinerary@^2.0.21":
+  version "2.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-2.0.21.tgz#2b85ad6017491bbae682ece53d57e35819b79959"
+  integrity sha512-MWcHWmZRiqygjrwJt6I/LyHin88cjsmgqdxx2lh3oLGMgjrF657sxAbXfXAySqsW1rZ1MtHRuZ7IA2ph93GfMQ==
   dependencies:
-    "@opentripplanner/core-utils" "^11.2.3"
-    "@opentripplanner/itinerary-body" "^5.2.6"
+    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/itinerary-body" "^5.3.0"
 
 "@opentripplanner/route-viewer-overlay@^2.0.15":
   version "2.0.15"
@@ -2570,24 +2642,24 @@
     "@opentripplanner/base-map" "^3.0.16"
     "@opentripplanner/core-utils" "^11.2.3"
 
-"@opentripplanner/stops-overlay@^5.2.2":
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-5.2.2.tgz#163dbc162c134113b5048905aa5cd2aabc47b807"
-  integrity sha512-1jYtHBvITWtE8pl4wXlfJ8X4SsoS3FWDPMVuUo05Rcefn8aGqr/AasaKa/wqsrvL1/vC9i+0ESSiu/BwSP8V2g==
+"@opentripplanner/stops-overlay@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-5.3.0.tgz#1f35927a769a5fac80e40cfdaf85a7275b90cec5"
+  integrity sha512-bQBH5vf/F8n7yL6zhWpiU1XyJOkarcZVLovKYGseJpLs+qnPUd+3MMK9W0cQAMn7iuxAjcDHmSNmeK99kwb3jw==
   dependencies:
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/from-to-location-picker" "^2.1.11"
-    "@opentripplanner/map-popup" "^3.0.2"
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/from-to-location-picker" "^2.1.12"
+    "@opentripplanner/map-popup" "^3.1.0"
     flat "^5.0.2"
 
-"@opentripplanner/transit-vehicle-overlay@^4.0.10":
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transit-vehicle-overlay/-/transit-vehicle-overlay-4.0.10.tgz#a63e86a2dc5108ddf47ba8d8c0c9f5017c65c86a"
-  integrity sha512-j8+KCyeCD7WLQgAIbtzX7ckwqLU1fwKjXCMJ5E5/t75YqNuWB8hAiUonerIanuA20TUinm4sPwSL3dr9OnGNlA==
+"@opentripplanner/transit-vehicle-overlay@^4.0.11":
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transit-vehicle-overlay/-/transit-vehicle-overlay-4.0.11.tgz#3485514b6000612bba32c4610d9a5f692e01cf95"
+  integrity sha512-1xwPqAB/NbBKyv+5wJKaXz7mww3Sznbk2MISbjCecpbYaCrYwcXTVhoXDnrkgAELI1mz739mud6qKr/X77SEEg==
   dependencies:
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/core-utils" "^11.2.3"
-    "@opentripplanner/icons" "^2.0.9"
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/icons" "^2.0.10"
     flat "^5.0.2"
 
 "@opentripplanner/transitive-overlay@^3.0.18":
@@ -2607,23 +2679,23 @@
     "@turf/midpoint" "^6.5.0"
     lodash.isequal "^4.5.0"
 
-"@opentripplanner/trip-details@^5.0.11":
-  version "5.0.11"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-5.0.11.tgz#a672874a042ffcf89bb52a792ea8810545646c9e"
-  integrity sha512-oRu4o2zJxkm494iWvdwDnSqQ1VxZPlUMDp+FoJpC8S+H43RpHiCB6g/eutA2Ytigy/koezO9dpDveI6a6rPtQA==
+"@opentripplanner/trip-details@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-5.0.12.tgz#138d009722569d1cb3b97b552a4cf0a855a828ba"
+  integrity sha512-o+1JNwUYNCb33eQDQLL1aCKf9j88T6yZtDnlrJIysxiYGMsqFtug8+LdYkBJ4SyeO/FqiHk8Q+VLOxTqZgcYUQ==
   dependencies:
-    "@opentripplanner/core-utils" "^11.2.3"
+    "@opentripplanner/core-utils" "^11.4.0"
     "@styled-icons/fa-solid" "^10.34.0"
     flat "^5.0.2"
     react-animate-height "^3.0.4"
 
-"@opentripplanner/trip-form@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.6.0.tgz#e02996e3e21cee951a61522c1c01ea55f978c2b8"
-  integrity sha512-iV3bQkRhcJxvty7BZ+RUN/ylLmH+twUcveQgHj1HUCkPhEOz98m26ykDYXQhOXP68k/y9PtaLlt+Gzsa6p+8xQ==
+"@opentripplanner/trip-form@^3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-3.6.2.tgz#910432d222aafa598e85cce134faffe956ac5c25"
+  integrity sha512-NWD2WtVjn5Iq/B4Verv+LnZIdt5vYcTMkMn+9Yyc5YBPt5hzK2HUdQbAh35ap30gj77KJFbNJ8lLJ3VPn9A8yg==
   dependencies:
     "@floating-ui/react" "^0.19.2"
-    "@opentripplanner/core-utils" "^11.2.3"
+    "@opentripplanner/core-utils" "^11.4.0"
     "@styled-icons/bootstrap" "^10.34.0"
     "@styled-icons/boxicons-regular" "^10.38.0"
     "@styled-icons/fa-regular" "^10.37.0"
@@ -2642,10 +2714,10 @@
     "@opentripplanner/base-map" "^3.0.16"
     "@opentripplanner/core-utils" "^11.2.3"
 
-"@opentripplanner/types@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.0.tgz#d8cca355bf30f0984283faa793113ad6c0dba38d"
-  integrity sha512-FllEyE+1WQ2GOSKXQOuzrk+OPcJEqr4+zacsHQLB9WVyfm5D/BPHR1/OjfuVngrwLTK5bKP8VlDRS1ba/R8rtg==
+"@opentripplanner/types@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.1.tgz#c19c73e051e516e187e79202de276f6ed3bbc59e"
+  integrity sha512-5S4otkjzlNLqcbDeMXy3Xi6tcPQgQRoyQZX+uvEdPOTzIERr7wJoltyQCBwi49GX99F+jqyRbd08TJ6SnLapbA==
 
 "@opentripplanner/vehicle-rental-overlay@^2.1.7":
   version "2.1.7"

From 9def22bc21d0900afc57b03f9669697664c6edd1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Mon, 29 Jul 2024 11:57:58 +0100
Subject: [PATCH 11/21] test: update snapshots

---
 .../viewers/__snapshots__/nearby-view.js.snap | 834 +++++++++---------
 .../stop-schedule-viewer.ts.snap              |   6 +-
 2 files changed, 420 insertions(+), 420 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index 6ab8ca118..aea0b6124 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -45,7 +45,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-ctaXho PpeYk nearby-view base-color-bg"
+            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -84,7 +84,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-dacGJm iCwywb base-color-bg"
+                className="sc-ehsPLh bsdzfb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4078,7 +4078,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-ctaXho PpeYk nearby-view base-color-bg"
+            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4117,7 +4117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-dacGJm iCwywb base-color-bg"
+                className="sc-ehsPLh bsdzfb base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4222,15 +4222,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -4265,7 +4265,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4311,7 +4311,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4330,7 +4330,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4654,15 +4654,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -4697,7 +4697,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -4743,7 +4743,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4762,7 +4762,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5086,15 +5086,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -5129,7 +5129,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -5175,7 +5175,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5194,7 +5194,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -7708,7 +7708,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10018,11 +10018,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 2
@@ -10034,7 +10034,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10053,7 +10053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -10110,7 +10110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -11485,7 +11485,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -11662,7 +11662,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -11710,7 +11710,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -11739,7 +11739,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -11763,7 +11763,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -11875,7 +11875,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -11887,10 +11887,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -11901,7 +11901,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -11913,7 +11913,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -11936,7 +11936,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12036,7 +12036,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12048,10 +12048,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12062,7 +12062,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12074,7 +12074,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12097,7 +12097,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12197,7 +12197,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12253,7 +12253,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12478,7 +12478,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12526,7 +12526,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12555,7 +12555,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12579,7 +12579,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -12691,7 +12691,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12703,10 +12703,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12717,7 +12717,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12729,7 +12729,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12752,7 +12752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -12852,7 +12852,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -12908,7 +12908,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13008,7 +13008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13064,7 +13064,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13224,7 +13224,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13272,7 +13272,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13301,7 +13301,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13325,7 +13325,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -13437,7 +13437,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13449,10 +13449,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13463,7 +13463,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13475,7 +13475,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13498,7 +13498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13598,7 +13598,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13654,7 +13654,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -13754,7 +13754,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -13810,7 +13810,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -15350,7 +15350,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -16856,11 +16856,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt
@@ -16872,7 +16872,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -16891,7 +16891,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -16948,7 +16948,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -17921,7 +17921,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -18033,7 +18033,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18081,7 +18081,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz dfvczx"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18110,7 +18110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18134,7 +18134,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18246,7 +18246,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18302,7 +18302,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18402,7 +18402,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18458,7 +18458,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18558,7 +18558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18614,7 +18614,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -18722,7 +18722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18770,7 +18770,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz dfvczx"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18799,7 +18799,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18823,7 +18823,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -18935,7 +18935,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -18991,7 +18991,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19216,7 +19216,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19264,7 +19264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz dfvczx"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19293,7 +19293,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19317,7 +19317,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -19429,7 +19429,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19485,7 +19485,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19585,7 +19585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19641,7 +19641,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19741,7 +19741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -19797,7 +19797,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="saturday"
@@ -19951,15 +19951,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -19994,7 +19994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20040,7 +20040,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20059,7 +20059,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20383,15 +20383,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -20426,7 +20426,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20472,7 +20472,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20491,7 +20491,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20815,15 +20815,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -20858,7 +20858,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -20904,7 +20904,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20923,7 +20923,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -23745,7 +23745,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -26363,11 +26363,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 1
@@ -26379,7 +26379,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -26398,7 +26398,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -26455,7 +26455,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -27984,7 +27984,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -28161,7 +28161,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28209,7 +28209,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -28238,7 +28238,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -28262,7 +28262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -28374,7 +28374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28386,10 +28386,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28400,7 +28400,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28412,7 +28412,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28435,7 +28435,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28535,7 +28535,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28547,10 +28547,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28561,7 +28561,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28573,7 +28573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28596,7 +28596,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28696,7 +28696,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -28752,7 +28752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -28990,7 +28990,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29038,7 +29038,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29067,7 +29067,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29091,7 +29091,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29203,7 +29203,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29215,10 +29215,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29229,7 +29229,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29241,7 +29241,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29264,7 +29264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29364,7 +29364,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29420,7 +29420,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29520,7 +29520,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -29532,10 +29532,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29546,7 +29546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29558,7 +29558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29581,7 +29581,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -29741,7 +29741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29789,7 +29789,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29818,7 +29818,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29842,7 +29842,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -29954,7 +29954,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30010,7 +30010,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30110,7 +30110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30166,7 +30166,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30266,7 +30266,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30322,7 +30322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30430,7 +30430,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30478,7 +30478,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30507,7 +30507,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30531,7 +30531,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -30643,7 +30643,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -30699,7 +30699,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -30853,15 +30853,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -30896,7 +30896,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -30942,7 +30942,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -30961,7 +30961,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31285,15 +31285,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -31328,7 +31328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31374,7 +31374,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31393,7 +31393,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31717,15 +31717,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -31760,7 +31760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -31806,7 +31806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31825,7 +31825,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32149,15 +32149,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -32192,7 +32192,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32238,7 +32238,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32257,7 +32257,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32581,15 +32581,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -32624,7 +32624,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -32670,7 +32670,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32689,7 +32689,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34399,7 +34399,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -35905,11 +35905,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station Bay 5 - Bay 5
@@ -35921,7 +35921,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -35940,7 +35940,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -35997,7 +35997,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -36970,7 +36970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -37082,7 +37082,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37130,7 +37130,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37159,7 +37159,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37183,7 +37183,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -37295,7 +37295,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37307,10 +37307,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -37321,7 +37321,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -37333,7 +37333,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -37356,7 +37356,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37456,7 +37456,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37512,7 +37512,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37612,7 +37612,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -37668,7 +37668,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -37893,7 +37893,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37941,7 +37941,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37970,7 +37970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37994,7 +37994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -38106,7 +38106,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38162,7 +38162,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38262,7 +38262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38318,7 +38318,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38418,7 +38418,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38474,7 +38474,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -38582,7 +38582,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38630,7 +38630,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -38659,7 +38659,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38683,7 +38683,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -38795,7 +38795,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -38851,7 +38851,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -39005,15 +39005,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -39048,7 +39048,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -39094,7 +39094,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -39113,7 +39113,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -41523,7 +41523,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -43729,11 +43729,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt
@@ -43745,7 +43745,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -43764,7 +43764,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -43821,7 +43821,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -45144,7 +45144,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -45412,7 +45412,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -45460,7 +45460,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz dfvczx"
+                                                    className="sc-bTRMho cyqbfo"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -45489,7 +45489,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -45513,7 +45513,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -45625,7 +45625,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45637,10 +45637,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45651,7 +45651,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45663,7 +45663,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45686,7 +45686,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45786,7 +45786,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45798,10 +45798,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45812,7 +45812,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45824,7 +45824,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45847,7 +45847,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -45947,7 +45947,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -45959,10 +45959,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45973,7 +45973,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45985,7 +45985,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -46008,7 +46008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -48660,7 +48660,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -51278,11 +51278,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 3
@@ -51294,7 +51294,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -51313,7 +51313,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -51370,7 +51370,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -52899,7 +52899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -53011,7 +53011,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53059,7 +53059,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz fcRZtF"
+                                                    className="sc-bTRMho jinUgQ"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -53088,7 +53088,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53112,7 +53112,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53224,7 +53224,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53280,7 +53280,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53380,7 +53380,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53436,7 +53436,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53536,7 +53536,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53592,7 +53592,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -53752,7 +53752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53800,7 +53800,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -53829,7 +53829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53853,7 +53853,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -53965,7 +53965,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -53977,10 +53977,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -53991,7 +53991,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -54003,7 +54003,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -54026,7 +54026,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54126,7 +54126,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54182,7 +54182,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54282,7 +54282,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54338,7 +54338,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54498,7 +54498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -54546,7 +54546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz fcRZtF"
+                                                    className="sc-bTRMho jinUgQ"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -54575,7 +54575,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -54599,7 +54599,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -54711,7 +54711,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54767,7 +54767,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -54867,7 +54867,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -54923,7 +54923,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55023,7 +55023,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55079,7 +55079,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55304,7 +55304,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55352,7 +55352,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55381,7 +55381,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55405,7 +55405,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -55517,7 +55517,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55573,7 +55573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55673,7 +55673,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55729,7 +55729,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -55829,7 +55829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -55885,7 +55885,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56045,7 +56045,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56093,7 +56093,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -56122,7 +56122,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56146,7 +56146,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56258,7 +56258,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56314,7 +56314,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56414,7 +56414,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56470,7 +56470,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56570,7 +56570,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -56626,7 +56626,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -56760,7 +56760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56808,7 +56808,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -56837,7 +56837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56861,7 +56861,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -56973,7 +56973,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57029,7 +57029,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57129,7 +57129,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57185,7 +57185,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57285,7 +57285,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -57341,7 +57341,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -57495,15 +57495,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <styled.div>
                               <div
-                                className="sc-jQbJRc jPoPQ"
+                                className="sc-iuAqRD gAoDco"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-fvhFOF eEJTMU"
+                                    className="sc-DJgqy jIxkFu"
                                   >
                                     <IconWithText
                                       icon={
@@ -57538,7 +57538,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       >
                                         <Styled(styled.span)>
                                           <span
-                                            className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                            className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                           >
                                             <StationIcon
                                               companyLabel=""
@@ -57584,7 +57584,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-GTVdH hvoxCk"
+                                      className="sc-gUUBao eMZwka"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -57603,7 +57603,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-gsxoIA fEzsen"
+                                className="sc-hJxDiT gGpYuf"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -60117,7 +60117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-jUEmfL eaQNeE"
+                            className="sc-hFXoIY cxosZU"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -62427,11 +62427,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-jQbJRc jPoPQ"
+                                    className="sc-iuAqRD gAoDco"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-fvhFOF eEJTMU"
+                                        className="sc-DJgqy jIxkFu"
                                       >
                                         <span>
                                           NE 65th St & 14th Ave NE
@@ -62443,7 +62443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-GTVdH hvoxCk"
+                                          className="sc-gUUBao eMZwka"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -62462,7 +62462,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-gsxoIA fEzsen"
+                                    className="sc-hJxDiT gGpYuf"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -62519,7 +62519,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             >
                                               <Styled(styled.span)>
                                                 <span
-                                                  className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                  className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                 >
                                                   <Calendar>
                                                     <StyledIconBase
@@ -63894,7 +63894,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-eGCaLh dpUXHF"
+                                  className="sc-cuWdqJ jWwXYb"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -64071,7 +64071,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64119,7 +64119,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64148,7 +64148,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64172,7 +64172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -64284,7 +64284,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64296,10 +64296,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64310,7 +64310,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64322,7 +64322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64345,7 +64345,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64445,7 +64445,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64457,10 +64457,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64471,7 +64471,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64483,7 +64483,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64506,7 +64506,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64606,7 +64606,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -64662,7 +64662,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -64887,7 +64887,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64935,7 +64935,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64964,7 +64964,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64988,7 +64988,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -65100,7 +65100,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65112,10 +65112,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -65126,7 +65126,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -65138,7 +65138,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65161,7 +65161,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65261,7 +65261,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65317,7 +65317,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65417,7 +65417,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65473,7 +65473,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -65633,7 +65633,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-biBsmb doErGK pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65681,7 +65681,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-dFJtaz kcciLh"
+                                                    className="sc-bTRMho hKYjYQ"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -65710,7 +65710,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-eHfRjS bxdpnb departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65734,7 +65734,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   >
                                                     <Styled(styled.span)>
                                                       <span
-                                                        className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                        className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                       >
                                                         <Calendar>
                                                           <StyledIconBase
@@ -65846,7 +65846,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.realtime"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -65858,10 +65858,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-hzMMVR dLEyZp"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-hzMMVR dLEyZp"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -65872,7 +65872,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -65884,7 +65884,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-hzMMVR dLEyZp"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65907,7 +65907,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -66007,7 +66007,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -66063,7 +66063,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
@@ -66163,7 +66163,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         title="components.StopTimeCell.scheduled"
                                                       >
                                                         <span
-                                                          className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                                                          className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                                                           style={
                                                             Object {
                                                               "fontSize": "0.6em",
@@ -66219,7 +66219,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                       >
                                                         <styled.span>
                                                           <span
-                                                            className="sc-iNqMzA iydGFI"
+                                                            className="sc-bSFUlv gQvqxk"
                                                           >
                                                             <FormattedDayOfWeek
                                                               day="friday"
diff --git a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
index 402b6785e..888e4ad46 100644
--- a/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
+++ b/__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap
@@ -211,7 +211,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                         >
                           <Styled(styled.span)>
                             <span
-                              className="sc-gTgzoy sc-laRQdt hGldgl hFELdq"
+                              className="sc-jifHHV sc-hkwmXC frJUIW gWGcte"
                             >
                               <ArrowLeft>
                                 <StyledIconBase
@@ -267,11 +267,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                 </div>
                 <styled.div>
                   <div
-                    className="sc-gsxoIA ejOyjx"
+                    className="sc-hJxDiT dbjOgr"
                   >
                     <styled.div>
                       <div
-                        className="sc-nFqVA eirZbo"
+                        className="sc-jlIlqL sdJoA"
                       >
                         <h1>
                           <FormattedMessage

From 07d574853db3e20e271bb9bdc9ea828b3552fceb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 30 Jul 2024 10:29:32 +0100
Subject: [PATCH 12/21] allow moving zoom buttons

---
 example-config.yml                 | 1 +
 lib/components/map/default-map.tsx | 7 +++++--
 lib/util/config-types.ts           | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 77879a11f..77caef21f 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -116,6 +116,7 @@ map:
   initLat: 45.52
   initLon: -122.682
   # autoFlyOnTripFormUpdate: false
+  # navigationControlPosition: "bottom-right"
   baseLayers:
     - name: Streets
       # These tiles are free to use, but not in production
diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
index a6388d998..005462418 100644
--- a/lib/components/map/default-map.tsx
+++ b/lib/components/map/default-map.tsx
@@ -269,7 +269,8 @@ class DefaultMap extends Component {
     } = this.props
     const { getCustomMapOverlays, getTransitiveRouteLabel, ModeIcon } =
       this.context
-    const { baseLayers, maxZoom, overlays } = mapConfig || {}
+    const { baseLayers, maxZoom, navigationControlPosition, overlays } =
+      mapConfig || {}
     const { lat, lon, zoom } = this.state
     const vectorTilesEndpoint = `${assembleBasePath(config)}${
       config.api?.path
@@ -411,7 +412,9 @@ class DefaultMap extends Component {
           {/* If set, custom overlays are shown if no active itinerary is shown or pending. */}
           {typeof getCustomMapOverlays === 'function' &&
             getCustomMapOverlays(!itinerary && !pending)}
-          <NavigationControl position="bottom-right" />
+          <NavigationControl
+            position={navigationControlPosition || 'bottom-right'}
+          />
         </BaseMap>
       </MapContainer>
     )
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 108fa4b38..3995d0ba8 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -228,6 +228,7 @@ export interface MapConfig {
   initLon?: number
   initZoom?: number
   maxZoom?: number
+  navigationControlPosition?: string
   overlays?: SupportedOverlays[]
   views?: MapViewConfig[]
 }

From 8307e8b6cccbc229c965ecc83c17bc839acdeaee Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 30 Jul 2024 10:49:40 +0100
Subject: [PATCH 13/21] complete `showInlineItinerarySummary`

---
 .../narrative/metro/attribute-utils.tsx       |  7 ++++---
 .../narrative/metro/metro-itinerary.tsx       | 21 +++++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/lib/components/narrative/metro/attribute-utils.tsx b/lib/components/narrative/metro/attribute-utils.tsx
index 3972b120a..8f6ecd687 100644
--- a/lib/components/narrative/metro/attribute-utils.tsx
+++ b/lib/components/narrative/metro/attribute-utils.tsx
@@ -3,11 +3,12 @@ import { Itinerary, Leg } from '@opentripplanner/types'
 import coreUtils from '@opentripplanner/core-utils'
 import React from 'react'
 
+export const getFirstTransitLeg = (itinerary: Itinerary): Leg | undefined =>
+  itinerary.legs?.find((leg: Leg) => leg?.from?.vertexType === 'TRANSIT')
+
 export const getFirstTransitLegStop = (
   itinerary: Itinerary
-): string | undefined =>
-  itinerary.legs?.find((leg: Leg) => leg?.from?.vertexType === 'TRANSIT')?.from
-    ?.name
+): string | undefined => getFirstTransitLeg(itinerary)?.from?.name
 
 export const getFlexAttributes = (
   itinerary: Itinerary
diff --git a/lib/components/narrative/metro/metro-itinerary.tsx b/lib/components/narrative/metro/metro-itinerary.tsx
index 158f619f3..2c066ad56 100644
--- a/lib/components/narrative/metro/metro-itinerary.tsx
+++ b/lib/components/narrative/metro/metro-itinerary.tsx
@@ -28,7 +28,12 @@ import ItineraryBody from '../line-itin/connected-itinerary-body'
 import NarrativeItinerary from '../narrative-itinerary'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
 
-import { getFirstTransitLegStop, getFlexAttributes } from './attribute-utils'
+import {
+  getFirstTransitLeg,
+  getFirstTransitLegStop,
+  getFlexAttributes
+} from './attribute-utils'
+import DefaultRouteRenderer from './default-route-renderer'
 import DepartureTimesList, {
   SetActiveItineraryHandler
 } from './departure-times-list'
@@ -257,7 +262,8 @@ class MetroItinerary extends NarrativeItinerary {
       showLegDurations,
       showRealtimeAnnotation
     } = this.props
-    const { ItineraryPreviewSupplement, SvgIcon } = this.context
+    const { ItineraryPreviewSupplement, RouteRenderer, SvgIcon } = this.context
+    const Route = RouteRenderer || DefaultRouteRenderer
 
     const { isCallAhead, isContinuousDropoff, isFlexItinerary, phone } =
       getFlexAttributes(itinerary)
@@ -411,6 +417,17 @@ class MetroItinerary extends NarrativeItinerary {
                   </SecondaryInfo>
                 </ItineraryDetails>
                 <DepartureTimes>
+                  {showInlineItinerarySummary && getFirstTransitLeg(itinerary) && (
+                    <Route
+                      leg={getFirstTransitLeg(itinerary)}
+                      style={{
+                        margin: 0,
+                        marginLeft: -8,
+                        marginRight: -2,
+                        transform: 'scale(50%)'
+                      }}
+                    />
+                  )}
                   <span className="timeInfo">
                     {arrivesAt ? (
                       <FormattedMessage id="components.MetroUI.arriveAt" />

From 34e2cf5f352b97956c1f2a09be772904fd4ac1c9 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 30 Jul 2024 10:56:35 +0100
Subject: [PATCH 14/21] add second row of inline itinerary summary

---
 lib/components/narrative/metro/metro-itinerary.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/lib/components/narrative/metro/metro-itinerary.tsx b/lib/components/narrative/metro/metro-itinerary.tsx
index 2c066ad56..716567c5d 100644
--- a/lib/components/narrative/metro/metro-itinerary.tsx
+++ b/lib/components/narrative/metro/metro-itinerary.tsx
@@ -4,6 +4,7 @@ import { FareProductSelector, Itinerary, Leg } from '@opentripplanner/types'
 import {
   FormattedMessage,
   FormattedNumber,
+  FormattedTime,
   injectIntl,
   IntlShape
 } from 'react-intl'
@@ -453,6 +454,15 @@ class MetroItinerary extends NarrativeItinerary {
                       />
                     </>
                   )}{' '}
+                  {expanded && showInlineItinerarySummary && (
+                    <div style={{ color: '#111' }}>
+                      <FormattedMessage id="components.TripSummary.leaveAt" />
+                      <FormattedTime value={itinerary.startTime} />
+                      <span style={{ marginLeft: '2ch' }}> </span>
+                      <FormattedMessage id="components.TripSummary.arriveAt" />
+                      <FormattedTime value={itinerary.endTime} />
+                    </div>
+                  )}
                 </DepartureTimes>
               </ItineraryGrid>
             )}

From a9ae10235fed68316e8dee84922a56c6854702e1 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 31 Jul 2024 17:29:50 +0100
Subject: [PATCH 15/21] fix stop with no operator logo

---
 lib/components/viewers/nearby/stop-card-header.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/components/viewers/nearby/stop-card-header.tsx b/lib/components/viewers/nearby/stop-card-header.tsx
index 6eced1b1c..045616e60 100644
--- a/lib/components/viewers/nearby/stop-card-header.tsx
+++ b/lib/components/viewers/nearby/stop-card-header.tsx
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { MapPin } from '@styled-icons/fa-solid'
 import { Search } from '@styled-icons/fa-solid/Search'
 import { TransitOperator } from '@opentripplanner/types'
 import React, { ComponentType } from 'react'
@@ -54,7 +55,10 @@ const Operator = ({ operator }: { operator?: TransitOperator }) => {
     ) : (
       // If operator exists but logo is missing,
       // we still need to announce the operator name to screen readers.
-      <InvisibleA11yLabel>{operatorLogoAriaLabel}</InvisibleA11yLabel>
+      <>
+        <MapPin />
+        <InvisibleA11yLabel>{operatorLogoAriaLabel}</InvisibleA11yLabel>
+      </>
     )
   }
 }

From 9aa354530d8caecc21b7c8c92215dacc34c88d2a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 7 Aug 2024 15:17:40 +0200
Subject: [PATCH 16/21] default for transit stations string

---
 i18n/en-US.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 38b859df4..bc9e6e513 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -273,6 +273,7 @@ components:
     park-and-ride: Park & Ride Locations
     satellite: Satellite
     shared-vehicles: Shared Vehicles
+    stations: Transit Stations
     stops: Transit Stops
     streets: Streets
   MapillaryFrame:

From 7cf344e6cb5fc097d94677b1b3db4b708a7a0343 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 8 Aug 2024 10:32:43 +0200
Subject: [PATCH 17/21] update otp-ui

---
 package.json | 10 ++++----
 yarn.lock    | 72 +++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 7e4c69365..85eea797f 100644
--- a/package.json
+++ b/package.json
@@ -44,14 +44,14 @@
     "@floating-ui/react": "^0.19.2",
     "@opentripplanner/base-map": "^3.2.0",
     "@opentripplanner/building-blocks": "^1.1.0",
-    "@opentripplanner/core-utils": "^11.4.2",
+    "@opentripplanner/core-utils": "^11.4.3",
     "@opentripplanner/endpoints-overlay": "^2.1.1",
     "@opentripplanner/from-to-location-picker": "^2.1.13",
     "@opentripplanner/geocoder": "^3.0.1",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "^2.0.11",
-    "@opentripplanner/itinerary-body": "^5.3.3",
-    "@opentripplanner/location-field": "^2.0.20",
+    "@opentripplanner/itinerary-body": "^5.3.5",
+    "@opentripplanner/location-field": "^2.0.22",
     "@opentripplanner/location-icon": "^1.4.1",
     "@opentripplanner/map-popup": "^3.1.1",
     "@opentripplanner/otp2-tile-overlay": "^1.0.12",
@@ -61,7 +61,7 @@
     "@opentripplanner/stop-viewer-overlay": "^2.0.8",
     "@opentripplanner/stops-overlay": "^5.3.0",
     "@opentripplanner/transit-vehicle-overlay": "^4.0.11",
-    "@opentripplanner/transitive-overlay": "^3.0.18",
+    "@opentripplanner/transitive-overlay": "^3.0.20",
     "@opentripplanner/trip-details": "^5.0.13",
     "@opentripplanner/trip-form": "^3.6.2",
     "@opentripplanner/trip-viewer-overlay": "^2.0.8",
@@ -140,7 +140,7 @@
     "@graphql-tools/schema": "^10.0.0",
     "@jackwilsdon/craco-use-babelrc": "^1.0.0",
     "@opentripplanner/scripts": "^1.2.0",
-    "@opentripplanner/types": "^6.5.1",
+    "@opentripplanner/types": "^6.5.2",
     "@percy/cli": "^1.20.3",
     "@percy/puppeteer": "^2.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 1c0bb7eb6..ffb1c1c84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2398,7 +2398,7 @@
   resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.1.0.tgz#ef9fe862ce0a3e92c9a6c2c2db749a9a02deebd5"
   integrity sha512-nx7pU1zIZzJcSkCFYyZ7gt+jd0gXj7bjx8rXn1msgF5uLWmtN/70dsmYNEApeA7haC076KOO3B/Jh44YfXG95g==
 
-"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0", "@opentripplanner/core-utils@^11.4.2":
+"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0":
   version "11.4.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84"
   integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA==
@@ -2416,6 +2416,24 @@
     lodash.isequal "^4.5.0"
     qs "^6.9.1"
 
+"@opentripplanner/core-utils@^11.4.1", "@opentripplanner/core-utils@^11.4.3":
+  version "11.4.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.3.tgz#4655f9a3bef1977e53abd81a4a0eae966f977c60"
+  integrity sha512-GbvchRsLfEi9JygUx6ypU+Iqv2hELseC53yQyQ/XdnB1kcHzN71BtBbz+qpD5/jk8IuM92j1taRnGMeu5ni6yA==
+  dependencies:
+    "@conveyal/lonlat" "^1.4.1"
+    "@mapbox/polyline" "^1.1.0"
+    "@opentripplanner/geocoder" "^3.0.0"
+    "@styled-icons/foundation" "^10.34.0"
+    "@turf/along" "^6.0.1"
+    chroma-js "^2.4.2"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    graphql "^16.6.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+    qs "^6.9.1"
+
 "@opentripplanner/endpoints-overlay@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-2.1.1.tgz#e7029d95bd13436aacbc6f854c243d1fcf7e8570"
@@ -2460,7 +2478,7 @@
     "@opentripplanner/core-utils" "^11.4.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0", "@opentripplanner/itinerary-body@^5.3.3":
+"@opentripplanner/itinerary-body@^5.3.0":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.3.tgz#5202060ccd1a38fd6ed823331a00233a15305957"
   integrity sha512-3G0szbSObrQh3uliQI6Hx62iCqqpxvrxGo7X69r28S7s8fexoI1B/3B4lRC0D14BUUPaOisE5Rc2N10SjI6MtQ==
@@ -2478,13 +2496,31 @@
     react-resize-detector "^4.2.1"
     string-similarity "^4.0.4"
 
-"@opentripplanner/location-field@^2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.20.tgz#ade02af802ba9295aa73cabc2351da758fcfeb4d"
-  integrity sha512-sYiemP4v2OmNWRKh2J0soLq9EO53piuJ8I5Du8X6wUfsTIk7yFH+xVLHN1IfA3XPRHy0gE8wEAnWzhxh4Qa+NQ==
+"@opentripplanner/itinerary-body@^5.3.5":
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.5.tgz#e31ea005f374acaf9050653d5e77464d70522fa4"
+  integrity sha512-Ku/KX+G1wGhNqFUTqjXLGz5cYkujEg2fdnpOhyoKayidQbux+CbX0BkpVBR7DBMkVJsN7wWUWVirfbYFBCCSdA==
+  dependencies:
+    "@opentripplanner/core-utils" "^11.4.1"
+    "@opentripplanner/humanize-distance" "^1.2.0"
+    "@opentripplanner/icons" "^2.0.10"
+    "@opentripplanner/location-icon" "^1.4.1"
+    "@styled-icons/fa-solid" "^10.34.0"
+    "@styled-icons/foundation" "^10.34.0"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    flat "^5.0.2"
+    react-animate-height "^3.0.4"
+    react-resize-detector "^4.2.1"
+    string-similarity "^4.0.4"
+
+"@opentripplanner/location-field@^2.0.22":
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-2.0.22.tgz#9ed68dee8660223d4c25ab78a19baf8cfe7d7ec2"
+  integrity sha512-OiowT7EJ3UWGQzseaN9oCW1BcsdA4XawQCF/AhTmpT3CUfG7SmzHe6kMcyGSKEqTRiNiJ5hBoTvR49gHdrUToQ==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/core-utils" "^11.4.1"
     "@opentripplanner/geocoder" "^3.0.0"
     "@opentripplanner/humanize-distance" "^1.2.0"
     "@opentripplanner/location-icon" "^1.4.1"
@@ -2580,15 +2616,15 @@
     "@opentripplanner/icons" "^2.0.10"
     flat "^5.0.2"
 
-"@opentripplanner/transitive-overlay@^3.0.18":
-  version "3.0.18"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.18.tgz#c225564355125a0978061704fa4de3e899902869"
-  integrity sha512-zOcxhNszDg/87flr3SZ9J53YA5L0P+YFHQc/so4ceuaVXfkCkuaE6WvubG0FFM7Dj7JE+vqbjqz5bEYI6Xj8qg==
+"@opentripplanner/transitive-overlay@^3.0.20":
+  version "3.0.20"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.20.tgz#ff794938bdd4a051d52a78b874fd109629740bc9"
+  integrity sha512-3S8LNTPhipGWLDxP3FSoVXc8ob0K8XsKLMi+NWEl2S8nxQoHAHIWZHh6uIHwOLglQNKuseyhOy9kvIT4QJJPCA==
   dependencies:
     "@mapbox/polyline" "^1.1.1"
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/core-utils" "^11.2.3"
-    "@opentripplanner/itinerary-body" "^5.2.6"
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/core-utils" "^11.4.1"
+    "@opentripplanner/itinerary-body" "^5.3.0"
     "@turf/bbox" "^6.5.0"
     "@turf/bearing" "^6.5.0"
     "@turf/destination" "^6.5.0"
@@ -2632,10 +2668,10 @@
     "@opentripplanner/base-map" "^3.0.16"
     "@opentripplanner/core-utils" "^11.2.3"
 
-"@opentripplanner/types@^6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.1.tgz#c19c73e051e516e187e79202de276f6ed3bbc59e"
-  integrity sha512-5S4otkjzlNLqcbDeMXy3Xi6tcPQgQRoyQZX+uvEdPOTzIERr7wJoltyQCBwi49GX99F+jqyRbd08TJ6SnLapbA==
+"@opentripplanner/types@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-6.5.2.tgz#1373d738479568d880a3b13670b0ec53a1a75bd5"
+  integrity sha512-2qDcKOrsLoXdwjRAdi4xcdDUsZGTnwBM+vfEf8TTuuWSnA+WYav3ldlMB4sugxIdLaVKXlOfe3F5lCEh9jAHWA==
 
 "@opentripplanner/vehicle-rental-overlay@^2.1.7":
   version "2.1.7"

From 29886a06cdcba0aba9d4b7c4defe38f13c28cd32 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 8 Aug 2024 10:32:57 +0200
Subject: [PATCH 18/21] add `formatDuration` to itin-body input

---
 lib/components/narrative/line-itin/connected-itinerary-body.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 7f4b65851..3a42c538c 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -19,6 +19,7 @@ import styled from 'styled-components'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
 import { ComponentContext } from '../../../util/contexts'
+import { formatDuration } from '../../../components/util/formatted-duration'
 import { MainPanelContent } from '../../../actions/ui-constants'
 import { setLegDiagram, setMapillaryId } from '../../../actions/map'
 import { setMainPanelContent, setViewedTrip } from '../../../actions/ui'
@@ -115,6 +116,7 @@ class ConnectedItineraryBody extends Component {
       }
     }
 
+    config.formatDuration = formatDuration
     return (
       <ItineraryBodyContainer>
         <StyledItineraryBody

From 82e8964dbd0e08a0f48d66dcf0979b4d49d4750d Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 15 Aug 2024 07:52:42 -0400
Subject: [PATCH 19/21] make i18n string checker happy

---
 lib/components/map/default-map.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
index 005462418..027462f3b 100644
--- a/lib/components/map/default-map.tsx
+++ b/lib/components/map/default-map.tsx
@@ -118,6 +118,8 @@ function getLayerName(overlay, config, intl) {
       return intl.formatMessage({ id: 'components.MapLayers.park-and-ride' })
     case 'stops':
       return intl.formatMessage({ id: 'components.MapLayers.stops' })
+    case 'stations':
+      return intl.formatMessage({ id: 'components.MapLayers.stations' })
     case 'rentalVehicles':
       if (overlay.network)
         return getCompanyNames([overlay.network], config, intl)

From bb8fd019b49eb2c6f713e72fca9eb8a9f3102902 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 15 Aug 2024 07:55:26 -0400
Subject: [PATCH 20/21] add missing fr (INCOMPLETE)

---
 i18n/fr.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/i18n/fr.yml b/i18n/fr.yml
index 99a1985f2..4ec02b1e4 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -290,6 +290,7 @@ components:
     park-and-ride: Parcs relais
     satellite: Satellite
     shared-vehicles: Véhicules en partage
+    stations: Arrêts et stations
     stops: Arrêts et stations
     streets: Plan des rues
   MapillaryFrame:

From db199f3b6799a0c764760ca5db3b645141d17d9f Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 15 Aug 2024 13:16:07 -0400
Subject: [PATCH 21/21] fix otp-ui deps

---
 .../viewers/__snapshots__/nearby-view.js.snap | 276 +++---------------
 package.json                                  |   2 +-
 yarn.lock                                     |  52 ++--
 3 files changed, 73 insertions(+), 257 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index b3ded1369..b20164dd6 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -11662,11 +11662,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -11743,11 +11739,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12486,11 +12478,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12567,11 +12555,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13240,11 +13224,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13321,11 +13301,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18057,11 +18033,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18138,11 +18110,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18754,11 +18722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18835,11 +18799,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19256,11 +19216,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19337,11 +19293,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -28209,11 +28161,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28290,11 +28238,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29046,11 +28990,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29127,11 +29067,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29805,11 +29741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29886,11 +29818,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30502,11 +30430,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30583,11 +30507,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37162,11 +37082,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37243,11 +37159,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37981,11 +37893,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38062,11 +37970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38678,11 +38582,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38759,11 +38659,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -45516,11 +45412,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -45597,11 +45489,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53123,11 +53011,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53204,11 +53088,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53872,11 +53752,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53953,11 +53829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -54626,11 +54498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -54707,11 +54575,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55440,11 +55304,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55521,11 +55381,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56189,11 +56045,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56270,11 +56122,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56912,11 +56760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56993,11 +56837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64231,11 +64071,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64312,11 +64148,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65055,11 +64887,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65136,11 +64964,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65809,11 +65633,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-<<<<<<< HEAD
-                                        className="sc-clhTte ctsdph pattern-row-item"
-=======
-                                        className="sc-lgqlnP fJJsyj"
->>>>>>> dev
+                                        className="sc-lgqlnP fJJsyj pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65890,11 +65710,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-<<<<<<< HEAD
-                                              className="sc-kJFuxL eQoNJh departure-times"
-=======
-                                              className="sc-huZMQ crhfPk"
->>>>>>> dev
+                                              className="sc-huZMQ crhfPk departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
diff --git a/package.json b/package.json
index 85eea797f..109ae8d1f 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@opentripplanner/stop-viewer-overlay": "^2.0.8",
     "@opentripplanner/stops-overlay": "^5.3.0",
     "@opentripplanner/transit-vehicle-overlay": "^4.0.11",
-    "@opentripplanner/transitive-overlay": "^3.0.20",
+    "@opentripplanner/transitive-overlay": "3.0.15",
     "@opentripplanner/trip-details": "^5.0.13",
     "@opentripplanner/trip-form": "^3.6.2",
     "@opentripplanner/trip-viewer-overlay": "^2.0.8",
diff --git a/yarn.lock b/yarn.lock
index ffb1c1c84..652b8cc0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2383,7 +2383,7 @@
   dependencies:
     "@octokit/openapi-types" "^10.0.0"
 
-"@opentripplanner/base-map@^3.0.16", "@opentripplanner/base-map@^3.1.0", "@opentripplanner/base-map@^3.2.0":
+"@opentripplanner/base-map@^3.0.14", "@opentripplanner/base-map@^3.0.16", "@opentripplanner/base-map@^3.1.0", "@opentripplanner/base-map@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-3.2.0.tgz#db4410319d9614077ec925d739165a998c4a2485"
   integrity sha512-d/yTKEnXqrw9pXhSvCERT+wLFa077Xr4wEFu4pYB+WYoZFflNxuTuAXXjm268HS/d0kjNndkjSMkxaKk6AjsvA==
@@ -2398,10 +2398,10 @@
   resolved "https://registry.yarnpkg.com/@opentripplanner/building-blocks/-/building-blocks-1.1.0.tgz#ef9fe862ce0a3e92c9a6c2c2db749a9a02deebd5"
   integrity sha512-nx7pU1zIZzJcSkCFYyZ7gt+jd0gXj7bjx8rXn1msgF5uLWmtN/70dsmYNEApeA7haC076KOO3B/Jh44YfXG95g==
 
-"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0":
-  version "11.4.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84"
-  integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA==
+"@opentripplanner/core-utils@^11.0.2", "@opentripplanner/core-utils@^11.4.1", "@opentripplanner/core-utils@^11.4.3":
+  version "11.4.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.3.tgz#4655f9a3bef1977e53abd81a4a0eae966f977c60"
+  integrity sha512-GbvchRsLfEi9JygUx6ypU+Iqv2hELseC53yQyQ/XdnB1kcHzN71BtBbz+qpD5/jk8IuM92j1taRnGMeu5ni6yA==
   dependencies:
     "@conveyal/lonlat" "^1.4.1"
     "@mapbox/polyline" "^1.1.0"
@@ -2416,10 +2416,10 @@
     lodash.isequal "^4.5.0"
     qs "^6.9.1"
 
-"@opentripplanner/core-utils@^11.4.1", "@opentripplanner/core-utils@^11.4.3":
-  version "11.4.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.3.tgz#4655f9a3bef1977e53abd81a4a0eae966f977c60"
-  integrity sha512-GbvchRsLfEi9JygUx6ypU+Iqv2hELseC53yQyQ/XdnB1kcHzN71BtBbz+qpD5/jk8IuM92j1taRnGMeu5ni6yA==
+"@opentripplanner/core-utils@^11.2.3", "@opentripplanner/core-utils@^11.4.0":
+  version "11.4.2"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.4.2.tgz#cc6034fb80ccda44e50f7f0a1e80a7bad8387f84"
+  integrity sha512-EVYVN73Cgf9IC+uya49843MFJnVkmv0nHAjsQwmPGSx/w5fY49X4fSpDprL7Bn+MTzk58U2udDsn6OzKmV0JdA==
   dependencies:
     "@conveyal/lonlat" "^1.4.1"
     "@mapbox/polyline" "^1.1.0"
@@ -2478,12 +2478,12 @@
     "@opentripplanner/core-utils" "^11.4.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^5.3.0":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.3.tgz#5202060ccd1a38fd6ed823331a00233a15305957"
-  integrity sha512-3G0szbSObrQh3uliQI6Hx62iCqqpxvrxGo7X69r28S7s8fexoI1B/3B4lRC0D14BUUPaOisE5Rc2N10SjI6MtQ==
+"@opentripplanner/itinerary-body@^5.0.2", "@opentripplanner/itinerary-body@^5.3.5":
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.5.tgz#e31ea005f374acaf9050653d5e77464d70522fa4"
+  integrity sha512-Ku/KX+G1wGhNqFUTqjXLGz5cYkujEg2fdnpOhyoKayidQbux+CbX0BkpVBR7DBMkVJsN7wWUWVirfbYFBCCSdA==
   dependencies:
-    "@opentripplanner/core-utils" "^11.4.0"
+    "@opentripplanner/core-utils" "^11.4.1"
     "@opentripplanner/humanize-distance" "^1.2.0"
     "@opentripplanner/icons" "^2.0.10"
     "@opentripplanner/location-icon" "^1.4.1"
@@ -2496,12 +2496,12 @@
     react-resize-detector "^4.2.1"
     string-similarity "^4.0.4"
 
-"@opentripplanner/itinerary-body@^5.3.5":
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.5.tgz#e31ea005f374acaf9050653d5e77464d70522fa4"
-  integrity sha512-Ku/KX+G1wGhNqFUTqjXLGz5cYkujEg2fdnpOhyoKayidQbux+CbX0BkpVBR7DBMkVJsN7wWUWVirfbYFBCCSdA==
+"@opentripplanner/itinerary-body@^5.3.0":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.3.tgz#5202060ccd1a38fd6ed823331a00233a15305957"
+  integrity sha512-3G0szbSObrQh3uliQI6Hx62iCqqpxvrxGo7X69r28S7s8fexoI1B/3B4lRC0D14BUUPaOisE5Rc2N10SjI6MtQ==
   dependencies:
-    "@opentripplanner/core-utils" "^11.4.1"
+    "@opentripplanner/core-utils" "^11.4.0"
     "@opentripplanner/humanize-distance" "^1.2.0"
     "@opentripplanner/icons" "^2.0.10"
     "@opentripplanner/location-icon" "^1.4.1"
@@ -2616,15 +2616,15 @@
     "@opentripplanner/icons" "^2.0.10"
     flat "^5.0.2"
 
-"@opentripplanner/transitive-overlay@^3.0.20":
-  version "3.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.20.tgz#ff794938bdd4a051d52a78b874fd109629740bc9"
-  integrity sha512-3S8LNTPhipGWLDxP3FSoVXc8ob0K8XsKLMi+NWEl2S8nxQoHAHIWZHh6uIHwOLglQNKuseyhOy9kvIT4QJJPCA==
+"@opentripplanner/transitive-overlay@3.0.15":
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-3.0.15.tgz#5ae65111f2977a8bcb4a09127c9db3460ba2c2cb"
+  integrity sha512-1A28QWt87iJmzT9xC9Fxz/jq9Hd38oj+Ur9n4f2vIfQ+WMgkY6CGOsz60+CWq2yN+9tXY7Pj1g5I5klT/F43rw==
   dependencies:
     "@mapbox/polyline" "^1.1.1"
-    "@opentripplanner/base-map" "^3.1.0"
-    "@opentripplanner/core-utils" "^11.4.1"
-    "@opentripplanner/itinerary-body" "^5.3.0"
+    "@opentripplanner/base-map" "^3.0.14"
+    "@opentripplanner/core-utils" "^11.0.2"
+    "@opentripplanner/itinerary-body" "^5.0.2"
     "@turf/bbox" "^6.5.0"
     "@turf/bearing" "^6.5.0"
     "@turf/destination" "^6.5.0"