diff --git a/app/component/map/Line.js b/app/component/map/Line.js index f25cb1db20..8711808464 100644 --- a/app/component/map/Line.js +++ b/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 (
- {displayHalo && ( - { - this.halo = el; - }} - positions={filteredPoints} - className={`leg-halo ${className}`} - weight={haloWeight} - interactive={false} - /> - )} + { + this.halo = el; + }} + positions={filteredPoints} + className={`leg-halo ${className}`} + weight={haloWeight} + interactive={false} + /> { diff --git a/app/component/map/map.scss b/app/component/map/map.scss index 045121dd6e..615672d6e0 100644 --- a/app/component/map/map.scss +++ b/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; diff --git a/sass/themes/default/_theme.scss b/sass/themes/default/_theme.scss index 0b82995995..e21c9b2243 100644 --- a/sass/themes/default/_theme.scss +++ b/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;