fix: Pre-fare polish - Boundary alerts banner

assets/css/v2/pre_fare/prefare_single_screen_alert.scss

@@ -44,8 +44,12 @@
   .alert-card__body {
     min-height: 0;
     flex-grow: 1;
-    padding: 120px 56px 0 56px;
+    padding: 120px 56px 32px 56px;
     box-sizing: border-box;
+    &--shuttle {
+      padding-top: 80px;
+      padding-bottom: 0;
+    }
 
     .alert-card__content-block {
       height: 100%;
@@ -160,6 +164,7 @@
   .disruption-diagram-container {
     width: 100%;
     flex: 1;
+    margin-bottom: 64px;
     min-height: 0;
   }
 }

assets/css/v2/pre_fare/reconstructed_alert.scss

@@ -214,6 +214,7 @@ $alert-card-footer-height: 80px;
       &__location {
         font-size: 60px;
         font-weight: 500;
+        margin-bottom: 32px;
       }
 
       &__cause {
@@ -241,7 +242,7 @@ $alert-card-footer-height: 80px;
         margin-top: 34px;
         display: flex;
         &--text {
-          font-weight: 600;
+          font-weight: 400;
           font-size: 53px;
           min-width: 811px;
           color: #000000;

assets/src/components/v2/disruption_diagram/disruption_diagram.tsx

@@ -21,7 +21,7 @@ const EMPHASIS_HEIGHT = 80;
 // of the padding above the emphasis. Keeping for now
 const EMPHASIS_PADDING_TOP = 8;
 // The tallest icon (the diamond) is used in translation calculations
-const MAX_ICON_HEIGHT = 52;
+const MAX_ICON_HEIGHT = 64;
 // L: the amount by which the left end extends beyond the leftmost station slot.
 // R: the width by which the right end extends beyond the rightmost station slot.
 // L can vary based on whether the first slot is an arrow vs diamond, because the diamond is larger.
@@ -287,10 +287,9 @@ const EndSlotComponent: ComponentType<EndSlotComponentProps> = ({
         className={classWithModifier("end-slot__arrow", line)}
       />
     );
-  } else if (
-    isAffected &&
-    (effect === "station_closure" || effect === "suspension")
-  ) {
+  } else if (isAffected && isCurrentStop) {
+    icon = <LargeXStopIcon iconSize={61} color="#ee2e24" />;
+  } else if (isAffected) {
     icon = <LargeXStopIcon iconSize={61} />;
   } else if (isCurrentStop && line === "red") {
     icon = <CurrentStopOpenDiamondIcon iconSize={64} />;
@@ -379,7 +378,7 @@ const MiddleSlotComponent: ComponentType<MiddleSlotComponentProps> = ({
   let icon;
   if (slot.show_symbol) {
     if (isCurrentStop) {
-      if (isAffected && effect in ["station_closure", "suspension"]) {
+      if (isAffected) {
         icon = <LargeXStopIcon iconSize={48} color="#ee2e24" />;
       } else {
         icon =
@@ -600,9 +599,13 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
   );
   const [beginning, middle, end] = [slots[0], slots.slice(1, -1), slots.at(-1)];
   const hasEmphasis = effect !== "station_closure";
-  const calculated_emphasis_height = hasEmphasis
-    ? EMPHASIS_HEIGHT + EMPHASIS_PADDING_TOP
-    : 0;
+
+  const getEmphasisHeight = (scale: number) => (
+    hasEmphasis
+    ? EMPHASIS_HEIGHT + EMPHASIS_PADDING_TOP * scale
+    : 0
+  )
+
   const labelTextClass = slots.length > 12 ? "small" : "large";
 
   let x = 0;
@@ -645,14 +648,12 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
 
   // Get the size of the diagram svg, excluding emphasis
   let dimensions = document.getElementById("line-map")?.getBoundingClientRect();
-
   let height = dimensions?.height ?? 0;
   let width = dimensions?.width ?? 0;
 
   useEffect(() => {
     // Get updated dimensions each time this hook runs
     dimensions = document.getElementById("line-map")?.getBoundingClientRect();
-
     height = dimensions?.height ?? 0;
     width = dimensions?.width ?? 0;
 
@@ -665,15 +666,16 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
       const xScaleFactor = 904 / width;
 
       const needsAbbreviating =
-        height * xScaleFactor + calculated_emphasis_height > svgHeight &&
+        height * xScaleFactor + getEmphasisHeight(xScaleFactor) > svgHeight &&
         !doAbbreviate;
       if (needsAbbreviating) {
         setDoAbbreviate(true);
         // now scale y, which requires re-running this effect
       } else {
+        const yScaleFactor = (svgHeight - getEmphasisHeight(1)) / height
         const factor = Math.min(
-          904 / width,
-          (svgHeight - calculated_emphasis_height) / height
+          xScaleFactor,
+          yScaleFactor
         );
         setScaleFactor(factor);
         setTimeout(() => {
@@ -685,37 +687,29 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
 
   // This is to center the diagram along the X axis
   const translateX = (width && (904 - width) / 2) || 0;
+
+  // Next is to align the diagram at the top of the svg, which involves adjusting the SVG viewbox
 
-  // Next is to center the diagram along the Y axis, which involves adjusing the SVG viewbox
-
-  // If -${svgHeight} is used as the viewbox height, it looks like the line diagram text
+  // If -${height} is used as the viewbox height, it looks like the line diagram text
   // pushed all the way to the bottom of the viewbox with just a tiny point of the
   // "You are Here" diamond sticking out. So, the parts that are cut off are the whole
   // height of the line diagram, and a little extra for the bottom of the "You are Here" diamond.
 
   // To calculate the height of that missing part, that is:
-  // LINE_HEIGHT*scaleFactor/2 - MAX_ICON_HEIGHT*scaleFactor/2
+  // LINE_HEIGHT*scaleFactor/2 - MAX_ICON_HEIGHT*scaleFactor/2 + (hasEmphasis ? EMPHASIS_PADDING_TOP * scaleFactor : 0)
 
   // offset is parent container height minus all the stuff below the very top of the line diagram
-  const offset =
-    svgHeight -
-    (LINE_HEIGHT * scaleFactor) / 2 -
-    (MAX_ICON_HEIGHT * scaleFactor) / 2 -
-    calculated_emphasis_height;
-  // topAndBottomMargins is parent container height minus actual full height of line diagram with emphasis
-  const topAndBottomMargins =
-    (svgHeight - height - calculated_emphasis_height) / 2;
-  // If topAndBottomMargins is negative, than there is no margin to use, so the viewBox offset should just be
-  // the offset (essentially the basic height of the diagram)
-  // Otherwise, if there is vertical room, the calculated margin is subtracted from that offset
-  const viewBoxOffset =
-    topAndBottomMargins < 0 ? offset : offset - topAndBottomMargins;
+  const viewBoxOffset = 
+    height
+    - (LINE_HEIGHT * scaleFactor) / 2
+    - (MAX_ICON_HEIGHT * scaleFactor) / 2
+    + (hasEmphasis ? EMPHASIS_PADDING_TOP * scaleFactor : 0)
 
   return (
     <svg
       // viewBoxOffset will always be > 0 by the time it's visible, but the console will
       // still log an error if it's a negative number when it's not-yet-visible
-      viewBox={`0 ${viewBoxOffset > 0 ? -viewBoxOffset : 0} 904 ${svgHeight}`}
+      viewBox={`0 ${-viewBoxOffset} 904 ${height + getEmphasisHeight(scaleFactor)}`}
       transform={`translate(${translateX})`}
       visibility={isDone ? "visible" : "hidden"}
     >
@@ -764,8 +758,9 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
           <g
             id="alert-emphasis"
             transform={`translate(0, ${
-              EMPHASIS_HEIGHT / 2 +
-              (EMPHASIS_HEIGHT - MAX_ICON_HEIGHT) * scaleFactor
+              40 // Half the height of the emphasis icon
+              + 24 * scaleFactor // Half the height of the largest icon, "you are here" octagon
+              + 8 * scaleFactor // Emphasis padding
             })`}
           >
             <AlertEmphasisComponent

assets/src/components/v2/pre_fare_single_screen_alert.tsx

@@ -162,14 +162,14 @@ const MultiLineLayout: React.ComponentType<MultiLineLayoutProps> = ({
   );
 };
 
-interface FalloutLayoutProps {
+interface FallbackLayoutProps {
   issue: string;
   remedy: string;
   effect: string;
   bannerHeight: number;
 }
 
-const FallbackLayout: React.ComponentType<FalloutLayoutProps> = ({
+const FallbackLayout: React.ComponentType<FallbackLayoutProps> = ({
   issue,
   remedy,
   effect,
@@ -453,7 +453,7 @@ const PreFareSingleScreenAlert: React.ComponentType<
             showBanner ? "with-banner" : "no-banner"
           )}
         >
-          <div className="alert-card__body">{layout}</div>
+          <div className={classWithModifier("alert-card__body", effect)}>{layout}</div>
           <div className="alert-card__footer">
             {cause && (
               <div className="alert-card__footer__cause">

lib/screens/v2/widget_instance/reconstructed_alert.ex

@@ -192,7 +192,12 @@ defmodule Screens.V2.WidgetInstance.ReconstructedAlert do
     end)
     |> Enum.flat_map(fn
       route_id ->
-        headsign = get_destination(t, location, route_id)
+        # Boundary alerts shouldn't have headsign in the banner
+        headsign = if get_region_from_location(location) === :boundary do
+            nil
+          else
+            get_destination(t, location, route_id)
+          end
         build_pills_from_headsign(route_id, headsign)
     end)
     |> Enum.uniq()
@@ -389,12 +394,14 @@ defmodule Screens.V2.WidgetInstance.ReconstructedAlert do
 
         issue =
           cond do
+            # Here
             location == :inside ->
               "No #{route_id} Line trains"
 
             is_nil(destination) ->
               "No trains"
 
+            # Boundary
             true ->
               "No trains to #{destination}"
           end