Feature branch: Prefare Alerts 2.0

assets/css/pre_fare_v2.scss

@@ -40,6 +40,8 @@
 @import "v2/pre_fare/flex/paging_indicator";
 @import "v2/pre_fare/full_line_map";
 @import "v2/pre_fare/reconstructed_alert";
+@import "v2/pre_fare/alert-banner";
+@import "v2/pre_fare/prefare_single_screen_alert";
 @import "v2/pre_fare/free_text";
 @import "v2/pre_fare/shuttle_bus_info";
 
@@ -62,6 +64,8 @@
 
 @import "v2/blue_bikes";
 
+@import "v2/pre_fare/disruption_diagram/disruption_diagram";
+
 body {
   margin: 0px;
 }

assets/css/v2/pre_fare/alert-banner.scss

@@ -0,0 +1,56 @@
+.alert-banner {
+  font-family: Inter;
+  width: 100%;
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 600;
+  filter: drop-shadow(0px 30px 20px rgba(0, 0, 0, 0.25));
+
+  display: flex;
+  flex-wrap: wrap;
+
+  /* Background colors */
+  &--blue {
+    background-color: #b3c5e4;
+  }
+
+  &--red {
+    background-color: #f4bfbb;
+  }
+
+  &--orange {
+    background-color: #fadcb3;
+  }
+
+  &--yellow {
+    background-color: #fff7bf;
+  }
+
+  &--green {
+    background-color: #b3dac5;
+  }
+}
+
+.alert-banner__attention-text {
+  font-weight: 700;
+}
+
+.alert-banner__route-pill--short {
+  margin: 0 20px;
+  height: 96px;
+}
+
+.alert-banner__route-pill--long {
+  margin: 16.2px 0 0.8px 0;
+}
+
+.alert-banner--large--two-routes {
+  padding: 31px 65px 42px 65px;
+}
+.alert-banner--large--one-route {
+  padding: 86px 74px 102px 74px;
+}
+.alert-banner--small {
+  padding: 52px 88px;
+  align-items: center;
+}

assets/css/v2/pre_fare/disruption_diagram/disruption_diagram.scss

@@ -0,0 +1,124 @@
+.end-slot__arrow {
+  &--red {
+    fill: $line-color-red;
+  }
+
+  &--blue {
+    fill: $line-color-blue;
+  }
+
+  &--orange {
+    fill: $line-color-orange;
+  }
+
+  &--green {
+    fill: $line-color-green;
+  }
+}
+
+.end-slot__icon {
+  &--red {
+    stroke: $line-color-red;
+  }
+
+  &--blue {
+    stroke: $line-color-blue;
+  }
+
+  &--orange {
+    stroke: $line-color-orange;
+  }
+
+  &--green {
+    stroke: $line-color-green;
+  }
+
+  &--affected {
+    stroke: #171f26;
+  }
+}
+
+.shuttle-stop {
+  stroke: #171f26;
+}
+
+.middle-slot__background {
+  &--red {
+    fill: $line-color-red;
+  }
+
+  &--blue {
+    fill: $line-color-blue;
+  }
+
+  &--orange {
+    fill: $line-color-orange;
+  }
+
+  &--green {
+    fill: $line-color-green;
+  }
+}
+
+.middle-slot__icon {
+  &--red {
+    stroke: $line-color-red;
+  }
+
+  &--blue {
+    stroke: $line-color-blue;
+  }
+
+  &--orange {
+    stroke: $line-color-orange;
+  }
+
+  &--green {
+    stroke: $line-color-green;
+  }
+}
+
+.label--endpoint {
+  font-size: 35px;
+  font-weight: 700;
+
+  .label {
+    font-weight: 400;
+  }
+}
+
+.label-large {
+  font-family: Inter;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 35px;
+
+  &--current-stop {
+    font-size: 35px;
+    font-weight: 700;
+  }
+
+  &--small {
+    font-size: 25px;
+  }
+}
+
+.label-small {
+  font-family: Inter;
+  font-size: 25px;
+  font-weight: 500;
+  line-height: 35px;
+
+  &--current-stop {
+    font-size: 30px;
+    font-weight: 700;
+  }
+}
+
+.station-closure-icon {
+  fill: #171f26;
+
+  &--current-stop {
+    fill: #ee2e24;
+  }
+}

assets/css/v2/pre_fare/free_text.scss

@@ -54,3 +54,7 @@
     line-height: unset;
   }
 }
+
+.free-text__string--nowrap {
+  white-space: nowrap;
+}