From 20047af21b3835b311c83123222f0104821e4195 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 26 Nov 2024 18:06:31 -0600
Subject: [PATCH 1/6] feat: add network connection status to ui and redux

---
 i18n/en-US.yml                                |  2 +
 lib/actions/ui.js                             |  3 +
 lib/components/app/desktop-nav.tsx            |  8 ++
 .../app/network-connection-banner.tsx         | 78 +++++++++++++++++++
 lib/components/app/responsive-webapp.js       |  6 +-
 lib/components/mobile/navigation-bar.js       |  9 ++-
 lib/reducers/create-otp-reducer.js            | 12 +++
 7 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/app/network-connection-banner.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index e3f9c8025..9bb360c76 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -183,6 +183,8 @@ components:
     closeMenu: Close Menu
     fieldTrip: Field Trip
     mailables: Mailables
+    networkConnectionLost: Network connection lost
+    networkConnectionRestored: Network connection restored
     openMenu: Open Menu
     skipNavigation: Skip navigation
   BackToTripPlanner:
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index cdd0691da..a548a43bc 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -47,6 +47,9 @@ const viewRoute = createAction('SET_VIEWED_ROUTE')
 export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
 const settingItineraryView = createAction('SET_ITINERARY_VIEW')
 export const setPopupContent = createAction('SET_POPUP_CONTENT')
+export const setNetworkConnectionLost = createAction(
+  'SET_NETWORK_CONNECTION_LOST'
+)
 
 // This code-less action calls the reducer code
 // and thus resets the session timeout.
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index f9a265b86..ef692d88c 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -13,6 +13,7 @@ import { DEFAULT_APP_TITLE } from '../../util/constants'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
 
+import { NetworkConnectionBanner } from './network-connection-banner'
 import AppMenu, { Icon } from './app-menu'
 import LocaleSelector from './locale-selector'
 import NavbarItem from './nav-item'
