From 2d81d303a44c2f8137fa4872f1865065c4595891 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 23 Apr 2020 16:39:27 -0400
Subject: [PATCH 01/21] refactor(line-itin/itinerary.css): Remove unused file
 from before merge.

---
 .../narrative/line-itin/itinerary.css         | 375 ------------------
 1 file changed, 375 deletions(-)
 delete mode 100644 lib/components/narrative/line-itin/itinerary.css

diff --git a/lib/components/narrative/line-itin/itinerary.css b/lib/components/narrative/line-itin/itinerary.css
deleted file mode 100644
index 89df3acf0..000000000
--- a/lib/components/narrative/line-itin/itinerary.css
+++ /dev/null
@@ -1,375 +0,0 @@
-.otp .options.profile .itin-body .place-row {
-  margin-left: 55px;
-}
-
-.otp .line-itin {
-  margin-bottom: 20px;
-}
-
-/* Itinerary summary */
-
-.otp .line-itin .itin-summary {
-  padding-right: 5px;
-  height: 60px;
-  display: table;
-  width: 100%;
-  margin-bottom: 15px;
-}
-
-.otp .desktop-narrative-container .options.itinerary .line-itin .itin-summary {
-  display: none;
-}
-
-.otp .line-itin .itin-summary .details {
-  display: table-cell;
-  vertical-align: top;
-}
-
-.otp .line-itin .itin-summary .header {
-  font-weight: bold;
-  font-size: 18px;
-  margin-top: -3px;
-}
-
-.otp .line-itin .itin-summary .detail {
-  font-size: 13px;
-  color: #999999;
-}
-
-.otp .line-itin .itin-summary .routes {
-  display: table-cell;
-  text-align: right;
-}
-
-.otp .line-itin .itin-summary .routes .route-preview {
-  display: inline-block;
-  margin-left: 8px;
-  vertical-align: top;
-}
-
-.otp .line-itin .itin-summary .routes .route-preview .mode-icon {
-  height: 30px;
-  width: 30px;
-}
-
-.otp .line-itin .itin-summary .routes .route-preview .short-name {
-  color: white;
-  font-weight: 500;
-  text-align: center;
-  margin-top: 6px;
-  font-size: 15px;
-  padding-top: 2px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  border: 2px solid white;
-  box-shadow: 0 0 0.5em #000;
-}
-
-/* Itinerary main body */
-
-.otp .line-itin .itin-body {
-  padding: 20px 0px;
-}
-
-.otp .line-itin .place-row {
-  display: table;
-  width: 100%;
-}
-
-
-/* Departure/arrival time (1st column in table) */
-
-.otp .line-itin .time {
-  display: table-cell;
-  width: 60px;
-  font-size: 14px;
-  color: #999999;
-  text-align: right;
-  padding-right: 4px;
-  padding-top: 1px;
-  vertical-align: top;
-}
-
-/* The place icon and line itself (2nd column in table) */
-.otp .line-itin .line-container {
-  position: relative;
-  display: table-cell;
-  width: 20px;
-  max-width: 20px;
-}
-
-.otp .line-itin .place-icon-group {
-  position: absolute;
-  font-size: 18px;
-  left: -8px;
-  top: -7px;
-  z-index: 20;
-}
-
-.otp .line-itin .leg-line {
-  position: absolute;
-  top: 11px;
-  bottom: -11px;
-  z-index: 10;
-}
-
-// Internet explorer specific media query to apply the below styling to fix
-// rendering issues with table cell display with undefined heights.
-/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .otp .line-itin .line-container {
-    overflow: hidden; // hack for IE to render table cell correctly.
-  }
-
-  .otp .line-itin .leg-line {
-    height: 1000px; // hack for IE to render table cell correctly.
-  }
-}*/
-
-.otp .line-itin .leg-line-walk {
-  left: 6px;
-  right: 6px;
-  background: radial-gradient(ellipse at center, #87cefa 40%, transparent 10%);
-  background-size: 12px 12px;
-  background-repeat: repeat-y;
-  background-position: center -5px;
-}
-
-.otp .line-itin .leg-line-bicycle {
-  left: 7.5px;
-  right: 7.5px;
-  background: repeating-linear-gradient(
-    0deg,
-    red,
-    red 8px,
-    white 8px,
-    white 12.5px
-  );
-}
-
-.otp .line-itin .leg-line-car {
-  left: 7.5px;
-  right: 7.5px;
-  background: repeating-linear-gradient(
-    0deg,
-    grey,
-    grey 8px,
-    white 8px,
-    white 12.5px
-  );
-}
-
-.otp .line-itin .leg-line-micromobility {
-  left: 7.5px;
-  right: 7.5px;
-  background: repeating-linear-gradient(
-    0deg,
-    #f5a729,
-    #f5a729 8px,
-    white 8px,
-    white 12.5px
-  );
-}
-
-.otp .line-itin .leg-line-transit {
-  left: 5px;
-  right: 5px;
-  background-color: gray;
-}
-
-/* Place/Leg details (3rd column in table) */
-
-.otp .line-itin .place-details {
-  font-size: 13px;
-  display: table-cell;
-  padding-top: 1px;
-}
-
-.otp .line-itin .place-name {
-  font-size: 18px;
-  line-height: 20px;
-  padding-left: 4px;
-  font-weight: 500;
-  color: black;
-}
-
-.otp .line-itin .place-subheader {
-  font-size: 12px;
-  padding-left: 4px;
-  padding-top: 1px;
-  font-weight: 300;
-  color: gray;
-}
-
-.otp .line-itin .interline-dot {
-  position: relative;
-  float: left;
-  margin-left: -13.5px;
-  z-index: 25;
-  color: #fff;
-}
-
-.otp .line-itin .interline-name {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
-}
-
-/* Leg body general */
-
-.otp .line-itin .leg-body {
-  padding: 12px 0px 18px 4px;
-  font-size: 13px;
-  color: #999999;
-}
-
-.otp .line-itin .summary {
-  cursor: pointer;
-}
-
-.otp .line-itin .leg-body .icon {
-  height: 24px;
-  width: 24px;
-  float: left;
-  margin-right: 6px;
-}
-
-.otp .line-itin .leg-body .leg-description {
-  display: table;
-}
-
-.otp .line-itin .leg-body .leg-description > div {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-/* Leg steps (for turn-by-turn) */
-
-.otp .line-itin .leg-body .steps-header {
-  font-size: 13px;
-  margin-top: 10px;
-  color: #999999;
-  font-style: normal;
-  display: inline-block;
-}
-
-.otp .line-itin .leg-body .step-row {
-  font-size: 13px;
-  margin-top: 8px;
-  color: #999999;
-  font-style: normal;
-}
-
-/* Transit leg details */
-
-.otp .line-itin .leg-body .route-name {
-  color: #999999;
-  margin-top: 5px;
-}
-
-.otp .line-itin .leg-body .route-short-name {
-  display: inline-block;
-  background-color: #0f6aac;
-  padding-top: 1px;
-  color: white;
-  font-weight: 500;
-  font-size: 14px;
-  margin-right: 6px;
-  text-align: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  border: 1px solid white;
-  box-shadow: 0 0 0.25em #000;
-  margin-right: 8px;
-}
-
-.otp .line-itin .leg-body .route-long-name {
-  font-size: 13px;
-  line-height: 16px;
-  font-weight: 500;
-}
-
-.otp .line-itin .leg-body .transit-leg-details {
-  margin-top: 5px;
-}
-
-.otp .line-itin .leg-body .agency-info {
-  margin-top: 5px;
-
-}
-
-.otp .line-itin .leg-body .transit-leg-details .header {
-  cursor: pointer;
-  color: #999999;
-  font-size: 13px;
-}
-
-/* Intermediate stops */
-
-.otp .line-itin .leg-body .transit-leg-details .intermediate-stops .stop-row {
-  z-index: 30;
-  position: relative;
-}
-
-.otp .line-itin .leg-body .transit-leg-details .intermediate-stops .stop-marker {
-  float: left;
-  margin-left: -17px;
-  color: white;
-}
-
-.otp .line-itin .leg-body .transit-leg-details .intermediate-stops .stop-name {
-  color: #999999;
-  font-size: 14px;
-  margin-top: 3px;
-}
-
-/* Transit alerts */
-
-.otp .line-itin .leg-body .transit-alerts-toggle {
-  display: inline-block;
-  margin-top: 8px;
-  color: #D14727;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.otp .line-itin .leg-body .transit-alerts {
-  margin-top: 3px;
-}
-
-.otp .line-itin .leg-body .transit-alerts .transit-alert {
-  margin-top: 5px;
-  background-color: #eee;
-  padding: 8px;
-  color: black;
-  border-radius: 4px;
-}
-
-.otp .line-itin .leg-body .transit-alerts .transit-alert .alert-icon {
-  float: left;
-  font-size: 18px;
-}
-
-.otp .line-itin .leg-body .transit-alerts .transit-alert .alert-header {
-  font-size: 14px;
-  margin-left: 30px;
-  font-weight: 600;
-}
-
-.otp .line-itin .leg-body .transit-alerts .transit-alert .alert-body {
-  font-size: 12px;
-  margin-left: 30px;
-  /* white space pre-wrap is required to render line breaks correctly. */
-  white-space: pre-wrap;
-}
-
-.otp .line-itin .leg-body .transit-alerts .transit-alert .effective-date {
-  margin-top: 5px;
-  margin-left: 30px;
-  font-size: 12px;
-  font-style: italic;
-}

From 16dcedf417dc0e847078f85b27ec0bb480340930 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 24 Apr 2020 10:27:16 -0400
Subject: [PATCH 02/21] fix(lib/index): Should not have removed LineItinerary
 from lib/index.

---
 lib/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/index.js b/lib/index.js
index 5fb277044..4ed9f8b55 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -23,6 +23,7 @@ import SimpleRealtimeAnnotation from './components/narrative/simple-realtime-ann
 import TransportationNetworkCompanyLeg from './components/narrative/default/tnc-leg'
 import TripDetails from './components/narrative/connected-trip-details'
 import TripTools from './components/narrative/trip-tools'
+import LineItinerary from './components/narrative/line-itin/line-itinerary'
 
 import MobileMain from './components/mobile/main'
 
@@ -66,6 +67,7 @@ export {
 
   // narrative components
   LegDiagramPreview,
+  LineItinerary,
   NarrativeItineraries,
   NarrativeItinerary,
   NarrativeRoutingResults,

From 4aeb8230f50b873fd27bcfc092f0fd5c0f7403c4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 12:24:03 -0400
Subject: [PATCH 03/21] refactor(print-layout): Extract LegIcon (and ModeIcon)
 props to example.js.

---
 example.js                         |  3 +++
 lib/components/app/print-layout.js | 22 +++-------------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/example.js b/example.js
index 72f5ac230..d26a0d28f 100644
--- a/example.js
+++ b/example.js
@@ -1,5 +1,6 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
+import { TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
 
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
@@ -98,6 +99,8 @@ class OtpRRExample extends Component {
       <ResponsiveWebapp
         desktopView={desktopView}
         mobileView={mobileView}
+        LegIcon={TriMetLegIcon}
+        ModeIcon={TriMetModeIcon}
       />
     )
   }
diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
index 724db3ee3..c140345d8 100644
--- a/lib/components/app/print-layout.js
+++ b/lib/components/app/print-layout.js
@@ -1,4 +1,3 @@
-import { TriMetLegIcon } from '@opentripplanner/icons'
 import PrintableItinerary from '@opentripplanner/printable-itinerary'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -14,6 +13,7 @@ import { getActiveItinerary } from '../../util/state'
 class PrintLayout extends Component {
   static propTypes = {
     itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired,
     parseQueryString: PropTypes.func
   }
 
@@ -52,24 +52,8 @@ class PrintLayout extends Component {
     root.removeAttribute('class')
   }
 
-  /**
-   * Use one of the customIcons if provided,
-   * (similar to @opentriplanner/trip-form/ModeIcon)
-   * otherwise, fall back on TriMetLegIcon.
-   * TODO: Combine all custom icon rendering in one place.
-   */
-  customLegIcon = icons => {
-    return function ({leg, props}) {
-      // Check if there is a custom icon (exact match required).
-      if (icons && leg.mode in icons) {
-        return icons[leg.mode]
-      }
-      return TriMetLegIcon({leg, props})
-    }
-  }
-
   render () {
-    const { config, customIcons, itinerary } = this.props
+    const { config, itinerary, LegIcon } = this.props
     return (
       <div className='otp print-layout'>
         {/* The header bar, including the Toggle Map and Print buttons */}
@@ -99,7 +83,7 @@ class PrintLayout extends Component {
             <PrintableItinerary
               config={config}
               itinerary={itinerary}
-              LegIcon={this.customLegIcon(customIcons)}
+              LegIcon={LegIcon}
             />
             <TripDetails itinerary={itinerary} />
           </>

From e21ccfa6bac0b43cf1470c297f7dc268befa76a5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 15:43:54 -0400
Subject: [PATCH 04/21] refactor(LineItinerary): Extract and propagate LegIcon
 prop from LineItinerary.

---
 example.js                                            |  6 ++++--
 lib/components/app/default-main-panel.js              |  6 +++++-
 .../narrative/line-itin/connected-itinerary-body.js   |  4 ++--
 lib/components/narrative/line-itin/itin-summary.js    |  6 ++++--
 lib/components/narrative/line-itin/line-itinerary.js  |  3 ++-
 lib/components/narrative/narrative-routing-results.js | 11 +++++++++--
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/example.js b/example.js
index d26a0d28f..1b273acb9 100644
--- a/example.js
+++ b/example.js
@@ -1,6 +1,6 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
-import { TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
+import { Ferry, TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
 
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
@@ -27,6 +27,8 @@ import {
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+const MyIcon = () => <Ferry />
+
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {
@@ -79,7 +81,7 @@ class OtpRRExample extends Component {
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
-              <DefaultMainPanel />
+              <DefaultMainPanel LegIcon={MyIcon} />
             </Col>
             <Col sm={6} md={8} className='map-container'>
               <Map />
diff --git a/lib/components/app/default-main-panel.js b/lib/components/app/default-main-panel.js
index ed3de24b6..198c240a7 100644
--- a/lib/components/app/default-main-panel.js
+++ b/lib/components/app/default-main-panel.js
@@ -17,6 +17,7 @@ class DefaultMainPanel extends Component {
       customIcons,
       itineraryClass,
       itineraryFooter,
+      LegIcon,
       mainPanelContent,
       showUserSettings
     } = this.props
@@ -43,7 +44,10 @@ class DefaultMainPanel extends Component {
             <NarrativeRoutingResults
               itineraryClass={itineraryClass}
               itineraryFooter={itineraryFooter}
-              customIcons={customIcons} />
+              customIcons={customIcons}
+              LegIcon={LegIcon}
+              // ModeIcon={ModeIcon}
+            />
           </div>
         </div>
         {showPlanTripButton &&
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index e4c92a4b6..a1e9cf8ca 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -1,5 +1,4 @@
 import isEqual from 'lodash.isequal'
-import { TriMetLegIcon } from '@opentripplanner/icons'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
@@ -33,6 +32,7 @@ class ConnectedItineraryBody extends Component {
       config,
       diagramVisible,
       itinerary,
+      LegIcon,
       setActiveLeg,
       setViewedTrip,
       showLegDiagram
@@ -44,7 +44,7 @@ class ConnectedItineraryBody extends Component {
           config={config}
           diagramVisible={diagramVisible}
           itinerary={itinerary}
-          LegIcon={TriMetLegIcon}
+          LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
diff --git a/lib/components/narrative/line-itin/itin-summary.js b/lib/components/narrative/line-itin/itin-summary.js
index ca6293c9e..955491975 100644
--- a/lib/components/narrative/line-itin/itin-summary.js
+++ b/lib/components/narrative/line-itin/itin-summary.js
@@ -1,9 +1,12 @@
 import coreUtils from '@opentripplanner/core-utils'
-import TriMetModeIcon from '@opentripplanner/icons/lib/trimet-mode-icon'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
+import {
+  getLegIcon
+} from '../../../util/itinerary'
+
 // TODO: make this a prop
 const defaultRouteColor = '#008'
 
@@ -128,7 +131,6 @@ export default class ItinerarySummary extends Component {
           }).map((leg, k) => {
             return (
               <RoutePreview key={k}>
-                <ModeIcon>{this.getIcon(leg.mode, customIcons)}</ModeIcon>
                 <ModeIcon>{getLegIcon(leg, customIcons)}</ModeIcon>
                 {coreUtils.itinerary.isTransit(leg.mode)
                   ? (
diff --git a/lib/components/narrative/line-itin/line-itinerary.js b/lib/components/narrative/line-itin/line-itinerary.js
index baf6034bd..c1bd53071 100644
--- a/lib/components/narrative/line-itin/line-itinerary.js
+++ b/lib/components/narrative/line-itin/line-itinerary.js
@@ -50,6 +50,7 @@ export default class LineItinerary extends NarrativeItinerary {
       expanded,
       itinerary,
       itineraryFooter,
+      LegIcon,
       showRealtimeAnnotation,
       onClick,
       timeFormat
@@ -74,7 +75,7 @@ export default class LineItinerary extends NarrativeItinerary {
           customIcons={customIcons} />
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
         {active || expanded
-          ? <ItineraryBody itinerary={itinerary} />
+          ? <ItineraryBody itinerary={itinerary} LegIcon={LegIcon} />
           : null}
         {itineraryFooter}
       </LineItineraryContainer>
diff --git a/lib/components/narrative/narrative-routing-results.js b/lib/components/narrative/narrative-routing-results.js
index 204cc245b..05b7442ec 100644
--- a/lib/components/narrative/narrative-routing-results.js
+++ b/lib/components/narrative/narrative-routing-results.js
@@ -13,6 +13,7 @@ class NarrativeRoutingResults extends Component {
   static propTypes = {
     customIcons: PropTypes.object,
     itineraryClass: PropTypes.func,
+    LegIcon: PropTypes.elementType.isRequired,
     routingType: PropTypes.string
   }
 
@@ -25,14 +26,20 @@ class NarrativeRoutingResults extends Component {
   }
 
   render () {
-    const { customIcons, error, itineraryClass, itineraryFooter, pending, itineraries, mainPanelContent } = this.props
+    const { customIcons, error, itineraryClass, itineraryFooter, LegIcon, pending, itineraries, mainPanelContent } = this.props
     if (pending) return <Loading />
     if (error) return <ErrorMessage />
     if (mainPanelContent) return null
 
     return (
       // TODO: If multiple routing types exist, do the check here.
-      <TabbedItineraries itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} itineraries={itineraries} customIcons={customIcons} />
+      <TabbedItineraries
+        itineraryClass={itineraryClass}
+        itineraryFooter={itineraryFooter}
+        itineraries={itineraries}
+        customIcons={customIcons}
+        LegIcon={LegIcon}
+      />
     )
   }
 }

From f6f9d7c2fd3ea3f4e6c0745cd9faab03e0648281 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 16:21:17 -0400
Subject: [PATCH 05/21] refactor(line-itin): Extract LegIcon prop from
 line-itin/ItinerarySummary.

---
 .../narrative/line-itin/itin-summary.js       | 13 ++--
 .../narrative/line-itin/line-itinerary.js     |  1 +
 lib/util/itinerary.js                         | 63 -------------------
 3 files changed, 6 insertions(+), 71 deletions(-)

diff --git a/lib/components/narrative/line-itin/itin-summary.js b/lib/components/narrative/line-itin/itin-summary.js
index 955491975..b402e2cba 100644
--- a/lib/components/narrative/line-itin/itin-summary.js
+++ b/lib/components/narrative/line-itin/itin-summary.js
@@ -3,10 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
-import {
-  getLegIcon
-} from '../../../util/itinerary'
-
 // TODO: make this a prop
 const defaultRouteColor = '#008'
 
@@ -34,7 +30,7 @@ const Header = styled.div`
   margin-top: -3px;
 `
 
-const ModeIcon = styled.div`
+const LegIconContainer = styled.div`
   height: 30px;
   width: 30px;
 `
@@ -75,7 +71,8 @@ const ShortName = styled.div`
 
 export default class ItinerarySummary extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   _onSummaryClicked = () => {
@@ -83,7 +80,7 @@ export default class ItinerarySummary extends Component {
   }
 
   render () {
-    const { customIcons, itinerary, timeOptions } = this.props
+    const { itinerary, LegIcon, timeOptions } = this.props
     const {
       centsToString,
       maxTNCFare,
@@ -131,7 +128,7 @@ export default class ItinerarySummary extends Component {
           }).map((leg, k) => {
             return (
               <RoutePreview key={k}>
-                <ModeIcon>{getLegIcon(leg, customIcons)}</ModeIcon>
+                <LegIconContainer><LegIcon leg={leg} /></LegIconContainer>
                 {coreUtils.itinerary.isTransit(leg.mode)
                   ? (
                     <ShortName leg={leg} >
diff --git a/lib/components/narrative/line-itin/line-itinerary.js b/lib/components/narrative/line-itin/line-itinerary.js
index c1bd53071..de4483b25 100644
--- a/lib/components/narrative/line-itin/line-itinerary.js
+++ b/lib/components/narrative/line-itin/line-itinerary.js
@@ -70,6 +70,7 @@ export default class LineItinerary extends NarrativeItinerary {
         <ItinerarySummary
           companies={companies}
           itinerary={itinerary}
+          LegIcon={LegIcon}
           timeOptions={timeOptions}
           onClick={onClick}
           customIcons={customIcons} />
diff --git a/lib/util/itinerary.js b/lib/util/itinerary.js
index 6a65f5f13..70468dbe5 100644
--- a/lib/util/itinerary.js
+++ b/lib/util/itinerary.js
@@ -1,33 +1,5 @@
 import { latLngBounds } from 'leaflet'
 import coreUtils from '@opentripplanner/core-utils'
-import React from 'react'
-
-import ModeIcon from '../components/icons/mode-icon'
-
-/**
- * Returns a react element of the desired icon. If customIcons are defined, then
- * the icon will be attempted to be used from that lookup of icons. Otherwise,
- * a ModeIcon element will be returned.
- *
- * @param  {string} iconId  A string with the desired icon ID. This icon can
- * include modes or companies or anything that is defined in the customIcons.
- * @param  {[Map<string, React.Element>]} customIcons A customized lookup of
- * icons. These are defined as part of the implementing webapp. If this lookup
- * is not defined, then the ModeIcon class will be used instead.
- * @return {React.Element}
- */
-export function getIcon (iconId, customIcons) {
-  // Check if there is a custom icon
-  if (customIcons && iconId in customIcons) {
-    return customIcons[iconId]
-  }
-
-  // Custom icon not available for the given iconId. Use the ModeIcon component
-  // to show the icon based on the iconId, but always use the default car icon
-  // for any car-based modes that didn't have custom icon
-  if (iconId && iconId.startsWith('CAR')) iconId = 'CAR'
-  return <ModeIcon mode={iconId} />
-}
 
 export function getLeafletItineraryBounds (itinerary) {
   return latLngBounds(coreUtils.itinerary.getItineraryBounds(itinerary))
@@ -39,38 +11,3 @@ export function getLeafletItineraryBounds (itinerary) {
 export function getLeafletLegBounds (leg) {
   return latLngBounds(coreUtils.itinerary.getLegBounds(leg))
 }
-
-/**
- * Return an icon depending on the leg info
- *
- * @param  {Object} leg  The leg data of an itinerary in an OTP trip plan result
- * @param  {[Object]} customIcons If defined for this webapp, the custom icons
- * consist of a lookup table of icons to return for a specific icon ID. These
- * icons typically show either companies or transport modes, but they could show
- * other icons too. See this file in trimet-mod-otp for an example setup:
- * https://github.com/ibi-group/trimet-mod-otp/blob/6a32e2142655c4f4d09a3f349b971b7505e2866a/lib/icons/index.js#L24-L55
- */
-export function getLegIcon (leg, customIcons) {
-  // check if a custom function exists for determining the icon for a leg
-  if (customIcons && typeof customIcons.customIconForLeg === 'function') {
-    // function exits, get the icon string lookup. It's possible for there to be
-    // a custom function that only returns a string for when a leg meets the
-    // criteria of the custom function
-    const customIconStr = customIcons.customIconForLeg(leg)
-    // the customIconStr could be undefined for this leg, but if it is not, then
-    // immediately return this custom icon for the leg
-    if (customIconStr) return getIcon(customIconStr, customIcons)
-  }
-  let iconStr = leg.mode
-  if (iconStr === 'CAR' && leg.rentedCar) {
-    iconStr = leg.from.networks[0]
-  } else if (iconStr === 'CAR' && leg.tncData) {
-    iconStr = leg.tncData.company
-  } else if (iconStr === 'BICYCLE' && leg.rentedBike && leg.from.networks) {
-    iconStr = leg.from.networks[0]
-  } else if (iconStr === 'MICROMOBILITY' && leg.rentedVehicle && leg.from.networks) {
-    iconStr = leg.from.networks[0]
-  }
-
-  return getIcon(iconStr, customIcons)
-}

From ac0d817a0d40ca9cf17f44a17a3ffbb8759a31ae Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 16:52:41 -0400
Subject: [PATCH 06/21] refactor(mobile): Extract and propagate LegIcon prop to
 MobileMain screen.

---
 lib/components/mobile/main.js           | 5 +++--
 lib/components/mobile/results-screen.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index 0dcd5d08a..099e3e289 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -20,6 +20,7 @@ class MobileMain extends Component {
     currentQuery: PropTypes.object,
     icons: PropTypes.object,
     itineraryClass: PropTypes.func,
+    LegIcon: PropTypes.elementType.isRequired,
     map: PropTypes.element,
     setMobileScreen: PropTypes.func,
     title: PropTypes.element,
@@ -45,7 +46,7 @@ class MobileMain extends Component {
   }
 
   render () {
-    const { icons, itineraryClass, itineraryFooter, map, title, uiState } = this.props
+    const { icons, itineraryClass, itineraryFooter, LegIcon, map, title, uiState } = this.props
 
     // check for route viewer
     if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
@@ -102,7 +103,7 @@ class MobileMain extends Component {
         return <MobileOptionsScreen icons={icons} />
 
       case MobileScreens.RESULTS_SUMMARY:
-        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} icons={icons} />
+        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} icons={icons} LegIcon={LegIcon} />
 
       default:
         return <p>Invalid mobile screen</p>
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index e62aa0a7c..aa938b3c1 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -95,7 +95,7 @@ class MobileResultsScreen extends Component {
   _toggleRealtime = () => this.props.setUseRealtimeResponse({useRealtime: !this.props.useRealtime})
 
   render () {
-    const { error, icons, itineraryClass, itineraryFooter, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
+    const { error, icons, itineraryClass, itineraryFooter, LegIcon, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
     const { expanded } = this.state
 
     const narrativeContainerStyle = expanded
@@ -205,6 +205,7 @@ class MobileResultsScreen extends Component {
             expanded={this.state.expanded}
             onClick={this._optionClicked}
             showRealtimeAnnotation={showRealtimeAnnotation}
+            LegIcon={LegIcon}
             customIcons={icons}
           />
         </div>

From 8de95a181f68d1ea81914a1a8c0c8c37d3f54480 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 17:14:18 -0400
Subject: [PATCH 07/21] refactor(default-itinerary): Extract LegIcon prop from
 DefaultItineary.

---
 lib/components/narrative/default/default-itinerary.js | 4 +++-
 lib/components/narrative/default/itinerary-details.js | 6 ++++--
 lib/components/narrative/default/itinerary-summary.js | 9 ++++-----
 lib/components/narrative/default/transit-leg.js       | 8 ++++----
 lib/components/narrative/line-itin/line-itinerary.js  | 3 +--
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index efc740c3a..fcbeca04a 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/lib/components/narrative/default/default-itinerary.js
@@ -18,6 +18,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
       expanded,
       index,
       itinerary,
+      LegIcon,
       setActiveLeg,
       setActiveStep
     } = this.props
@@ -30,7 +31,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
           <span className='title'>Itinerary {index + 1}</span>{' '}
           <span className='duration pull-right'>{formatDuration(itinerary.duration)}</span>{' '}
           <span className='arrivalTime'>{formatTime(itinerary.startTime)}—{formatTime(itinerary.endTime)}</span>
-          <ItinerarySummary itinerary={itinerary} />
+          <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
         </button>
         {(active || expanded) &&
           <div className='body'>
@@ -40,6 +41,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
               activeStep={activeStep}
               setActiveLeg={setActiveLeg}
               setActiveStep={setActiveStep}
+              LegIcon={LegIcon}
             />
             <TripDetails itinerary={itinerary} />
             <TripTools itinerary={itinerary} />
diff --git a/lib/components/narrative/default/itinerary-details.js b/lib/components/narrative/default/itinerary-details.js
index 91537b8b6..337943dcc 100644
--- a/lib/components/narrative/default/itinerary-details.js
+++ b/lib/components/narrative/default/itinerary-details.js
@@ -7,11 +7,12 @@ import TransitLeg from './transit-leg'
 
 export default class ItineraryDetails extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   render () {
-    const { itinerary, activeLeg, activeStep, setActiveLeg, setActiveStep } = this.props
+    const { itinerary, activeLeg, activeStep, LegIcon, setActiveLeg, setActiveStep } = this.props
     return (
       <div className='detail'>
         {itinerary.legs.map((leg, index) => {
@@ -22,6 +23,7 @@ export default class ItineraryDetails extends Component {
               index={index}
               key={index}
               leg={leg}
+              LegIcon={LegIcon}
               setActiveLeg={setActiveLeg} />
             : <AccessLeg
               active={legIsActive}
diff --git a/lib/components/narrative/default/itinerary-summary.js b/lib/components/narrative/default/itinerary-summary.js
index d93ff3cfb..a2e61a836 100644
--- a/lib/components/narrative/default/itinerary-summary.js
+++ b/lib/components/narrative/default/itinerary-summary.js
@@ -1,15 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import ModeIcon from '../../icons/mode-icon'
-
 export default class ItinerarySummary extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   render () {
-    const { itinerary } = this.props
+    const { itinerary, LegIcon } = this.props
 
     const blocks = []
     itinerary.legs.forEach((leg, i) => {
@@ -26,7 +25,7 @@ export default class ItinerarySummary extends Component {
       // Add the mode icon
       blocks.push(
         <div key={blocks.length} className='summary-block mode-block'>
-          <ModeIcon mode={leg.mode} />
+          <LegIcon leg={leg} />
         </div>
       )
 
diff --git a/lib/components/narrative/default/transit-leg.js b/lib/components/narrative/default/transit-leg.js
index 543072a97..44b826ecd 100644
--- a/lib/components/narrative/default/transit-leg.js
+++ b/lib/components/narrative/default/transit-leg.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import Icon from '../icon'
-import ModeIcon from '../../icons/mode-icon'
 import ViewTripButton from '../../viewers/view-trip-button'
 import ViewStopButton from '../../viewers/view-stop-button'
 
@@ -12,7 +11,8 @@ const { formatDuration, formatTime } = coreUtils.time
 
 export default class TransitLeg extends Component {
   static propTypes = {
-    itinerary: PropTypes.object
+    itinerary: PropTypes.object,
+    LegIcon: PropTypes.elementType.isRequired
   }
 
   constructor (props) {
@@ -35,7 +35,7 @@ export default class TransitLeg extends Component {
   }
 
   render () {
-    const { active, index, leg } = this.props
+    const { active, index, leg, LegIcon } = this.props
     const { expanded } = this.state
     const numStops = leg.to.stopIndex - leg.from.stopIndex - 1
 
@@ -47,7 +47,7 @@ export default class TransitLeg extends Component {
           onClick={(e) => this._onLegClick(e, leg, index)}
         >
           <div className='mode-icon-container'>
-            <ModeIcon mode={leg.mode} />
+            <LegIcon leg={leg} />
           </div>
           <div className='route-name'>
             <div>
diff --git a/lib/components/narrative/line-itin/line-itinerary.js b/lib/components/narrative/line-itin/line-itinerary.js
index de4483b25..2aa097024 100644
--- a/lib/components/narrative/line-itin/line-itinerary.js
+++ b/lib/components/narrative/line-itin/line-itinerary.js
@@ -46,7 +46,6 @@ export default class LineItinerary extends NarrativeItinerary {
     const {
       active,
       companies,
-      customIcons,
       expanded,
       itinerary,
       itineraryFooter,
@@ -73,7 +72,7 @@ export default class LineItinerary extends NarrativeItinerary {
           LegIcon={LegIcon}
           timeOptions={timeOptions}
           onClick={onClick}
-          customIcons={customIcons} />
+        />
         {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}
         {active || expanded
           ? <ItineraryBody itinerary={itinerary} LegIcon={LegIcon} />

From 7512b6e21b6f5aa5ba62b75baedcbc6e8ec2d0ee Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 17:35:00 -0400
Subject: [PATCH 08/21] refactor(SettingsSelectorPanel): Extract and propagate
 ModeIcon prop from SettingsSelectorPanel.

---
 example.js                                               | 5 +++--
 lib/components/form/connected-settings-selector-panel.js | 6 +++---
 lib/components/form/tabbed-form-panel.js                 | 6 +++---
 lib/components/mobile/main.js                            | 3 ++-
 lib/components/mobile/options-screen.js                  | 6 +++---
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/example.js b/example.js
index 1b273acb9..2a4ac85e0 100644
--- a/example.js
+++ b/example.js
@@ -1,6 +1,6 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
-import { Ferry, TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
+import { AerialTram, Ferry, TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
 
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
@@ -28,6 +28,7 @@ import {
 import otpConfig from './config.yml'
 
 const MyIcon = () => <Ferry />
+const ModeIcon = () => <AerialTram />
 
 // create an initial query for demo/testing purposes
 const initialQuery = {
@@ -93,7 +94,7 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+      <MobileMain LegIcon={MyIcon} ModeIcon={ModeIcon} map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
     )
 
     /** the main webapp **/
diff --git a/lib/components/form/connected-settings-selector-panel.js b/lib/components/form/connected-settings-selector-panel.js
index ffa4122e1..46980caf2 100644
--- a/lib/components/form/connected-settings-selector-panel.js
+++ b/lib/components/form/connected-settings-selector-panel.js
@@ -12,13 +12,13 @@ import UserTripSettings from './user-trip-settings'
 
 class ConnectedSettingsSelectorPanel extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType
   }
 
   render () {
     const {
       config,
-      icons,
+      ModeIcon,
       query,
       setQueryParam,
       showUserSettings
@@ -31,7 +31,7 @@ class ConnectedSettingsSelectorPanel extends Component {
 
           <StyledSettingsSelectorPanel
             className='settings-selector-panel'
-            icons={icons}
+            ModeIcon={ModeIcon}
             queryParams={query}
             supportedModes={config.modes}
             supportedCompanies={config.companies}
diff --git a/lib/components/form/tabbed-form-panel.js b/lib/components/form/tabbed-form-panel.js
index c41c5650d..2452eadb4 100644
--- a/lib/components/form/tabbed-form-panel.js
+++ b/lib/components/form/tabbed-form-panel.js
@@ -12,7 +12,7 @@ import { setMainPanelContent } from '../../actions/ui'
 
 class TabbedFormPanel extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   _onEditDateTimeClick = () => {
@@ -28,7 +28,7 @@ class TabbedFormPanel extends Component {
   _onHideClick = () => this.props.setMainPanelContent(null)
 
   render () {
-    const { icons, mainPanelContent } = this.props
+    const { ModeIcon, mainPanelContent } = this.props
 
     return (
       <div className='tabbed-form-panel'>
@@ -49,7 +49,7 @@ class TabbedFormPanel extends Component {
         {(mainPanelContent === 'EDIT_DATETIME' || mainPanelContent === 'EDIT_SETTINGS') && (
           <div className='active-panel'>
             {mainPanelContent === 'EDIT_DATETIME' && (<DateTimeModal />)}
-            {mainPanelContent === 'EDIT_SETTINGS' && (<ConnectedSettingsSelectorPanel icons={icons} />)}
+            {mainPanelContent === 'EDIT_SETTINGS' && (<ConnectedSettingsSelectorPanel ModeIcon={ModeIcon} />)}
             <div className='hide-button-row'>
               <Button className='hide-button clear-button-formatting' onClick={this._onHideClick}>
                 <i className='fa fa-caret-up' /> Hide Settings
diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index 099e3e289..07a0ab848 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -21,6 +21,7 @@ class MobileMain extends Component {
     icons: PropTypes.object,
     itineraryClass: PropTypes.func,
     LegIcon: PropTypes.elementType.isRequired,
+    ModeIcon: PropTypes.elementType.isRequired,
     map: PropTypes.element,
     setMobileScreen: PropTypes.func,
     title: PropTypes.element,
@@ -100,7 +101,7 @@ class MobileMain extends Component {
         return <MobileDateTimeScreen />
 
       case MobileScreens.SET_OPTIONS:
-        return <MobileOptionsScreen icons={icons} />
+        return <MobileOptionsScreen ModeIcon={ModeIcon} />
 
       case MobileScreens.RESULTS_SUMMARY:
         return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} icons={icons} LegIcon={LegIcon} />
diff --git a/lib/components/mobile/options-screen.js b/lib/components/mobile/options-screen.js
index 8e20f4331..cc2549b4b 100644
--- a/lib/components/mobile/options-screen.js
+++ b/lib/components/mobile/options-screen.js
@@ -11,7 +11,7 @@ import { MobileScreens, setMobileScreen } from '../../actions/ui'
 
 class MobileOptionsScreen extends Component {
   static propTypes = {
-    icons: PropTypes.object
+    ModeIcon: PropTypes.elementType
   }
 
   _planTripClicked = () => {
@@ -19,7 +19,7 @@ class MobileOptionsScreen extends Component {
   }
 
   render () {
-    const { icons } = this.props
+    const { ModeIcon } = this.props
 
     return (
       <MobileContainer>
@@ -30,7 +30,7 @@ class MobileOptionsScreen extends Component {
         />
 
         <div className='options-main-content mobile-padding'>
-          <ConnectedSettingsSelectorPanel icons={icons} />
+          <ConnectedSettingsSelectorPanel ModeIcon={ModeIcon} />
         </div>
 
         <div className='options-lower-tray mobile-padding'>

From 9a70180d77c80048465f415c8fae506637afd45c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 17:58:17 -0400
Subject: [PATCH 09/21] refactor: Remove old customIcons and icons props.

---
 example.js                                           | 12 ++++++------
 lib/components/app/default-main-panel.js             |  6 ++----
 lib/components/form/default-search-form.js           | 10 ++++------
 lib/components/form/settings-preview.js              |  1 -
 lib/components/mobile/main.js                        |  6 ++----
 lib/components/mobile/results-screen.js              |  3 +--
 lib/components/mobile/search-screen.js               |  5 -----
 .../narrative/narrative-routing-results.js           |  4 +---
 8 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/example.js b/example.js
index 2a4ac85e0..28b56ac7e 100644
--- a/example.js
+++ b/example.js
@@ -27,8 +27,8 @@ import {
 // load the OTP configuration
 import otpConfig from './config.yml'
 
-const MyIcon = () => <Ferry />
-const ModeIcon = () => <AerialTram />
+const MyLegIcon = () => <Ferry />
+const MyModeIcon = () => <AerialTram />
 
 // create an initial query for demo/testing purposes
 const initialQuery = {
@@ -82,7 +82,7 @@ class OtpRRExample extends Component {
         <Grid>
           <Row className='main-row'>
             <Col sm={6} md={4} className='sidebar'>
-              <DefaultMainPanel LegIcon={MyIcon} />
+              <DefaultMainPanel LegIcon={MyLegIcon} ModeIcon={MyModeIcon} />
             </Col>
             <Col sm={6} md={8} className='map-container'>
               <Map />
@@ -94,7 +94,7 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain LegIcon={MyIcon} ModeIcon={ModeIcon} map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+      <MobileMain LegIcon={MyLegIcon} ModeIcon={MyModeIcon} map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
     )
 
     /** the main webapp **/
@@ -102,8 +102,8 @@ class OtpRRExample extends Component {
       <ResponsiveWebapp
         desktopView={desktopView}
         mobileView={mobileView}
-        LegIcon={TriMetLegIcon}
-        ModeIcon={TriMetModeIcon}
+        LegIcon={MyLegIcon}
+        ModeIcon={MyModeIcon}
       />
     )
   }
diff --git a/lib/components/app/default-main-panel.js b/lib/components/app/default-main-panel.js
index 198c240a7..e200c01ef 100644
--- a/lib/components/app/default-main-panel.js
+++ b/lib/components/app/default-main-panel.js
@@ -14,11 +14,11 @@ class DefaultMainPanel extends Component {
     const {
       activeSearch,
       currentQuery,
-      customIcons,
       itineraryClass,
       itineraryFooter,
       LegIcon,
       mainPanelContent,
+      ModeIcon,
       showUserSettings
     } = this.props
     const showPlanTripButton = mainPanelContent === 'EDIT_DATETIME' ||
@@ -36,7 +36,7 @@ class DefaultMainPanel extends Component {
           paddingBottom: 15,
           overflow: 'auto'
         }}>
-          <DefaultSearchForm icons={customIcons} />
+          <DefaultSearchForm ModeIcon={ModeIcon} />
           {!activeSearch && !showPlanTripButton && showUserSettings &&
             <UserSettings />
           }
@@ -44,9 +44,7 @@ class DefaultMainPanel extends Component {
             <NarrativeRoutingResults
               itineraryClass={itineraryClass}
               itineraryFooter={itineraryFooter}
-              customIcons={customIcons}
               LegIcon={LegIcon}
-              // ModeIcon={ModeIcon}
             />
           </div>
         </div>
diff --git a/lib/components/form/default-search-form.js b/lib/components/form/default-search-form.js
index 98be08f8a..64dde53d2 100644
--- a/lib/components/form/default-search-form.js
+++ b/lib/components/form/default-search-form.js
@@ -4,16 +4,14 @@ import React, { Component } from 'react'
 import LocationField from './connected-location-field'
 import TabbedFormPanel from './tabbed-form-panel'
 import SwitchButton from './switch-button'
-import defaultIcons from '../icons'
 
 export default class DefaultSearchForm extends Component {
   static propTypes = {
-    icons: PropTypes.object,
-    mobile: PropTypes.bool
+    mobile: PropTypes.bool,
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   static defaultProps = {
-    icons: defaultIcons,
     showFrom: true,
     showTo: true
   }
@@ -27,7 +25,7 @@ export default class DefaultSearchForm extends Component {
   }
 
   render () {
-    const { icons, mobile } = this.props
+    const { mobile, ModeIcon } = this.props
     const actionText = mobile ? 'tap' : 'click'
 
     return (
@@ -50,7 +48,7 @@ export default class DefaultSearchForm extends Component {
           </div>
         </div>
 
-        <TabbedFormPanel icons={icons} />
+        <TabbedFormPanel ModeIcon={ModeIcon} />
       </div>
     )
   }
diff --git a/lib/components/form/settings-preview.js b/lib/components/form/settings-preview.js
index 337c5d2b6..b39baeda6 100644
--- a/lib/components/form/settings-preview.js
+++ b/lib/components/form/settings-preview.js
@@ -10,7 +10,6 @@ class SettingsPreview extends Component {
     caret: PropTypes.string,
     compressed: PropTypes.bool,
     editButtonText: PropTypes.element,
-    icons: PropTypes.object,
     showCaret: PropTypes.bool,
     onClick: PropTypes.func,
 
diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index 07a0ab848..e9a0ac148 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -18,7 +18,6 @@ import { getActiveItinerary } from '../../util/state'
 class MobileMain extends Component {
   static propTypes = {
     currentQuery: PropTypes.object,
-    icons: PropTypes.object,
     itineraryClass: PropTypes.func,
     LegIcon: PropTypes.elementType.isRequired,
     ModeIcon: PropTypes.elementType.isRequired,
@@ -47,7 +46,7 @@ class MobileMain extends Component {
   }
 
   render () {
-    const { icons, itineraryClass, itineraryFooter, LegIcon, map, title, uiState } = this.props
+    const { itineraryClass, itineraryFooter, LegIcon, map, ModeIcon, title, uiState } = this.props
 
     // check for route viewer
     if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
@@ -75,7 +74,6 @@ class MobileMain extends Component {
       case MobileScreens.SEARCH_FORM:
         return (
           <MobileSearchScreen
-            icons={icons}
             map={map}
             newScreen={this.newScreen}
           />
@@ -104,7 +102,7 @@ class MobileMain extends Component {
         return <MobileOptionsScreen ModeIcon={ModeIcon} />
 
       case MobileScreens.RESULTS_SUMMARY:
-        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} icons={icons} LegIcon={LegIcon} />
+        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} LegIcon={LegIcon} />
 
       default:
         return <p>Invalid mobile screen</p>
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index aa938b3c1..007983ebb 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -95,7 +95,7 @@ class MobileResultsScreen extends Component {
   _toggleRealtime = () => this.props.setUseRealtimeResponse({useRealtime: !this.props.useRealtime})
 
   render () {
-    const { error, icons, itineraryClass, itineraryFooter, LegIcon, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
+    const { error, itineraryClass, itineraryFooter, LegIcon, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
     const { expanded } = this.state
 
     const narrativeContainerStyle = expanded
@@ -206,7 +206,6 @@ class MobileResultsScreen extends Component {
             onClick={this._optionClicked}
             showRealtimeAnnotation={showRealtimeAnnotation}
             LegIcon={LegIcon}
-            customIcons={icons}
           />
         </div>
 
diff --git a/lib/components/mobile/search-screen.js b/lib/components/mobile/search-screen.js
index bfa2952cf..b21a56693 100644
--- a/lib/components/mobile/search-screen.js
+++ b/lib/components/mobile/search-screen.js
@@ -17,9 +17,7 @@ import { MobileScreens, setMobileScreen } from '../../actions/ui'
 
 class MobileSearchScreen extends Component {
   static propTypes = {
-    icons: PropTypes.object,
     map: PropTypes.element,
-
     setMobileScreen: PropTypes.func
   }
 
@@ -44,8 +42,6 @@ class MobileSearchScreen extends Component {
   }
 
   render () {
-    const { icons } = this.props
-
     return (
       <MobileContainer>
         <MobileNavigationBar headerText='Plan Your Trip' />
@@ -75,7 +71,6 @@ class MobileSearchScreen extends Component {
             <Col xs={6}>
               <SettingsPreview
                 onClick={this._expandOptionsClicked}
-                icons={icons}
                 compressed
               />
             </Col>
diff --git a/lib/components/narrative/narrative-routing-results.js b/lib/components/narrative/narrative-routing-results.js
index 05b7442ec..f16634d26 100644
--- a/lib/components/narrative/narrative-routing-results.js
+++ b/lib/components/narrative/narrative-routing-results.js
@@ -11,7 +11,6 @@ import { setMainPanelContent } from '../../actions/ui'
 
 class NarrativeRoutingResults extends Component {
   static propTypes = {
-    customIcons: PropTypes.object,
     itineraryClass: PropTypes.func,
     LegIcon: PropTypes.elementType.isRequired,
     routingType: PropTypes.string
@@ -26,7 +25,7 @@ class NarrativeRoutingResults extends Component {
   }
 
   render () {
-    const { customIcons, error, itineraryClass, itineraryFooter, LegIcon, pending, itineraries, mainPanelContent } = this.props
+    const { error, itineraryClass, itineraryFooter, LegIcon, pending, itineraries, mainPanelContent } = this.props
     if (pending) return <Loading />
     if (error) return <ErrorMessage />
     if (mainPanelContent) return null
@@ -37,7 +36,6 @@ class NarrativeRoutingResults extends Component {
         itineraryClass={itineraryClass}
         itineraryFooter={itineraryFooter}
         itineraries={itineraries}
-        customIcons={customIcons}
         LegIcon={LegIcon}
       />
     )

From 685a484cb8acfce476558ba7842fb635c16f1fbc Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 18:31:40 -0400
Subject: [PATCH 10/21] docs(example.js): Add a note for testing.

---
 example.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/example.js b/example.js
index 28b56ac7e..dcfcdb667 100644
--- a/example.js
+++ b/example.js
@@ -27,8 +27,8 @@ import {
 // load the OTP configuration
 import otpConfig from './config.yml'
 
-const MyLegIcon = () => <Ferry />
-const MyModeIcon = () => <AerialTram />
+const MyLegIcon = TriMetLegIcon // For testing, you can use () => <Ferry />
+const MyModeIcon = () => TriMetModeIcon // For testing, you can use () => <AerialTram />
 
 // create an initial query for demo/testing purposes
 const initialQuery = {
@@ -103,7 +103,6 @@ class OtpRRExample extends Component {
         desktopView={desktopView}
         mobileView={mobileView}
         LegIcon={MyLegIcon}
-        ModeIcon={MyModeIcon}
       />
     )
   }

From 02fef2765dd684acadfbdcf0d1676853a0cdd4db Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Apr 2020 18:36:29 -0400
Subject: [PATCH 11/21] refactor(ModeIcon prop): Make ModeIcon prop required.

---
 lib/components/form/connected-settings-selector-panel.js | 2 +-
 lib/components/mobile/options-screen.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/form/connected-settings-selector-panel.js b/lib/components/form/connected-settings-selector-panel.js
index 46980caf2..a64de2a8e 100644
--- a/lib/components/form/connected-settings-selector-panel.js
+++ b/lib/components/form/connected-settings-selector-panel.js
@@ -12,7 +12,7 @@ import UserTripSettings from './user-trip-settings'
 
 class ConnectedSettingsSelectorPanel extends Component {
   static propTypes = {
-    ModeIcon: PropTypes.elementType
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   render () {
diff --git a/lib/components/mobile/options-screen.js b/lib/components/mobile/options-screen.js
index cc2549b4b..3b3b3fbf1 100644
--- a/lib/components/mobile/options-screen.js
+++ b/lib/components/mobile/options-screen.js
@@ -11,7 +11,7 @@ import { MobileScreens, setMobileScreen } from '../../actions/ui'
 
 class MobileOptionsScreen extends Component {
   static propTypes = {
-    ModeIcon: PropTypes.elementType
+    ModeIcon: PropTypes.elementType.isRequired
   }
 
   _planTripClicked = () => {

From 94982a1bab12fd813e06492e305df56b2898cb5a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 May 2020 11:11:30 -0400
Subject: [PATCH 12/21] fix(example): Fix syntax error

---
 example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example.js b/example.js
index dcfcdb667..658604534 100644
--- a/example.js
+++ b/example.js
@@ -28,7 +28,7 @@ import {
 import otpConfig from './config.yml'
 
 const MyLegIcon = TriMetLegIcon // For testing, you can use () => <Ferry />
-const MyModeIcon = () => TriMetModeIcon // For testing, you can use () => <AerialTram />
+const MyModeIcon = TriMetModeIcon // For testing, you can use () => <AerialTram />
 
 // create an initial query for demo/testing purposes
 const initialQuery = {

From 2842fdc4cbef4168838cab07fbb5c0e62b4ddad9 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 May 2020 14:28:44 -0400
Subject: [PATCH 13/21] style: Change style and add comment per PR feedback.

---
 example.js                              | 24 +++++++++++++++++++++---
 lib/components/mobile/main.js           | 10 ++++++++--
 lib/components/mobile/results-screen.js | 12 +++++++++++-
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/example.js b/example.js
index 658604534..b70e95a32 100644
--- a/example.js
+++ b/example.js
@@ -27,8 +27,21 @@ import {
 // load the OTP configuration
 import otpConfig from './config.yml'
 
-const MyLegIcon = TriMetLegIcon // For testing, you can use () => <Ferry />
-const MyModeIcon = TriMetModeIcon // For testing, you can use () => <AerialTram />
+// Define icon sets for modes.
+const MyLegIcon = TriMetLegIcon
+const MyModeIcon = TriMetModeIcon
+/**
+ * For testing, try uncommenting the following two statements (and comment the two above),
+ * and see how the icons get changed in:
+ * - the mode options panel (select transit, bike+transit, etc.)
+ * - the itinerary narrative (step-by-step directions).
+ *
+ * For more advanced testing, you can replicate and customize components and observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ */
+// const MyLegIcon = () => <Ferry />
+// const MyModeIcon = () => <AerialTram />
 
 // create an initial query for demo/testing purposes
 const initialQuery = {
@@ -94,7 +107,12 @@ class OtpRRExample extends Component {
 
     /** mobile view **/
     const mobileView = (
-      <MobileMain LegIcon={MyLegIcon} ModeIcon={MyModeIcon} map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+      <MobileMain
+        LegIcon={MyLegIcon}
+        ModeIcon={MyModeIcon}
+        map={<Map />}
+        title={<div className='navbar-title'>OpenTripPlanner</div>}
+      />
     )
 
     /** the main webapp **/
diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index e9a0ac148..abec5db02 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -102,8 +102,14 @@ class MobileMain extends Component {
         return <MobileOptionsScreen ModeIcon={ModeIcon} />
 
       case MobileScreens.RESULTS_SUMMARY:
-        return <MobileResultsScreen map={map} itineraryClass={itineraryClass} itineraryFooter={itineraryFooter} LegIcon={LegIcon} />
-
+        return (
+          <MobileResultsScreen
+            itineraryClass={itineraryClass}
+            itineraryFooter={itineraryFooter}
+            LegIcon={LegIcon}
+            map={map}
+          />
+        )
       default:
         return <p>Invalid mobile screen</p>
     }
diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index 007983ebb..3c6b76917 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -95,7 +95,17 @@ class MobileResultsScreen extends Component {
   _toggleRealtime = () => this.props.setUseRealtimeResponse({useRealtime: !this.props.useRealtime})
 
   render () {
-    const { error, itineraryClass, itineraryFooter, LegIcon, query, realtimeEffects, resultCount, useRealtime, activeItineraryIndex } = this.props
+    const {
+      error,
+      itineraryClass,
+      itineraryFooter,
+      LegIcon,
+      query,
+      realtimeEffects,
+      resultCount,
+      useRealtime,
+      activeItineraryIndex
+    } = this.props
     const { expanded } = this.state
 
     const narrativeContainerStyle = expanded

From 9219719bac7f92f1d7ead440e50f9e218947b3d5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 11 May 2020 15:45:50 -0400
Subject: [PATCH 14/21] refactor(package): Upgrade @opentripplanner packages.
 Update example.js examples.

---
 example.js   |  59 ++++++++++++--
 package.json |  40 +++++-----
 yarn.lock    | 220 +++++++++++++++++++++++++--------------------------
 3 files changed, 182 insertions(+), 137 deletions(-)

diff --git a/example.js b/example.js
index b70e95a32..0dd37c00c 100644
--- a/example.js
+++ b/example.js
@@ -1,6 +1,16 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
-import { AerialTram, Ferry, TriMetModeIcon, TriMetLegIcon } from '@opentripplanner/icons'
+
+// The commented imports below are used in the custom icons example.
+import {
+  // ClassicBus,
+  // ClassicGondola,
+  ClassicLegIcon,
+  ClassicModeIcon,
+  // Ferry,
+  // LegIcon,
+  // StandardGondola
+} from '@opentripplanner/icons'
 
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
@@ -28,21 +38,56 @@ import {
 import otpConfig from './config.yml'
 
 // Define icon sets for modes.
-const MyLegIcon = TriMetLegIcon
-const MyModeIcon = TriMetModeIcon
+const MyLegIcon = ClassicLegIcon
+const MyModeIcon = ClassicModeIcon
+
 /**
  * For testing, try uncommenting the following two statements (and comment the two above),
  * and see how the icons get changed in:
  * - the mode options panel (select transit, bike+transit, etc.)
  * - the itinerary narrative (step-by-step directions).
- *
- * For more advanced testing, you can replicate and customize components and observe the change in icons.
- * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
- * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
  */
 // const MyLegIcon = () => <Ferry />
 // const MyModeIcon = () => <AerialTram />
 
+/** 
+ * For more advanced users, you can replicate and customize components and observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ * The example below shuffles some icons around for demonstration purposes.
+ */
+/*
+const CustomTransitIcon = Ferry
+const CustomRailIcon = ClassicGondola
+const CustomStreetcarIcon = StandardGondola
+const CustomBikeRentalIcon = ClassicBus
+
+const MyModeIcon = ({ mode, ...props }) => {
+  if (!mode) return null;
+  switch (mode.toLowerCase()) {
+    // Place custom icons for each mode here.
+    case "transit":
+      return <CustomTransitIcon {...props} />
+    case "rail":
+      return <CustomRailIcon {...props} />
+    default:
+      return <ClassicModeIcon mode={mode} {...props} />
+  }
+}
+
+const MyLegIcon = ({ leg, ...props }) => {
+  if (
+    leg.routeLongName &&
+    leg.routeLongName.startsWith('MAX')
+  ) {
+    return <CustomStreetcarIcon />
+  } else if (leg.rentedBike) {
+    return <CustomBikeRentalIcon />
+  }
+  return <LegIcon leg={leg} ModeIcon={MyModeIcon} {...props} />
+}
+*/
+
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {
diff --git a/package.json b/package.json
index f2ac610dc..8a74f2799 100644
--- a/package.json
+++ b/package.json
@@ -29,26 +29,26 @@
   "dependencies": {
     "@conveyal/lonlat": "^1.1.0",
     "@mapbox/polyline": "^0.2.0",
-    "@opentripplanner/base-map": "^0.0.20",
-    "@opentripplanner/core-utils": "^0.0.20",
-    "@opentripplanner/endpoints-overlay": "^0.0.20",
-    "@opentripplanner/from-to-location-picker": "^0.0.20",
-    "@opentripplanner/geocoder": "^0.0.20",
-    "@opentripplanner/humanize-distance": "^0.0.20",
-    "@opentripplanner/icons": "^0.0.20",
-    "@opentripplanner/itinerary-body": "^0.0.20",
-    "@opentripplanner/location-field": "^0.0.20",
-    "@opentripplanner/location-icon": "^0.0.20",
-    "@opentripplanner/park-and-ride-overlay": "^0.0.20",
-    "@opentripplanner/printable-itinerary": "^0.0.20",
-    "@opentripplanner/route-viewer-overlay": "^0.0.20",
-    "@opentripplanner/stop-viewer-overlay": "^0.0.20",
-    "@opentripplanner/stops-overlay": "^0.0.20",
-    "@opentripplanner/transitive-overlay": "^0.0.20",
-    "@opentripplanner/trip-details": "^0.0.20",
-    "@opentripplanner/trip-form": "^0.0.20",
-    "@opentripplanner/trip-viewer-overlay": "^0.0.20",
-    "@opentripplanner/vehicle-rental-overlay": "^0.0.20",
+    "@opentripplanner/base-map": "^0.0.21",
+    "@opentripplanner/core-utils": "^0.0.21",
+    "@opentripplanner/endpoints-overlay": "^0.0.21",
+    "@opentripplanner/from-to-location-picker": "^0.0.21",
+    "@opentripplanner/geocoder": "^0.0.21",
+    "@opentripplanner/humanize-distance": "^0.0.21",
+    "@opentripplanner/icons": "^0.0.21",
+    "@opentripplanner/itinerary-body": "^0.0.21",
+    "@opentripplanner/location-field": "^0.0.21",
+    "@opentripplanner/location-icon": "^0.0.21",
+    "@opentripplanner/park-and-ride-overlay": "^0.0.21",
+    "@opentripplanner/printable-itinerary": "^0.0.21",
+    "@opentripplanner/route-viewer-overlay": "^0.0.21",
+    "@opentripplanner/stop-viewer-overlay": "^0.0.21",
+    "@opentripplanner/stops-overlay": "^0.0.21",
+    "@opentripplanner/transitive-overlay": "^0.0.21",
+    "@opentripplanner/trip-details": "^0.0.21",
+    "@opentripplanner/trip-form": "^0.0.21",
+    "@opentripplanner/trip-viewer-overlay": "^0.0.21",
+    "@opentripplanner/vehicle-rental-overlay": "^0.0.21",
     "@turf/along": "^6.0.1",
     "bootstrap": "^3.3.7",
     "bowser": "^1.9.3",
diff --git a/yarn.lock b/yarn.lock
index e2ad479a9..97a5b88ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1331,18 +1331,18 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@opentripplanner/base-map@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-0.0.20.tgz#35f1b81179080e5b2573a67b9ce9408dde390bd2"
-  integrity sha512-FR9C93sou4d+3b7wytDsMRZQ/Zeu7ZJGAoQ8WiHlPnCIS/grRTWeihQysK1zga9JAerpBocvIvLc2pF3DyJAIw==
+"@opentripplanner/base-map@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/base-map/-/base-map-0.0.21.tgz#5464e0442023c82a158add051389636e15208f27"
+  integrity sha512-/SHActy1z2GWfsXj6CPyJk33noU30KCALOnRxq69xYazVJw5k6Ih57ku7ZfSdxygmEEQXS/LTGsPvnqdLzkObQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/core-utils@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-0.0.20.tgz#057914abe4f395cc9bb5468a97b620ad6e46efe4"
-  integrity sha512-nwUk/FCJ2X68SM8zN53SFGD2x3ooMirJ2JRcA22U2v8hsEU6NywaSiDDvG1/kjC+WWHbHSNLP5VACSnFc7UAWA==
+"@opentripplanner/core-utils@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-0.0.21.tgz#89cc5d54a0898132bad463b43e4195028ffa0686"
+  integrity sha512-wsoRfOMUsLui+8i8savx/5+/m64gyoQF1izJMFtvytnXMVr6gQavjl36pW2xejUg9xkyIjrfEvkO7paCXqQ23w==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
     "@turf/along" "^6.0.1"
@@ -1353,172 +1353,172 @@
     prop-types "^15.7.2"
     qs "^6.9.1"
 
-"@opentripplanner/endpoints-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-0.0.20.tgz#386835b7ab0fb18d68eb5035ab4984f55717363d"
-  integrity sha512-1miuJBESWRBXR5TH2EUrUyn/zKeTngcoitWfWUbX322rRv3D6soNd7BdOSqQ1waxKHobqWKC1Tq/Az2RbfZhIg==
+"@opentripplanner/endpoints-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/endpoints-overlay/-/endpoints-overlay-0.0.21.tgz#6b709aac4948ee153ef24438af60c75218a56ee7"
+  integrity sha512-dZtI8RbngE/wzgjvXy8cHolAt1yw0OvoVSjF5pxjoGuFu3j0Oyo23G2/Ls+FbHgr8StBaUovVoMcm7viq50RUA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
 
-"@opentripplanner/from-to-location-picker@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-0.0.20.tgz#e945a286ae39077b3fbd3ddf1f31cbb38ea4a067"
-  integrity sha512-b+bLWcDu9y5jYUz078isXGnyhTlO0gSXBTtYoEOsm0Y7RNDIfvrytKDxSKAyPnaRnaftkbsUcXTmUfUTXCw2PQ==
+"@opentripplanner/from-to-location-picker@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/from-to-location-picker/-/from-to-location-picker-0.0.21.tgz#0166fc9afbff15e4fb2fa06b85249b2e22994596"
+  integrity sha512-aaTpm5ZZNetuRdWZCYEqR5ry8ToKAOHA1+PLequAEA8MzMqsz3mlmqroIEQGPW5Ij2ajvUxRqCGIi9j7boaViQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/geocoder@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-0.0.20.tgz#479eed134f4bb68cde9442c049b2630e5eaa499c"
-  integrity sha512-EkTLmdrBzw0ABFiOrJCEM6ajK5D2T+KFD3FcTowTi7e1esGWpXzEDb7VvbobMaMhwDCztenv1s0APd9J9o0B0g==
+"@opentripplanner/geocoder@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-0.0.21.tgz#3d7532587c0a92a1852daf2b9320930dbe23fe87"
+  integrity sha512-+ukQNTTYR65b2d3me2LutjaVfiBYdU7Y3QhbE9fDqT429b4b9cCvrIKQjlq2y7TnAKnSoqgf9r9JR0hMi3Q+TA==
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.2"
     "@conveyal/lonlat" "^1.4.0"
     isomorphic-mapzen-search "^1.4.1"
     lodash.memoize "^4.1.2"
 
-"@opentripplanner/humanize-distance@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-0.0.20.tgz#06eab437c92b8eea5d9596957d7fbcc8c2bd4500"
-  integrity sha512-m+3gpoSDGY13f8WRIx8fSkVi6Qhv23fG3zbY6oymFQ+j5bMPow4f6XJO2nIY+pI0EbipPEKWbpeRwmXZWlWspg==
+"@opentripplanner/humanize-distance@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-0.0.21.tgz#2f7fd209fcaec3d09a8943152c0f36d34982dec4"
+  integrity sha512-7EO1RcTJ3QXCZkSxaWiV7pglxV/Fb6liUblqEZqvPmHPJq3zZ7u5p5pHD/w1McQyFmCLhCulIPmpke1uZ/+25g==
 
-"@opentripplanner/icons@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-0.0.20.tgz#951c75ed093fb9d74e4b4fc7d2af45ced446b856"
-  integrity sha512-vV81bsB7b3XN8lED3A55Qrjx84lUJyiVY99f13W1oqRlaP1xFIk4MSspg6hHoyanLiZBGp+vdcwWYnKJk4LLtw==
+"@opentripplanner/icons@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/icons/-/icons-0.0.21.tgz#fc72c834c6002db81f62a5c5ada22882636b8bc6"
+  integrity sha512-o41BKUQSbs+H8AJ1FfrlBthxquVtnl8X2GHGVuPyfZCj21nxifD0l7aUrmzzxdCCSgJPvHLuxdq+Nw8QXF6u/g==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-0.0.20.tgz#0f24a4ac0ccd4de21451c5255ec673450bc8198c"
-  integrity sha512-u3MQUg3SAYs5hMHf2sIPZDF8VLHmeWpXaDW33Pi7WJyn5fJ5AYXsdisEwc87+inOoG0zB6d5usTUkB8Ldlx/rA==
+"@opentripplanner/itinerary-body@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-0.0.21.tgz#8a2eeb3146b92803609d84395f137fb187646c78"
+  integrity sha512-4RcoZpYTDgCA5Kcm2LXQbnC8qkU9jqcEULD+g50fBmuLIqeMarJt7LqsqlvmwPaukv0SuYUBoCnRmFJ4N1n4VA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
-    "@opentripplanner/icons" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
+    "@opentripplanner/icons" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     currency-formatter "^1.5.5"
     moment "^2.24.0"
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
     velocity-react "^1.4.3"
 
-"@opentripplanner/location-field@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-0.0.20.tgz#f2b019bde39dfdb570789afc078e1bb1808941d0"
-  integrity sha512-+SC9IHpJ49KzvAw03IIH8HlvRcGx9kNGdIdJ6PtGSNCsOd/91/LkfKTdLeI/Z24axWQpdSPM6BhGCyilIoVqfg==
+"@opentripplanner/location-field@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-0.0.21.tgz#8fbe7c020fa151cbf4b05e658a03b9bb5f3f413d"
+  integrity sha512-DFhGkblCRJhFi3PRCpSAPBhpgh1Vs18JSrXZ4/PrpIOF81LupksmWx3vdlT7+2LZQk56diCKC/qNZKnp8qhgQA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/geocoder" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
-    "@opentripplanner/location-icon" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/geocoder" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
+    "@opentripplanner/location-icon" "^0.0.21"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
     throttle-debounce "^2.1.0"
 
-"@opentripplanner/location-icon@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-icon/-/location-icon-0.0.20.tgz#8f88522cec37e0c37b051421ba315e2065d464d7"
-  integrity sha512-TTtoV7s4moNQ++h1TRQhFFTRueRfoNgVnV8fnLhE77T0rf6UXHDhbZNlt1nm/wyHcYF1MbTynQmZmID85V9UMg==
+"@opentripplanner/location-icon@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-icon/-/location-icon-0.0.21.tgz#296e0a8f1c06abbff03d04167468f04469060638"
+  integrity sha512-sliDW9jn0wL3oKViJ0GigdS9qfgm89qj5yGR8gd454bp7L1DH/xaZzjc8TxpbAGb4+Z9trhFwWyqkRd3yz5BMg==
   dependencies:
     styled-icons "^9.1.0"
 
-"@opentripplanner/park-and-ride-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-0.0.20.tgz#0342a798f9a147143f8821062d477751d6145999"
-  integrity sha512-SiJMZnhD8mG8771pbryfYa+a8T+UnBoFMocu6SB4S911CnRwoFDnaMNosIH6hVrzZquisBWnrsTdJHRMnCkI3w==
+"@opentripplanner/park-and-ride-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/park-and-ride-overlay/-/park-and-ride-overlay-0.0.21.tgz#af8e2d9be92610936ca59919c67a9ca1b1405fa7"
+  integrity sha512-r8bigQi7ZEmAT5e5KbY0JLyISUs055jlOEEKpjlpnP27EkDnE56pQSbRcCUVz4PGH0uFwEV5b5IJNzxP09UBuQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/printable-itinerary@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-0.0.20.tgz#d48b9f78ba41827d820bc496c0300a7cd2839c64"
-  integrity sha512-KuZA0Z6S3Nn35uPoZGChlEOjRSmgBmIcG+bdSBscHo5TbdoX3D1WLfGtIYeph7adLnFljSMHIyATvS1d6Hn7Mw==
+"@opentripplanner/printable-itinerary@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/printable-itinerary/-/printable-itinerary-0.0.21.tgz#b0fc8bb37d0a209f7524cd7ef14d18539e2c1a71"
+  integrity sha512-dnPtxjtnP1IT0Ntho+r7Q33o+wEJi6PdagFkVsTaZdVBBzSt1maNTBzDWa7hD9GALV8WrtDZg+HRH5yBP8FDsw==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/route-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-0.0.20.tgz#61e9fdbfc248d84b77733a31fbb7c5d5a0c27f1e"
-  integrity sha512-Vrejj8DFUfLWt/AN8ogepEH+wRlEyfLQosBA5ynEg/xaExSSDaiRA7Ite2CHvpuJfbDKZfTtWLrP6k4Gf0bL/A==
+"@opentripplanner/route-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/route-viewer-overlay/-/route-viewer-overlay-0.0.21.tgz#219689a28e34d715922a8c866bc8c71404be6f79"
+  integrity sha512-rxRj+dV44b52j9GbGSYbncz6ORtfZOXolJggteCkE5oDxcsr4Wmv6fYlTjyfqhPQlXFS/Rc6w61ztHKXcysE/Q==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/stop-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-0.0.20.tgz#8448757238081feace0c0d4852fd39247cd795e2"
-  integrity sha512-UmBs0xLW4/rTOCrasg53vqIZZM/EVNrCDJJmbhGN/y8ZWZpzpWowlpzo2S/qZiSrLhc00+KdluBwRVcnA+Lx4A==
+"@opentripplanner/stop-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stop-viewer-overlay/-/stop-viewer-overlay-0.0.21.tgz#4ae6a258ed831eb3944a9730f5af14fd0125c779"
+  integrity sha512-qcRfY6WVDi2hQVz8grXex7hzm86VPpoD1vzV19UCNSW4g0STK+0iRnrIj7wrzZdOIpMS7t92gvE1d7WxhXFTcQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/stops-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-0.0.20.tgz#1fcbce27a0d9438616cb861169d4a6ec3d5ea0e9"
-  integrity sha512-3m7p7eSWYu8mil7qy/DqqK7eOK26ccQEuvbIhur/btyYaKpKYLodIXoO3mH3UarJfTpQzRMdeQ+W3YTobMYgZg==
+"@opentripplanner/stops-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/stops-overlay/-/stops-overlay-0.0.21.tgz#ee79b26b1bb6751ec25a33544f85ba416ed21042"
+  integrity sha512-TPWiRZ7mV+MYu50l0WOkvZfRxjMjaXYL9mruNWG09cx0HuiGObD4o3xtxEmggMoMVjgktyb02G7KOE1OQrKTgA==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
 
-"@opentripplanner/transitive-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-0.0.20.tgz#93f30afcd248e1705feac08e0a385683dcdc84fd"
-  integrity sha512-lOuWjwb6LlhjMRKjSVeNmBjrsdNewwNe3pnLJjpAnWhSTeunLATiv8aYQk8TYGJz2AclSgYYzySgBWHXnF6Pzw==
+"@opentripplanner/transitive-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/transitive-overlay/-/transitive-overlay-0.0.21.tgz#ac889766cf6dbb8a4f1ec61316d393088f1f4866"
+  integrity sha512-+v9qSWE71kL8iv9BL+RJ6GamVUVnotOBIxo4zmN9YuwJSpqsMZCjvUd03Ix5Q2TKGaAKIgCObezDPlu2IJHMfg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     lodash.isequal "^4.5.0"
     transitive-js "^0.13.0"
 
-"@opentripplanner/trip-details@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-0.0.20.tgz#ef80eee732e24d6c17d771f6f7d9f9d83deb27cd"
-  integrity sha512-nZDXHyBgghQZAdu2mLg51Lc5M6OraK6Vp5aYesXVa1ARBwug2hr0W2R/N6F4nQmU5SI0RQAN/b5irGplsKnnXw==
+"@opentripplanner/trip-details@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-details/-/trip-details-0.0.21.tgz#1eaf85dbaa1688c338e41330f4f30def7a7d1c36"
+  integrity sha512-vMy+1i/wOl0ZPQDqfWUyl5kjxI9Mv2+NJKl3xylwmUBFQynaGl61vmG4GKRBBNWucPWqQGVKXo8z72qRoLZNZg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/humanize-distance" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/humanize-distance" "^0.0.21"
     moment "^2.24.0"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"
     velocity-react "^1.4.3"
 
-"@opentripplanner/trip-form@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-0.0.20.tgz#823e23ef8e332f5aa3fe85306ee65a0bee17f914"
-  integrity sha512-GZOZj4mCyPWx64OO1klZpsJ0JEggxmG5Qx264fwue9l8pun4D9DuCJFbclw51Tu/vLJ0VUuFZJBlECRCKeussg==
+"@opentripplanner/trip-form@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-form/-/trip-form-0.0.21.tgz#5f9deb9ac2bf34d3ce26c19f14392cf3850a999a"
+  integrity sha512-3MqOAx8L+14vO3Tr+j6YbhctYGHXnxbYyGZONI6OpijlmRINmxCKG7oK/VX+8PjWftqZggEUGW09FUiEUhh/hg==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/icons" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/icons" "^0.0.21"
     moment "^2.17.1"
 
-"@opentripplanner/trip-viewer-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-0.0.20.tgz#f65ed3527edea2e2304b5e02394b62ac69de7c0e"
-  integrity sha512-neLU+iO1dTYSXefW00IltdO0vdxtkEJpMG9GiFOUCgVAvLhyHuJca1aofgKZmcsArLhRo7eV2T8YzEHf3EiOCQ==
+"@opentripplanner/trip-viewer-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-0.0.21.tgz#9b4515db20ea106c7160ac38773f5cb7f3d651b3"
+  integrity sha512-YI/tks6QAjA9dGOp6hd7yC/SxIXQ5DvI9T4UewEFIxembXD920wlcF4GF8DFlmB/GPF67m6Qz7rfvrq+qjjKcw==
   dependencies:
     "@mapbox/polyline" "^1.1.0"
-    "@opentripplanner/core-utils" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
     prop-types "^15.7.2"
 
-"@opentripplanner/vehicle-rental-overlay@^0.0.20":
-  version "0.0.20"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-0.0.20.tgz#ef30b97f8c1080497056246a59f371f96efabc11"
-  integrity sha512-7ujSgc2mG/hZpZEL3DW+v3fIWSBUY3BOxoyqPlE0KhoE805KQi99LMxUYre+ovcEyIhcr0OKGSig0Br0X6banw==
+"@opentripplanner/vehicle-rental-overlay@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/vehicle-rental-overlay/-/vehicle-rental-overlay-0.0.21.tgz#5dc3396329d46d05c1da6db0dca3e4311b9bfcbb"
+  integrity sha512-8OY42IwWM+4sA2rmyJRZhE/CnOfmH6HHsqFoYrnhBp/U4U7BKsXpyuZwVr9yYhKZoY8zibj75MYso5R49UUarQ==
   dependencies:
-    "@opentripplanner/core-utils" "^0.0.20"
-    "@opentripplanner/from-to-location-picker" "^0.0.20"
+    "@opentripplanner/core-utils" "^0.0.21"
+    "@opentripplanner/from-to-location-picker" "^0.0.21"
     lodash.memoize "^4.1.2"
     prop-types "^15.7.2"
     styled-icons "^9.1.0"

From ac4d6db0721f1ca2f7ba66c9ccf67773428b484c Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 12 May 2020 09:51:45 -0400
Subject: [PATCH 15/21] refactor(icons): move example custom icons into own
 file

---
 custom-icons.js | 47 +++++++++++++++++++++++++++++++++++
 example.js      | 66 ++++++++++---------------------------------------
 2 files changed, 60 insertions(+), 53 deletions(-)
 create mode 100644 custom-icons.js

diff --git a/custom-icons.js b/custom-icons.js
new file mode 100644
index 000000000..dbd806f10
--- /dev/null
+++ b/custom-icons.js
@@ -0,0 +1,47 @@
+import {
+  ClassicBus,
+  ClassicGondola,
+  ClassicModeIcon,
+  Ferry,
+  LegIcon,
+  StandardGondola
+} from '@opentripplanner/icons'
+
+/**
+ * For more advanced users, you can replicate and customize components and
+ * observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ * The example below shuffles some icons around from what you might normally
+ * expect for demonstration purposes.
+ */
+
+const CustomTransitIcon = Ferry
+const CustomRailIcon = ClassicGondola
+const CustomStreetcarIcon = StandardGondola
+const CustomBikeRentalIcon = ClassicBus
+
+export const CustomModeIcon = ({ mode, ...props }) => {
+  if (!mode) return null
+  switch (mode.toLowerCase()) {
+    // Place custom icons for each mode here.
+    case 'transit':
+      return <CustomTransitIcon {...props} />
+    case 'rail':
+      return <CustomRailIcon {...props} />
+    default:
+      return <ClassicModeIcon mode={mode} {...props} />
+  }
+}
+
+export const CustomLegIcon = ({ leg, ...props }) => {
+  if (
+    leg.routeLongName &&
+    leg.routeLongName.startsWith('MAX')
+  ) {
+    return <CustomStreetcarIcon />
+  } else if (leg.rentedBike) {
+    return <CustomBikeRentalIcon />
+  }
+  return <LegIcon leg={leg} ModeIcon={CustomModeIcon} {...props} />
+}
diff --git a/example.js b/example.js
index 0dd37c00c..ea04109d3 100644
--- a/example.js
+++ b/example.js
@@ -1,17 +1,7 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
 
-// The commented imports below are used in the custom icons example.
-import {
-  // ClassicBus,
-  // ClassicGondola,
-  ClassicLegIcon,
-  ClassicModeIcon,
-  // Ferry,
-  // LegIcon,
-  // StandardGondola
-} from '@opentripplanner/icons'
-
+import {ClassicLegIcon, ClassicModeIcon} from '@opentripplanner/icons'
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import React, { Component } from 'react'
@@ -20,7 +10,6 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
-
 // import Bootstrap Grid components for layout
 import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
@@ -33,13 +22,22 @@ import {
   AppMenu,
   createOtpReducer
 } from './lib'
-
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+// Set useCustomIcons to true to override classic icons with the exports from
+// custom-icons.js
+const useCustomIcons = true
+
 // Define icon sets for modes.
-const MyLegIcon = ClassicLegIcon
-const MyModeIcon = ClassicModeIcon
+let MyLegIcon = ClassicLegIcon
+let MyModeIcon = ClassicModeIcon
+
+if (useCustomIcons) {
+  const CustomIcons = require('./custom-icons')
+  MyLegIcon = CustomIcons.CustomLegIcon
+  MyModeIcon = CustomIcons.CustomModeIcon
+}
 
 /**
  * For testing, try uncommenting the following two statements (and comment the two above),
@@ -50,44 +48,6 @@ const MyModeIcon = ClassicModeIcon
 // const MyLegIcon = () => <Ferry />
 // const MyModeIcon = () => <AerialTram />
 
-/** 
- * For more advanced users, you can replicate and customize components and observe the change in icons.
- * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
- * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
- * The example below shuffles some icons around for demonstration purposes.
- */
-/*
-const CustomTransitIcon = Ferry
-const CustomRailIcon = ClassicGondola
-const CustomStreetcarIcon = StandardGondola
-const CustomBikeRentalIcon = ClassicBus
-
-const MyModeIcon = ({ mode, ...props }) => {
-  if (!mode) return null;
-  switch (mode.toLowerCase()) {
-    // Place custom icons for each mode here.
-    case "transit":
-      return <CustomTransitIcon {...props} />
-    case "rail":
-      return <CustomRailIcon {...props} />
-    default:
-      return <ClassicModeIcon mode={mode} {...props} />
-  }
-}
-
-const MyLegIcon = ({ leg, ...props }) => {
-  if (
-    leg.routeLongName &&
-    leg.routeLongName.startsWith('MAX')
-  ) {
-    return <CustomStreetcarIcon />
-  } else if (leg.rentedBike) {
-    return <CustomBikeRentalIcon />
-  }
-  return <LegIcon leg={leg} ModeIcon={MyModeIcon} {...props} />
-}
-*/
-
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {

From 42064659795e432e4acd20db633258d5572516e6 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 12 May 2020 09:58:27 -0400
Subject: [PATCH 16/21] docs(example): Remove a dummy custom icon example in
 favor for the other one.

---
 example.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/example.js b/example.js
index 0dd37c00c..fff36e084 100644
--- a/example.js
+++ b/example.js
@@ -41,15 +41,6 @@ import otpConfig from './config.yml'
 const MyLegIcon = ClassicLegIcon
 const MyModeIcon = ClassicModeIcon
 
-/**
- * For testing, try uncommenting the following two statements (and comment the two above),
- * and see how the icons get changed in:
- * - the mode options panel (select transit, bike+transit, etc.)
- * - the itinerary narrative (step-by-step directions).
- */
-// const MyLegIcon = () => <Ferry />
-// const MyModeIcon = () => <AerialTram />
-
 /** 
  * For more advanced users, you can replicate and customize components and observe the change in icons.
  * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js

From 266ecb46027d988a711ff4632db0966f7828ce1f Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 12 May 2020 10:36:05 -0400
Subject: [PATCH 17/21] refactor(example): set useCustomIcons to false

---
 example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example.js b/example.js
index ea04109d3..8d7caf306 100644
--- a/example.js
+++ b/example.js
@@ -27,7 +27,7 @@ import otpConfig from './config.yml'
 
 // Set useCustomIcons to true to override classic icons with the exports from
 // custom-icons.js
-const useCustomIcons = true
+const useCustomIcons = false
 
 // Define icon sets for modes.
 let MyLegIcon = ClassicLegIcon

From 404f94128ccc503e8ba6dd4b8e2c4eee132af82d Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 14 May 2020 22:57:58 -0400
Subject: [PATCH 18/21] fix(css): Match date and mode selector styles to
 trimet-mod-otp

---
 .../form/connected-settings-selector-panel.js |   1 -
 lib/components/form/styled.js                 | 182 +++++++++---------
 2 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/lib/components/form/connected-settings-selector-panel.js b/lib/components/form/connected-settings-selector-panel.js
index a64de2a8e..6d4f1d030 100644
--- a/lib/components/form/connected-settings-selector-panel.js
+++ b/lib/components/form/connected-settings-selector-panel.js
@@ -30,7 +30,6 @@ class ConnectedSettingsSelectorPanel extends Component {
           {showUserSettings && <UserTripSettings />}
 
           <StyledSettingsSelectorPanel
-            className='settings-selector-panel'
             ModeIcon={ModeIcon}
             queryParams={query}
             supportedModes={config.modes}
diff --git a/lib/components/form/styled.js b/lib/components/form/styled.js
index 0ff6705a9..1776e86b9 100644
--- a/lib/components/form/styled.js
+++ b/lib/components/form/styled.js
@@ -7,139 +7,141 @@ const commonButtonCss = css`
   -moz-user-select: none;
   -ms-user-select: none;
   background: none;
+  border: 1px solid rgb(187, 187, 187);
+  border-radius: 3px;
   font-family: inherit;
-  user-select: none;
+  font-size: inherit;
+  font-weight: inherit;
+  outline-offset: -2px;
+  padding: 6px 12px;
   text-align: center;
   touch-action: manipulation;
+  user-select: none;
+
+  &.active {
+    background-color: rgb(173, 216, 230);
+    border: 2px solid rgb(0, 0, 0);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    font-weight: 600;
+  }
 `
 
 const commonInputCss = css`
-  background-color: #fff;
+  background: none;
   border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   color: #555;
   font-family: inherit;
+  font-weight: inherit;
   padding: 6px 12px;
-  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-
-  &:focus {
-    border-color: #66afe9;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-    outline: 0;
-  }
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 `
 
 const modeButtonButtonCss = css`
   ${TripFormClasses.ModeButton.Button} {
     ${commonButtonCss}
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    color: #333;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 1.42857143;
-    outline-offset:-2px;
-    padding: 6px 12px;
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-    }
-    &:hover {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-    }
-    &.active {
-      background-color: #e6e6e6;
-      border-color: #adadad;
-      box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-      font-weight: 400;
-      &:hover {
-        background-color: #d4d4d4;
-        border-color: #8c8c8c;
-      }
-    }
   }
 `
 
 export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
+  ${modeButtonButtonCss}
+
   ${TripFormClasses.SettingLabel} {
-    font-weight: 400;
-    margin-bottom: 0;
+    color: #808080;
+    font-size: 14px;
+    font-weight: 100;
+    letter-spacing: 1px;
+    padding-top: 8px;
+    text-transform: uppercase;
   }
   ${TripFormClasses.SettingsHeader} {
+    color: #333333;
     font-size: 18px;
-    margin: 16px 0px;    
+    margin: 16px 0px;
   }
   ${TripFormClasses.SettingsSection} {
     margin-bottom: 16px;
   }
   ${TripFormClasses.DropdownSelector} {
-    margin-bottom:20px;
     select {
       ${commonInputCss}
+      -webkit-appearance: none;
+      border-radius: 3px;
       font-size: 14px;
       height: 34px;
-      line-height: 1.42857143;
+      line-height: 1.42857;
+      margin-bottom: 20px;
+
+      &:focus {
+        border-color: #66afe9;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+        outline: 0;
+      }
+    }
+    > div:last-child::after {
+      box-sizing: border-box;
+      color: #000;
+      content: "▼";
+      font-size: 67%;
+      pointer-events: none;
+      position: absolute;
+      right: 8px;
+      top: 10px;
     }
   }
 
   ${TripFormClasses.ModeSelector} {
+    font-weight: 300;
     ${TripFormClasses.ModeButton.Button} {
-      ${commonButtonCss}
-      border: 1px solid rgb(187, 187, 187);
-      border-radius: 3px;
       box-shadow: none;
-      outline: 0;
+      outline: none;
       padding: 3px;
-      &.active {
-        background-color: rgb(173, 216, 230);
-        border: 2px solid rgb(0, 0, 0);
-      }
-    }
+    }  
     ${TripFormClasses.ModeButton.Title} {
       font-size: 10px;
-      font-weight: 300;
       line-height: 12px;
       padding: 4px 0px 0px;
+  
       &.active {
         font-weight: 600;
       }
-    }
+    }  
   }
   ${TripFormClasses.ModeSelector.MainRow} {
-    margin: 0 -10px 18px;
-    padding: 0 5px;
-    
+    box-sizing: border-box;
+    font-size: 170%;
+    margin: 0px -15px 18px;
+    padding: 0px 5px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 200%;
-      font-weight: 300;
       height: 54px;
+      width: 100%;
       &.active {
         font-weight: 600;
       }  
     }
   }
   ${TripFormClasses.ModeSelector.SecondaryRow} {
-    margin: 0 -10px 10px;
+    margin: 0px -15px 10px;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 150%;
-      font-weight: 600;
+      font-size: 130%;
+      font-weight: 800;
       height: 46px;
+      > svg {
+        margin: 0 0.20em;
+      }
     }
   }
   ${TripFormClasses.ModeSelector.TertiaryRow} {
-    margin: 0 -10px 10px;
+    font-size: 80%;
+    font-weight: 300;
+    margin: 0px -15px 10px;
+    text-align: center;
     ${TripFormClasses.ModeButton.Button} {
-      font-size: 90%;
       height: 36px;
     }
   }
-
   ${TripFormClasses.SubmodeSelector.Row} {
+    font-size: 12px;
     > * {
       padding: 3px 5px 3px 0px;
     }
@@ -147,38 +149,46 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
       padding-right: 0px;
     }
     ${TripFormClasses.ModeButton.Button} {
-      padding: 6px 12px;
+      height: 35px;
     }
     svg,
     img {
       margin-left: 0px;
     }
   }
+  ${TripFormClasses.SubmodeSelector} {
+    ${TripFormClasses.SettingLabel} {
+      margin-bottom: 0;
+    }
+  }
   ${TripFormClasses.SubmodeSelector.InlineRow} {
     margin: -3px 0px;
-  }
-
-  ${TripFormClasses.SubmodeSelector} {
-      ${modeButtonButtonCss}
+    svg,
+    img {
+      height: 18px;
+      max-width: 32px;
+    }
   }
 `
 
 export const StyledDateTimeSelector = styled(DateTimeSelector)`
-  margin: 0 -15px 20px;
+  margin: 0 -15px 15px;
+
   ${TripFormClasses.DateTimeSelector.DateTimeRow} {
-    margin-top: 20px;
+    margin: 20px 0px 15px;
+    input {
+      ${commonInputCss}
+      background-color: #fff;
+      border: 0;
+      border-bottom: 1px solid #000;
+      box-shadow: none;
+      outline: none;
+      text-align: center;
+    }
   }
-
-  input {
-    ${commonInputCss}
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    box-shadow: none;
-    font-size: 16px;
-    height: 34px;
-    text-align: center; /* For legacy browsers. */
+  ${TripFormClasses.ModeButton.Button} {
+    ${commonButtonCss}
+    font-size: 14px;
+    height: 35px;
   }
-
-  ${modeButtonButtonCss}
 `

From bc67a452ca1b9f9b94fcbe66e3b7d47524b6edad Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 15 May 2020 09:41:10 -0400
Subject: [PATCH 19/21] fix(margins): Fix trip form margins

---
 lib/components/form/styled.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/form/styled.js b/lib/components/form/styled.js
index 1776e86b9..3d0909694 100644
--- a/lib/components/form/styled.js
+++ b/lib/components/form/styled.js
@@ -110,7 +110,7 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
   ${TripFormClasses.ModeSelector.MainRow} {
     box-sizing: border-box;
     font-size: 170%;
-    margin: 0px -15px 18px;
+    margin: 0px -10px 18px;
     padding: 0px 5px;
     ${TripFormClasses.ModeButton.Button} {
       height: 54px;
@@ -121,7 +121,7 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
     }
   }
   ${TripFormClasses.ModeSelector.SecondaryRow} {
-    margin: 0px -15px 10px;
+    margin: 0px -10px 10px;
     ${TripFormClasses.ModeButton.Button} {
       font-size: 130%;
       font-weight: 800;
@@ -134,7 +134,7 @@ export const StyledSettingsSelectorPanel = styled(SettingsSelectorPanel)`
   ${TripFormClasses.ModeSelector.TertiaryRow} {
     font-size: 80%;
     font-weight: 300;
-    margin: 0px -15px 10px;
+    margin: 0px -10px 10px;
     text-align: center;
     ${TripFormClasses.ModeButton.Button} {
       height: 36px;

From e0373e83d80eb03db32e41d9af7980098ed6dd16 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 15 May 2020 09:50:27 -0400
Subject: [PATCH 20/21] style(results-screen): Reorder vars in render()

---
 lib/components/mobile/results-screen.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/mobile/results-screen.js b/lib/components/mobile/results-screen.js
index 3c6b76917..209bacca4 100644
--- a/lib/components/mobile/results-screen.js
+++ b/lib/components/mobile/results-screen.js
@@ -96,6 +96,7 @@ class MobileResultsScreen extends Component {
 
   render () {
     const {
+      activeItineraryIndex,
       error,
       itineraryClass,
       itineraryFooter,
@@ -103,8 +104,7 @@ class MobileResultsScreen extends Component {
       query,
       realtimeEffects,
       resultCount,
-      useRealtime,
-      activeItineraryIndex
+      useRealtime
     } = this.props
     const { expanded } = this.state
 

From 6c10ea651c951d0497289ac8111d7adf867dedc1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 May 2020 10:54:57 -0400
Subject: [PATCH 21/21] fix(css): Match trimet style for TripDetails, itinerary
 footer, PlaceName.

---
 lib/components/narrative/connected-trip-details.js       | 7 +++----
 .../narrative/line-itin/connected-itinerary-body.js      | 9 ++++++++-
 lib/components/narrative/line-itin/line-itinerary.js     | 2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/components/narrative/connected-trip-details.js b/lib/components/narrative/connected-trip-details.js
index f34205233..f094f559d 100644
--- a/lib/components/narrative/connected-trip-details.js
+++ b/lib/components/narrative/connected-trip-details.js
@@ -4,10 +4,9 @@ import { connect } from 'react-redux'
 import styled from 'styled-components'
 
 const TripDetails = styled(TripDetailsBase)`
-  border: 2px solid gray;
-  border-radius: 0;
-  padding: 6px 10px;
-  margin: 16px 0 10px;
+  b {
+    font-weight: 600;
+  }
 `
 
 // Connect imported TripDetails class to redux store.
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index a1e9cf8ca..5d36ac58f 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -3,6 +3,7 @@ import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/tran
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
 import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place-name'
+import { PlaceName as PlaceNameWrapper } from '@opentripplanner/itinerary-body/lib/styled'
 import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
@@ -21,6 +22,12 @@ const ItineraryBodyContainer = styled.div`
   padding: 20px 0px;
 `
 
+const StyledItineraryBody = styled(ItineraryBody)`
+  ${PlaceNameWrapper} {
+    font-weight: inherit;
+  }
+`
+
 class ConnectedItineraryBody extends Component {
   /** avoid rerendering if the itinerary to display hasn't changed */
   shouldComponentUpdate (nextProps, nextState) {
@@ -40,7 +47,7 @@ class ConnectedItineraryBody extends Component {
 
     return (
       <ItineraryBodyContainer>
-        <ItineraryBody
+        <StyledItineraryBody
           config={config}
           diagramVisible={diagramVisible}
           itinerary={itinerary}
diff --git a/lib/components/narrative/line-itin/line-itinerary.js b/lib/components/narrative/line-itin/line-itinerary.js
index 2aa097024..d0550d1f0 100644
--- a/lib/components/narrative/line-itin/line-itinerary.js
+++ b/lib/components/narrative/line-itin/line-itinerary.js
@@ -65,7 +65,7 @@ export default class LineItinerary extends NarrativeItinerary {
     }
 
     return (
-      <LineItineraryContainer>
+      <LineItineraryContainer className='line-itin'>
         <ItinerarySummary
           companies={companies}
           itinerary={itinerary}