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