diff --git a/packages/itinerary-body/src/TransitLegBody/index.js b/packages/itinerary-body/src/TransitLegBody/index.js index da815d5a0..97d0dd57f 100644 --- a/packages/itinerary-body/src/TransitLegBody/index.js +++ b/packages/itinerary-body/src/TransitLegBody/index.js @@ -69,12 +69,8 @@ class TransitLegBody extends Component { ? transitOperator.logo : agencyBrandingUrl; - // get the iconKey for the leg's icon - // let iconKey = mode; - // if (typeof customIcons.customIconForLeg === "function") { - // const customIcon = customIcons.customIconForLeg(leg); - // if (customIcon) iconKey = customIcon; - // } + const expandAlerts = + alertsExpanded || (leg.alerts && leg.alerts.length < 3); return ( @@ -118,7 +114,7 @@ class TransitLegBody extends Component { )} {/* Alerts toggle */} - {alerts && alerts.length > 0 && ( + {alerts && alerts.length > 2 && ( {alerts.length}{" "} {pluralize("alert", alerts)}{" "} @@ -131,7 +127,7 @@ class TransitLegBody extends Component { enter={{ animation: "slideDown" }} leave={{ animation: "slideUp" }} > - {alertsExpanded && ( + {expandAlerts && ( + diff --git a/packages/itinerary-body/src/styled.js b/packages/itinerary-body/src/styled.js index 10b7596aa..2658b6f23 100755 --- a/packages/itinerary-body/src/styled.js +++ b/packages/itinerary-body/src/styled.js @@ -430,12 +430,14 @@ export const StopRow = styled.div` position: relative; `; -export const TransitAlert = styled.div` - margin-top: 5px; +export const TransitAlert = styled.a` background-color: #eee; - padding: 8px; - color: #000; border-radius: 4px; + color: #000; + display: block; + margin-top: 5px; + padding: 8px; + text-decoration: none; `; export const TransitAlertBody = styled.div`