Change map line color for external ferries to #666.

app/component/map/Line.js

@@ -99,6 +99,10 @@ export default class Line extends React.Component {
     if (this.props.mode === 'walk') {
       legWeight *= 0.8;
     }
+    if (this.props.mode === 'ferry-external') {
+      haloWeight *= 0.6;
+      legWeight *= 0.6;
+    }
     if (this.props.passive) {
       haloWeight *= 0.5;
       legWeight *= 0.5;
@@ -111,27 +115,18 @@ export default class Line extends React.Component {
       legWeight *= 0.5;
     }
 
-    // The halo is not needed for lines that use the external color.
-    // At least currently the outline (halo) is very visible with the external gray color.
-    const displayHalo = !(
-      this.context.config.externalFeedIds !== undefined &&
-      this.props.mode.includes('external')
-    );
-
     return (
       <div style={{ display: 'none' }}>
-        {displayHalo && (
-          <Polyline
-            key="halo"
-            ref={el => {
-              this.halo = el;
-            }}
-            positions={filteredPoints}
-            className={`leg-halo ${className}`}
-            weight={haloWeight}
-            interactive={false}
-          />
-        )}
+        <Polyline
+          key="halo"
+          ref={el => {
+            this.halo = el;
+          }}
+          positions={filteredPoints}
+          className={`leg-halo ${className}`}
+          weight={haloWeight}
+          interactive={false}
+        />
         <Polyline
           key="line"
           ref={el => {

app/component/map/map.scss

@@ -1304,6 +1304,10 @@ div.origin-popup {
   stroke-opacity: 0.5;
 }
 
+.map-line.ferry-external.leg {
+  color: $external-feed-map-color;
+}
+
 /* Fix to default leaflet behavior */
 .leaflet-map-pane svg {
   position: relative;

sass/themes/default/_theme.scss

@@ -85,6 +85,7 @@ $car-color: #333;
 $scooter-color: #c5cad2;
 $call-agency-color: #666;
 $external-feed-color: #c5cad2;
+$external-feed-map-color: #666;
 
 /* Fonts */
 $font-family: 'Roboto', arial, georgia, serif;