AB#384 fix departure row warning triangle rendering

app/component/DepartureRow.js

@@ -47,7 +47,8 @@ export default function DepartureRow(
   );
   let icon;
   let iconColor;
-  let backgroundShape;
+  let background;
+  let backgroundClass;
   let sr;
   if (
     route?.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
@@ -61,13 +62,15 @@ export default function DepartureRow(
         })}
       </span>
     );
-    icon =
-      alert.alertSeverityLevel !== 'INFO'
-        ? 'icon_caution-white-excl-stroke'
-        : 'icon_info';
-    iconColor = alert.alertSeverityLevel !== 'INFO' ? '#DC0451' : '#888';
-    backgroundShape =
-      alert.alertSeverityLevel !== 'INFO' ? undefined : 'circle';
+    if (alert.alertSeverityLevel === 'INFO') {
+      icon = 'icon_info';
+      iconColor = '#888';
+      background = <IconBackground backgroundShape="circle" />;
+      backgroundClass = 'circle';
+    } else {
+      icon = 'icon_caution-white-excl-stroke';
+      iconColor = '#DC0451';
+    }
   }
   const headsign =
     departure.headsign ||
@@ -174,10 +177,10 @@ export default function DepartureRow(
         {icon && (
           <>
             <Icon
-              className={backgroundShape}
+              className={backgroundClass}
               img={icon}
               color={iconColor}
-              background={<IconBackground backgroundShape={backgroundShape} />}
+              background={background}
             />
             {sr}
           </>

app/component/routepage/RouteControlPanel.js

@@ -409,7 +409,7 @@ class RouteControlPanel extends React.Component {
     let disruptionIcon;
     if (disruptionClassName === 'active-disruption-alert') {
       disruptionIcon = (
-        <Icon className="disrution-icon" img="icon_caution-no-excl-no-stroke" />
+        <Icon img="icon_caution-no-excl-no-stroke" color="#DC0451" />
       );
     } else if (disruptionClassName === 'active-service-alert') {
       disruptionIcon = <Icon className="service-alert-icon" img="icon_info" />;

app/component/routepage/RoutePatternSelect.js

@@ -134,6 +134,10 @@ export default function RoutePatternSelect(
   { currentPattern, optionArray, onSelectChange, className },
   { config, router },
 ) {
+  if (!currentPattern) {
+    return null;
+  }
+
   // flatten optionArray to an ungrouped 1-D array
   const flattenedOptions = optionArray.reduce(
     (options, group) => options.concat(group.options),
@@ -256,7 +260,7 @@ export default function RoutePatternSelect(
 }
 
 RoutePatternSelect.propTypes = {
-  currentPattern: patternShape.isRequired,
+  currentPattern: patternShape,
   optionArray: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
@@ -267,6 +271,10 @@ RoutePatternSelect.propTypes = {
   className: PropTypes.string.isRequired,
 };
 
+RoutePatternSelect.defaultProps = {
+  currentPattern: undefined,
+};
+
 RoutePatternSelect.contextTypes = {
   config: configShape.isRequired,
   router: routerShape.isRequired,

app/component/stop/StopPageTabs.js

@@ -68,7 +68,7 @@ function StopPageTabs({ stop }, { match }) {
   ) {
     disruptionClassName = 'active-disruption-alert';
     disruptionIcon = (
-      <Icon className="disrution-icon" img="icon_caution-no-excl-no-stroke" />
+      <Icon img="icon_caution-no-excl-no-stroke" color="#DC0451" />
     );
   } else if (maxAlertSeverity === AlertSeverityLevelType.Info) {
     disruptionClassName = 'active-service-alert';