@@ -63,6 +64,7 @@ const NavItemOnLargeScreens = styled(NavbarItem)`
 // Typscript TODO: otpConfig type
 export type Props = {
   locale: string
+  networkConnectionLost: boolean
   otpConfig: AppConfig
   popupTarget?: string
   setPopupContent: (url: string) => void
@@ -83,6 +85,7 @@ export type Props = {
  */
 const DesktopNav = ({
   locale,
+  networkConnectionLost,
   otpConfig,
   popupTarget,
   setPopupContent
@@ -117,6 +120,8 @@ const DesktopNav = ({
       id: `config.popups.${popupTarget}`
     })
 
+  console.log(networkConnectionLost)
+
   return (
     <header>
       <Navbar fluid inverse>
@@ -166,6 +171,7 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
+      <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )
 }
@@ -173,8 +179,10 @@ const DesktopNav = ({
 // connect to the redux store
 const mapStateToProps = (state: AppReduxState) => {
   const { config: otpConfig } = state.otp
+  const { networkConnectionLost } = state.otp.ui.errors
   return {
     locale: state.otp.ui.locale,
+    networkConnectionLost,
     otpConfig,
     popupTarget: otpConfig.popups?.launchers?.toolbar
   }
diff --git a/lib/components/app/network-connection-banner.tsx b/lib/components/app/network-connection-banner.tsx
new file mode 100644
index 000000000..9ea7de51b
--- /dev/null
+++ b/lib/components/app/network-connection-banner.tsx
@@ -0,0 +1,78 @@
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { FormattedMessage } from 'react-intl'
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+
+import { RED_ON_WHITE } from '../util/colors'
+
+const containerClassname = 'network-connection-banner'
+const timeout = 200
+
+const TransitionStyles = styled.div`
+  .${containerClassname} {
+    background: ${RED_ON_WHITE};
+    border-left: 1px solid #e7e7e7;
+    border-right: 1px solid #e7e7e7;
+    color: #fff;
+    font-weight: 600;
+    padding: 5px;
+    position: absolute;
+    text-align: center;
+    top: 50px;
+    width: 100%;
+    z-index: 1;
+  }
+  .${containerClassname}-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  .${containerClassname}-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity ${timeout}ms ease-in;
+  }
+  .${containerClassname}-exit {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .${containerClassname}-exit-active {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity ${timeout}ms ease-in, transform ${timeout}ms ease-in;
+  }
+`
+export const NetworkConnectionLostBanner = styled.div``
+
+export const NetworkConnectionBanner = ({
+  networkConnectionLost
+}: {
+  networkConnectionLost: boolean
+}): JSX.Element => {
+  const connectionLostBannerRef = useRef<HTMLDivElement>(null)
+  return (
+    <TransitionStyles>
+      <TransitionGroup style={{ display: 'content' }}>
+        {networkConnectionLost && (
+          <CSSTransition
+            classNames={containerClassname}
+            nodeRef={connectionLostBannerRef}
+            timeout={timeout}
+          >
+            <NetworkConnectionLostBanner
+              aria-live="assertive"
+              className={containerClassname}
+              ref={connectionLostBannerRef}
+              role="status"
+            >
+              {networkConnectionLost ? (
+                <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+              ) : (
+                <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+              )}
+            </NetworkConnectionLostBanner>
+          </CSSTransition>
+        )}
+      </TransitionGroup>
+    </TransitionStyles>
+  )
+}
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 2b2a44dfc..15e5d4a22 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -154,10 +154,13 @@ class ResponsiveWebapp extends Component {
       map,
       matchContentToUrl,
       parseUrlQueryString,
-      receivedPositionResponse
+      receivedPositionResponse,
+      setNetworkConnectionLost
     } = this.props
     // Add on back button press behavior.
     window.addEventListener('popstate', handleBackButtonPress)
+    window.addEventListener('online', () => setNetworkConnectionLost(false))
+    window.addEventListener('offline', () => setNetworkConnectionLost(true))
 
     // If a URL is detected without hash routing (e.g., http://localhost:9966?sessionId=test),
     // window.location.search will have a value. In this case, we need to redirect to the URL root with the
@@ -441,6 +444,7 @@ const mapStateToWrapperProps = (state) => {
 const mapWrapperDispatchToProps = {
   processSignIn: authActions.processSignIn,
   setLocale: uiActions.setLocale,
+  setNetworkConnectionLost: uiActions.setNetworkConnectionLost,
   showAccessTokenError: authActions.showAccessTokenError,
   showLoginError: authActions.showLoginError
 }
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index 4426a244c..eaa071f3d 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -9,6 +9,7 @@ import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
 import { injectIntl } from 'react-intl'
+import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
 import LocaleSelector from '../app/locale-selector'
@@ -32,6 +33,7 @@ class MobileNavigationBar extends Component {
     headerText: PropTypes.string,
     intl: PropTypes.object,
     locale: PropTypes.string,
+    networkConnectionLost: PropTypes.bool,
     onBackClicked: PropTypes.func,
     setMobileScreen: PropTypes.func,
     showBackButton: PropTypes.bool
@@ -55,6 +57,7 @@ class MobileNavigationBar extends Component {
       headerText,
       intl,
       locale,
+      networkConnectionLost,
       showBackButton
     } = this.props
 
@@ -111,6 +114,9 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
+        <NetworkConnectionBanner
+          networkConnectionLost={networkConnectionLost}
+        />
       </header>
     )
   }
@@ -123,7 +129,8 @@ const mapStateToProps = (state) => {
     auth0Config: getAuth0Config(state.otp.config.persistence),
     configLanguages: state.otp.config.language,
     extraMenuItems: state.otp?.config?.extraMenuItems,
-    locale: state.otp.ui.locale
+    locale: state.otp.ui.locale,
+    networkConnectionLost: state.otp.ui.errors.networkConnectionLost
   }
 }
 
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index e753c466c..0028f5095 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -225,6 +225,9 @@ export function getInitialState(userDefinedConfig) {
     },
     ui: {
       diagramLeg: null,
+      errors: {
+        networkConnectionLost: !navigator.onLine
+      },
       locale: null,
       localizedMessages: null,
       mainPanelContent: null,
@@ -1108,6 +1111,15 @@ function createOtpReducer(config) {
             }
           }
         })
+      case 'SET_NETWORK_CONNECTION_LOST':
+        console.log(action.payload)
+        return update(state, {
+          ui: {
+            errors: {
+              networkConnectionLost: { $set: action.payload }
+            }
+          }
+        })
       case 'SERVICE_TIME_RANGE_REQUEST':
         return update(state, {
           serviceTimeRange: { $set: { pending: true } }

From 3fcf0592f4358959139a0c497707064f3f309c61 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:17:10 -0600
Subject: [PATCH 2/6] tweak styling and create status region

---
 lib/components/app/app.css                    |  3 +++
 lib/components/app/desktop-nav.tsx            | 11 ++++++++---
 .../app/network-connection-banner.tsx         | 19 +++++++++++--------
 lib/components/mobile/batch-search-screen.tsx |  5 +++--
 lib/reducers/create-otp-reducer.js            |  1 -
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 87fe44222..e5d39188a 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -108,6 +108,9 @@
   height: 100%;
   width: 100%;
 }
+.otp .navbar {
+  z-index: 25;
+}
 
 /** These changes kick in when the map is hidden. These rules ensure that the entire "sidebar"
     (which at this point fills the entire screen) scrolls as a single unit.
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index ef692d88c..a92cd9df5 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { isMobile } from '@opentripplanner/core-utils/lib/ui'
 import { Nav, Navbar } from 'react-bootstrap'
-import { useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -120,8 +120,6 @@ const DesktopNav = ({
       id: `config.popups.${popupTarget}`
     })
 
-  console.log(networkConnectionLost)
-
   return (
     <header>
       <Navbar fluid inverse>
@@ -171,6 +169,13 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
       <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )
diff --git a/lib/components/app/network-connection-banner.tsx b/lib/components/app/network-connection-banner.tsx
index 9ea7de51b..50c4924a0 100644
--- a/lib/components/app/network-connection-banner.tsx
+++ b/lib/components/app/network-connection-banner.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import { RED_ON_WHITE } from '../util/colors'
 
 const containerClassname = 'network-connection-banner'
-const timeout = 200
+const timeout = 250
 
 const TransitionStyles = styled.div`
   .${containerClassname} {
@@ -20,7 +20,12 @@ const TransitionStyles = styled.div`
     text-align: center;
     top: 50px;
     width: 100%;
-    z-index: 1;
+    // When banner is fully loaded, set z-index higher than nav so we're not seeing the nav border.
+    z-index: 26;
+
+    @media (max-width: 768px) {
+      border: 0;
+    }
   }
   .${containerClassname}-enter {
     opacity: 0;
@@ -34,11 +39,13 @@ const TransitionStyles = styled.div`
   .${containerClassname}-exit {
     opacity: 1;
     transform: translateY(0);
+    z-index: 20;
   }
   .${containerClassname}-exit-active {
     opacity: 0;
     transform: translateY(-100%);
     transition: opacity ${timeout}ms ease-in, transform ${timeout}ms ease-in;
+    z-index: 20;
   }
 `
 export const NetworkConnectionLostBanner = styled.div``
@@ -62,13 +69,9 @@ export const NetworkConnectionBanner = ({
               aria-live="assertive"
               className={containerClassname}
               ref={connectionLostBannerRef}
-              role="status"
+              role="alert"
             >
-              {networkConnectionLost ? (
-                <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-              ) : (
-                <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
-              )}
+              <FormattedMessage id="components.AppMenu.networkConnectionLost" />
             </NetworkConnectionLostBanner>
           </CSSTransition>
         )}
diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx
index 5be2cc8c7..04e2a850c 100644
--- a/lib/components/mobile/batch-search-screen.tsx
+++ b/lib/components/mobile/batch-search-screen.tsx
@@ -40,8 +40,9 @@ const MobileSearchSettings = styled.div<{
   top: 50px;
   transition: ${(props) => `all ${props.transitionDuration}ms ease`};
   transition-delay: ${(props) => props.transitionDelay}ms;
-  /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */
-  z-index: 999;
+  /* Must appear under the 'hamburger' dropdown which has z-index of 1000, and the "network lost"
+    banner which has a z-index of 10 */
+  z-index: 9;
 `
 
 interface Props {
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 0028f5095..9d66ab43b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1112,7 +1112,6 @@ function createOtpReducer(config) {
           }
         })
       case 'SET_NETWORK_CONNECTION_LOST':
-        console.log(action.payload)
         return update(state, {
           ui: {
             errors: {

From f8141fd46567593e7a9848524a67584ae00e03ac Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:23:40 -0600
Subject: [PATCH 3/6] Add status region to mobile

---
 lib/components/mobile/navigation-bar.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index eaa071f3d..555690226 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -1,5 +1,6 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Navbar } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -8,10 +9,10 @@ import styled from 'styled-components'
 import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
-import { injectIntl } from 'react-intl'
 import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import LocaleSelector from '../app/locale-selector'
 import NavLoginButtonAuth0 from '../../components/user/nav-login-button-auth0'
 import PageTitle from '../util/page-title'
@@ -114,6 +115,13 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
+        <InvisibleA11yLabel aria-live="assertive" role="status">
+          {networkConnectionLost ? (
+            <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+          ) : (
+            <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+          )}
+        </InvisibleA11yLabel>
         <NetworkConnectionBanner
           networkConnectionLost={networkConnectionLost}
         />

From 27bd54808ed4c227f05889329017eaff7d24fa39 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:35:53 -0600
Subject: [PATCH 4/6] consolidate network connection status regions into one

---
 lib/components/app/desktop-nav.tsx             |  9 +--------
 .../app/network-connection-banner.tsx          | 18 ++++++++++--------
 lib/components/mobile/navigation-bar.js        | 10 +---------
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index a92cd9df5..43b4ca919 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
-import { FormattedMessage, useIntl } from 'react-intl'
 import { isMobile } from '@opentripplanner/core-utils/lib/ui'
 import { Nav, Navbar } from 'react-bootstrap'
+import { useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -169,13 +169,6 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
-      <InvisibleA11yLabel aria-live="assertive" role="status">
-        {networkConnectionLost ? (
-          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-        ) : (
-          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
-        )}
-      </InvisibleA11yLabel>
       <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )
diff --git a/lib/components/app/network-connection-banner.tsx b/lib/components/app/network-connection-banner.tsx
index 50c4924a0..a323520ac 100644
--- a/lib/components/app/network-connection-banner.tsx
+++ b/lib/components/app/network-connection-banner.tsx
@@ -4,6 +4,7 @@ import React, { useRef } from 'react'
 import styled from 'styled-components'
 
 import { RED_ON_WHITE } from '../util/colors'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
 const containerClassname = 'network-connection-banner'
 const timeout = 250
@@ -48,7 +49,6 @@ const TransitionStyles = styled.div`
     z-index: 20;
   }
 `
-export const NetworkConnectionLostBanner = styled.div``
 
 export const NetworkConnectionBanner = ({
   networkConnectionLost
@@ -58,6 +58,13 @@ export const NetworkConnectionBanner = ({
   const connectionLostBannerRef = useRef<HTMLDivElement>(null)
   return (
     <TransitionStyles>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
       <TransitionGroup style={{ display: 'content' }}>
         {networkConnectionLost && (
           <CSSTransition
@@ -65,14 +72,9 @@ export const NetworkConnectionBanner = ({
             nodeRef={connectionLostBannerRef}
             timeout={timeout}
           >
-            <NetworkConnectionLostBanner
-              aria-live="assertive"
-              className={containerClassname}
-              ref={connectionLostBannerRef}
-              role="alert"
-            >
+            <div className={containerClassname} ref={connectionLostBannerRef}>
               <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-            </NetworkConnectionLostBanner>
+            </div>
           </CSSTransition>
         )}
       </TransitionGroup>
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index 555690226..1e7b0079c 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -1,6 +1,6 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { injectIntl } from 'react-intl'
 import { Navbar } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -12,7 +12,6 @@ import { ComponentContext } from '../../util/contexts'
 import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
-import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import LocaleSelector from '../app/locale-selector'
 import NavLoginButtonAuth0 from '../../components/user/nav-login-button-auth0'
 import PageTitle from '../util/page-title'
@@ -115,13 +114,6 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
-        <InvisibleA11yLabel aria-live="assertive" role="status">
-          {networkConnectionLost ? (
-            <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-          ) : (
-            <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
-          )}
-        </InvisibleA11yLabel>
         <NetworkConnectionBanner
           networkConnectionLost={networkConnectionLost}
         />

From 9ab8492883568a17ff85a727b3718395daa2d008 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:56:45 -0600
Subject: [PATCH 5/6] French translations for network connection strings

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

diff --git a/i18n/fr.yml b/i18n/fr.yml
index a8283e9f1..b7bddef7a 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -194,6 +194,8 @@ components:
     closeMenu: Fermer le menu
     fieldTrip: Groupes scolaires
     mailables: Prêt-à-poster
+    networkConnectionLost: Erreur de connexion réseau
+    networkConnectionRestored: Connexion réseau restaurée
     openMenu: Ouvrir le menu
     skipNavigation: Sauter la navigation
   BackToTripPlanner:

From 0bbb6c07db301bc52a3ceec647c35f841aae1b1f Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:15:24 -0600
Subject: [PATCH 6/6] Update snapshots

---
 .../viewers/__snapshots__/nearby-view.js.snap | 496 +++++++++---------
 .../__snapshots__/create-otp-reducer.js.snap  |   3 +
 2 files changed, 251 insertions(+), 248 deletions(-)

diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index a3a1b7bc5..65c9368a3 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -46,7 +46,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-liccgK dBKtUQ nearby-view base-color-bg"
+            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -85,7 +85,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-iumJeC jmbulg base-color-bg"
+                className="sc-dcwqsv bgYBAJ base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4080,7 +4080,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-liccgK dBKtUQ nearby-view base-color-bg"
+            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4119,7 +4119,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-iumJeC jmbulg base-color-bg"
+                className="sc-dcwqsv bgYBAJ base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4236,15 +4236,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4331,7 +4331,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4350,7 +4350,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4692,15 +4692,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4787,7 +4787,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4806,7 +4806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5148,15 +5148,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -5243,7 +5243,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5262,7 +5262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -7794,7 +7794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10116,11 +10116,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -10702,7 +10702,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10721,7 +10721,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -12159,7 +12159,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -12336,7 +12336,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12384,7 +12384,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12422,7 +12422,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12571,10 +12571,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12585,7 +12585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12597,7 +12597,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12733,10 +12733,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12747,7 +12747,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12759,7 +12759,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13164,7 +13164,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13212,7 +13212,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13250,7 +13250,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13399,10 +13399,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13413,7 +13413,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13425,7 +13425,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13922,7 +13922,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13970,7 +13970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -14008,7 +14008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -14157,10 +14157,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -14171,7 +14171,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -14183,7 +14183,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -16072,7 +16072,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -17590,11 +17590,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -17975,7 +17975,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -17994,7 +17994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -19030,7 +19030,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -19142,7 +19142,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19190,7 +19190,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19228,7 +19228,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19843,7 +19843,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19891,7 +19891,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19929,7 +19929,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -20347,7 +20347,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -20395,7 +20395,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -20433,7 +20433,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -21106,15 +21106,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -21201,7 +21201,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -21220,7 +21220,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -21562,15 +21562,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -21657,7 +21657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -21676,7 +21676,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -22018,15 +22018,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -22113,7 +22113,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -22132,7 +22132,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -24972,7 +24972,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -27602,11 +27602,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -28265,7 +28265,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -28284,7 +28284,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -29876,7 +29876,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -30053,7 +30053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30101,7 +30101,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30139,7 +30139,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30288,10 +30288,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -30302,7 +30302,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -30314,7 +30314,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -30450,10 +30450,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -30464,7 +30464,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -30476,7 +30476,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -30894,7 +30894,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30942,7 +30942,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30980,7 +30980,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -31129,10 +31129,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -31143,7 +31143,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -31155,7 +31155,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -31448,10 +31448,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -31462,7 +31462,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -31474,7 +31474,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -31657,7 +31657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -31705,7 +31705,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -31743,7 +31743,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -32358,7 +32358,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -32406,7 +32406,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -32444,7 +32444,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -32803,15 +32803,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -32898,7 +32898,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32917,7 +32917,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -33259,15 +33259,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -33354,7 +33354,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -33373,7 +33373,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -33715,15 +33715,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -33810,7 +33810,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -33829,7 +33829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34171,15 +34171,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -34266,7 +34266,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -34285,7 +34285,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34627,15 +34627,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -34722,7 +34722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -34741,7 +34741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -36469,7 +36469,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -37987,11 +37987,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -38372,7 +38372,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -38391,7 +38391,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -39427,7 +39427,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -39539,7 +39539,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -39587,7 +39587,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -39625,7 +39625,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -39774,10 +39774,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -39788,7 +39788,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -39800,7 +39800,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -40362,7 +40362,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -40410,7 +40410,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -40448,7 +40448,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -41063,7 +41063,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -41111,7 +41111,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -41149,7 +41149,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -41508,15 +41508,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -41603,7 +41603,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -41622,7 +41622,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -44050,7 +44050,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -46268,11 +46268,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -46828,7 +46828,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -46847,7 +46847,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -48233,7 +48233,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -48501,7 +48501,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -48549,7 +48549,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -48587,7 +48587,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -48736,10 +48736,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -48750,7 +48750,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -48762,7 +48762,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -48898,10 +48898,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -48912,7 +48912,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -48924,7 +48924,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -49060,10 +49060,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -49074,7 +49074,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -49086,7 +49086,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -51773,7 +51773,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -54403,11 +54403,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -55066,7 +55066,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -55085,7 +55085,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -56677,7 +56677,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -56789,7 +56789,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56837,7 +56837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ dXDCbE"
+                                                    className="sc-fTACoA bFfeuI"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -56875,7 +56875,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -57542,7 +57542,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -57590,7 +57590,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -57628,7 +57628,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -57777,10 +57777,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -57791,7 +57791,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -57803,7 +57803,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -58300,7 +58300,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -58348,7 +58348,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ dXDCbE"
+                                                    className="sc-fTACoA bFfeuI"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -58386,7 +58386,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -59118,7 +59118,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -59166,7 +59166,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -59204,7 +59204,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -59871,7 +59871,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -59919,7 +59919,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -59957,7 +59957,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -60598,7 +60598,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -60646,7 +60646,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -60684,7 +60684,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -61357,15 +61357,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -61452,7 +61452,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -61471,7 +61471,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -64003,7 +64003,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -66325,11 +66325,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -66911,7 +66911,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -66930,7 +66930,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -68368,7 +68368,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -68545,7 +68545,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -68593,7 +68593,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -68631,7 +68631,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -68780,10 +68780,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -68794,7 +68794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -68806,7 +68806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -68942,10 +68942,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -68956,7 +68956,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -68968,7 +68968,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -69373,7 +69373,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -69421,7 +69421,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -69459,7 +69459,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -69608,10 +69608,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -69622,7 +69622,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -69634,7 +69634,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -70131,7 +70131,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -70179,7 +70179,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -70217,7 +70217,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -70366,10 +70366,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -70380,7 +70380,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -70392,7 +70392,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
diff --git a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
index e05ba4868..8696af73a 100644
--- a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
+++ b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
@@ -83,6 +83,9 @@ Object {
   },
   "ui": Object {
     "diagramLeg": null,
+    "errors": Object {
+      "networkConnectionLost": false,
+    },
     "locale": null,
     "localizedMessages": null,
     "mainPanelContent": null,