Minor Pattern Viewer Overhaul

__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap

@@ -175,96 +175,6 @@ exports[`components > viewers > stop viewer should render with initial stop id a
               <div
                 className="stop-viewer-header"
               >
-                <div
-                  className="back-button-container"
-                >
-                  <Button
-                    active={false}
-                    block={false}
-                    bsClass="btn"
-                    bsSize="small"
-                    bsStyle="default"
-                    disabled={false}
-                    onClick={[Function]}
-                  >
-                    <button
-                      className="btn btn-sm btn-default"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <IconWithText
-                        Icon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "displayName": "ArrowLeft",
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <div
-                          style={
-                            Object {
-                              "display": "contents",
-                            }
-                          }
-                        >
-                          <Styled(styled.span)>
-                            <span
-                              className="sc-hkwmXC sc-bSFUlv eFsrhn gAUjbw"
-                            >
-                              <ArrowLeft>
-                                <StyledIconBase
-                                  iconAttrs={
-                                    Object {
-                                      "fill": "currentColor",
-                                      "xmlns": "http://www.w3.org/2000/svg",
-                                    }
-                                  }
-                                  iconVerticalAlign="middle"
-                                  iconViewBox="0 0 448 512"
-                                >
-                                  <ForwardRef
-                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa"
-                                    iconAttrs={
-                                      Object {
-                                        "fill": "currentColor",
-                                        "xmlns": "http://www.w3.org/2000/svg",
-                                      }
-                                    }
-                                    iconVerticalAlign="middle"
-                                    iconViewBox="0 0 448 512"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      className="StyledIconBase-sc-ea9ulj-0 fqiNOa"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      viewBox="0 0 448 512"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
-                                        fill="currentColor"
-                                      />
-                                    </svg>
-                                  </ForwardRef>
-                                </StyledIconBase>
-                              </ArrowLeft>
-                            </span>
-                          </Styled(styled.span)>
-                          <span>
-                            <FormattedMessage
-                              id="common.forms.back"
-                            >
-                              common.forms.back
-                            </FormattedMessage>
-                          </span>
-                        </div>
-                      </IconWithText>
-                    </button>
-                  </Button>
-                </div>
                 <styled.div>
                   <div
                     className="sc-bTRMho cgDuJk"

lib/components/form/advanced-settings-panel.tsx

@@ -33,7 +33,9 @@ import { blue, getBaseColor } from '../util/colors'
 import { ComponentContext } from '../../util/contexts'
 import { generateModeSettingValues } from '../../util/api'
 import { getDependentName } from '../../util/user'
+import { invisibleCss } from '../util/invisible-a11y-label'
 import { User } from '../user/types'
+import BackButton from '../util/back-button'
 
 import {
   addCustomSettingLabels,
@@ -44,7 +46,6 @@ import {
   setModeButton,
   tripPlannerValidationErrors
 } from './util'
-import { invisibleCss } from '../util/invisible-a11y-label'
 import { setModeButtonEnabled } from './batch-settings'
 import { styledCheckboxCss } from './styled'
 import DateTimeModal from './date-time-modal'
@@ -274,16 +275,11 @@ const AdvancedSettingsPanel = ({
   return (
     <PanelOverlay className="advanced-settings" ref={innerRef}>
       <HeaderContainer>
-        <CloseButton
-          aria-label={closeButtonText}
+        <BackButton
+          backButtonText={closeButtonText}
           id="close-advanced-settings-button"
-          onClick={() => {
-            closePanel()
-          }}
-          title={closeButtonText}
-        >
-          <ArrowLeft size={22} />
-        </CloseButton>
+          onClick={closePanel}
+        />
         <h1 className="header-text">{headerText}</h1>
       </HeaderContainer>
       <DtSelectorContainer>

lib/components/mobile/pattern-viewer.js

@@ -38,7 +38,7 @@ class MobilePatternViewer extends Component {
         />
         <main tabIndex={-1}>
           <div className="viewer-container">
-            <PatternViewer hideBackButton ModeIcon={ModeIcon} />
+            <PatternViewer ModeIcon={ModeIcon} />
           </div>
 
           {/* The map is less important semantically, so keyboard focus and screen readers

lib/components/mobile/route-viewer.js

@@ -38,7 +38,7 @@ class MobileRouteViewer extends Component {
         />
         <main tabIndex={-1}>
           <div className="viewer-container">
-            <RouteViewer hideBackButton hideHeader ModeIcon={ModeIcon} />
+            <RouteViewer hideHeader ModeIcon={ModeIcon} />
           </div>
 
           {/* The map is less important semantically, so keyboard focus and screen readers

lib/components/mobile/stop-viewer.tsx

@@ -24,7 +24,7 @@ const MobileStopViewer = ({ setViewedStop }: Props) => {
       />
       <main tabIndex={-1}>
         <div className="viewer-container">
-          <StopScheduleViewer hideBackButton />
+          <StopScheduleViewer />
         </div>
 
         {/* The map is less important semantically, so keyboard focus and screen readers

lib/components/mobile/trip-viewer.tsx

@@ -23,7 +23,7 @@ const MobileTripViewer = ({ setViewedTrip }: Props) => {
       />
       <main tabIndex={-1}>
         <div className="viewer-container">
-          <TripViewer hideBackButton />
+          <TripViewer />
         </div>
 
         {/* The map is less important semantically, so keyboard focus and screen readers

lib/components/util/back-button.tsx

@@ -0,0 +1,33 @@
+import { ArrowLeft } from '@styled-icons/fa-solid'
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledBackButton = styled.button`
+  background: transparent;
+  border: none;
+`
+
+const BackButton = ({
+  backButtonText,
+  id,
+  onClick
+}: {
+  backButtonText: string
+  id?: string
+  onClick: () => void
+}): JSX.Element => {
+  return (
+    <StyledBackButton
+      aria-label={backButtonText}
+      id={id}
+      onClick={() => {
+        onClick()
+      }}
+      title={backButtonText}
+    >
+      <ArrowLeft size={22} />
+    </StyledBackButton>
+  )
+}
+
+export default BackButton

lib/components/viewers/nearby/nearby-view.tsx

@@ -71,7 +71,6 @@ type Props = {
   ) => void
   geocoderConfig: GeocoderConfig
   getCurrentPosition: any // TODO
-  hideBackButton?: boolean
   hideEmptyStops?: boolean
   location: string
   mobile?: boolean

lib/components/viewers/pattern-viewer.tsx

@@ -1,36 +1,27 @@
-import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage, useIntl } from 'react-intl'
-import { getMostReadableTextColor } from '@opentripplanner/core-utils/lib/route'
 import { TransitOperator } from '@opentripplanner/types'
+import { useIntl } from 'react-intl'
 import React, { useCallback, useContext, useEffect } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as uiActions from '../../actions/ui'
 import { ComponentContext } from '../../util/contexts'
-import { getFormattedMode } from '../../util/i18n'
-import {
-  getModeFromRoute,
-  getRouteColorBasedOnSettings,
-  getRouteOrPatternViewerTitle
-} from '../../util/viewer'
 import { getRouteOperator } from '../../util/state'
+import { getRouteOrPatternViewerTitle } from '../../util/viewer'
 import {
   SetViewedRouteHandler,
   ViewedRouteObject,
   ViewedRouteState
 } from '../util/types'
-import { StyledIconWrapper } from '../util/styledIcon'
+import BackButton from '../util/back-button'
 import PageTitle from '../util/page-title'
 
+import { RouteRowDetails } from './route-row'
 import RouteDetails from './route-details'
-import RouteName from './route-name'
 import VehiclePositionRetriever from './vehicle-position-retriever'
 
 interface Props {
   findRoutesIfNeeded: () => void
-  hideBackButton?: boolean
   setViewedRoute: SetViewedRouteHandler
   transitOperators: TransitOperator[]
   vehicleIconHighlight: boolean
@@ -40,7 +31,6 @@ interface Props {
 
 const PatternViewer = ({
   findRoutesIfNeeded,
-  hideBackButton,
   setViewedRoute,
   transitOperators,
   vehicleIconHighlight,
@@ -85,18 +75,12 @@ const PatternViewer = ({
   if (patternId && route) {
     // Find operator based on agency_id (extracted from OTP route ID).
     const operator = getRouteOperator(route, transitOperators)
-    const routeColor = getRouteColorBasedOnSettings(operator, route)
-    const textColor = getMostReadableTextColor(routeColor, route?.textColor)
-    const fill = vehicleIconHighlight === false ? undefined : textColor
 
+    const backButtonText = intl.formatMessage({ id: 'common.forms.back' })
     return (
       <div
         className="route-viewer pattern-viewer"
-        style={{
-          backgroundColor: routeColor,
-          color: textColor,
-          fill
-        }}
+        style={{ backgroundColor: 'white' }}
       >
         <VehiclePositionRetriever />
         <PageTitle
@@ -108,40 +92,27 @@ const PatternViewer = ({
           )}
         />
         {/* Header Block */}
-        <div
-          className="route-viewer-header"
-          style={{ backgroundColor: routeColor }}
-        >
+        <div className="route-viewer-header">
           {/* Back button */}
-          {!hideBackButton && (
-            <div className="back-button-container">
-              <Button bsSize="small" onClick={_backClicked}>
-                <StyledIconWrapper>
-                  <ArrowLeft />
-                </StyledIconWrapper>
-                <FormattedMessage id="common.forms.back" />
-              </Button>
+          <div className="back-button-container">
+            <BackButton
+              backButtonText={backButtonText}
+              id="pattern-viewer-back-button"
+              onClick={_backClicked}
+            />
+            <div className="header-text route-expanded">
+              <h1 style={{ display: 'contents', lineHeight: '1.4' }}>
+                {!route.pending && ModeIcon && (
+                  <RouteRowDetails
+                    intl={intl}
+                    isActive={false}
+                    ModeIcon={ModeIcon}
+                    route={route}
+                    RouteRenderer={RouteRenderer}
+                  />
+                )}
+              </h1>
             </div>
-          )}
-          <div className="header-text route-expanded">
-            <h1 style={{ display: 'contents' }}>
-              {!route.pending && ModeIcon && (
-                <ModeIcon
-                  aria-label={getFormattedMode(
-                    getModeFromRoute(route).toLowerCase(),
-                    intl
-                  )}
-                  mode={getModeFromRoute(route)}
-                  style={{ maxHeight: 40 }}
-                  width={22}
-                />
-              )}
-              <RouteName
-                isOnColoredBackground
-                route={route}
-                RouteRenderer={RouteRenderer}
-              />
-            </h1>
           </div>
         </div>
         <RouteDetails operator={operator} patternId={patternId} route={route} />