feat: Current elevator closure layout (#2315)

* Adjust margins so row width is consistent.

* Refactored a bit to prepare for in station closures view.

* Added first page of CurrentElevatorClosedView.

* Polished up first page of CurrentElevatorClosedView.

* Added second page to view.

* Fixed some styles.

* Use existing Arrow component.

* Added map marker.

* Update screens-config-lib.

* Only show two pages if there is a configured image.

* Test improvements.

* Refactored out some components and styles.

* Address PR feedback.

* Use absolute positioning instead of flex.

* Try using one widget to help with styling.

* Add header and footer instances in closures CG.

* Converted elevator components into separate widgets.

* Better module/type organization.

assets/css/colors.scss

@@ -19,3 +19,5 @@ $cool-black-15: #171f26;
 $cool-black-30: #2e3e4d;
 
 $normal-service-green: #145a06;
+
+$accessibility-blue: #165c96;

assets/css/elevator_v2.scss

@@ -1,13 +1,17 @@
+// Our Mimo elevator screens run Webview 83.
+// When writing styles for widgets on these screens,
+// verify browser compatibility in the MDN web docs.
+
 @import "https://rsms.me/inter/inter.css";
 @import "colors";
 @import "v2/lcd_common/screen_container";
-@import "v2/elevator/elevator_closures";
 @import "v2/elevator/normal";
 @import "v2/simulation_common";
 @import "v2/lcd_common/simulation";
 @import "v2/elevator/header";
 @import "v2/elevator/footer";
 @import "v2/lcd_common/route_pill";
+@import "v2/arrow";
 
 .evergreen-content-image__container,
 .evergreen-content-image__image {
@@ -23,3 +27,61 @@ body {
 .multi-screen-page {
   grid-auto-rows: 1920px;
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.normal-header,
+.footer {
+  &--closed {
+    color: white;
+    background-color: $accessibility-blue;
+  }
+}
+
+.outside-elevator-closures,
+.current-elevator-closed {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: $cool-black-15;
+  background-color: $warm-neutral-90;
+
+  hr.thick {
+    min-height: 24px;
+    margin: 0;
+    background-color: $cool-black-15;
+    border: none;
+  }
+
+  hr.thin {
+    min-height: 2px;
+    margin: 24px 0;
+    background-color: $true-grey-45;
+    border: none;
+    opacity: 0.5;
+  }
+
+  .subheading {
+    font-size: 80px;
+    font-weight: 700;
+    line-height: 80px;
+  }
+}
+
+.paging-indicators {
+  display: flex;
+  align-items: center;
+  margin-right: 66px;
+
+  .paging-indicator:first-child:not(:only-child) {
+    margin-right: 27px;
+  }
+}
+
+@import "v2/elevator/current_elevator_closed";
+@import "v2/elevator/outside_elevator_closures";

assets/css/v2/elevator/current_elevator_closed.scss

@@ -0,0 +1,129 @@
+.current-elevator-closed {
+  position: relative;
+  height: 100%;
+
+  .notch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-block;
+    border-right: 345px solid $accessibility-blue;
+    border-bottom: 300px solid transparent;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 528px;
+    padding-left: 48px;
+    font-weight: 700;
+
+    .icons {
+      margin-bottom: 21px;
+
+      .no-service-icon {
+        margin-right: 16px;
+      }
+    }
+
+    .closed-text {
+      margin-bottom: 18px;
+      font-size: 150px;
+      line-height: 150px;
+    }
+  }
+
+  hr.thin {
+    margin: 0 20px;
+  }
+
+  .accessible-path-container {
+    height: 984px;
+    padding: 48px;
+
+    .subheading-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 142px;
+
+      .subheading {
+        align-self: center;
+      }
+
+      .arrow {
+        width: 100px;
+        height: 100px;
+      }
+    }
+
+    .alternate-direction-text {
+      color: $cool-black-30;
+
+      &.small {
+        font-size: 48px;
+        line-height: 64px;
+      }
+
+      &.medium {
+        font-size: 62px;
+        line-height: 80px;
+      }
+
+      &.large {
+        font-size: 80px;
+        line-height: 96px;
+      }
+    }
+
+    .map-container {
+      position: relative;
+      margin-top: 26px;
+      margin-left: -48px;
+
+      .map {
+        width: 1080px;
+      }
+    }
+  }
+
+  .paging-indicators {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 120px;
+  }
+}
+
+.marker-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 116px;
+  height: 116px;
+
+  .marker-background,
+  .marker {
+    position: absolute;
+  }
+
+  .marker-background {
+    animation: pulse-ring 1.5s infinite;
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.5);
+  }
+
+  60% {
+    opacity: 0.25;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

assets/css/v2/elevator/footer.scss

@@ -1,5 +1,4 @@
 .footer {
-  box-sizing: border-box;
   height: 100%;
   padding: 26px 48px;
   font-size: 48px;

assets/css/v2/elevator/elevator_closures.scss → assets/css/v2/elevator/outside_elevator_closures.scss

@@ -1,9 +1,7 @@
-.elevator-closures {
-  position: relative;
+.outside-elevator-closures {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  height: 100%;
-  background-color: $warm-neutral-90;
 
   .in-station-summary {
     display: flex;
@@ -19,23 +17,7 @@
     }
   }
 
-  hr.thick {
-    min-height: 24px;
-    margin: 0;
-    background-color: $cool-black-15;
-    border: none;
-  }
-
-  hr.thin {
-    min-height: 2px;
-    margin: 24px 0;
-    background-color: $true-grey-45;
-    border: none;
-    opacity: 0.5;
-  }
-
   .outside-closure-list {
-    position: relative;
     height: 100%;
     background-color: $warm-neutral-90;
 
@@ -67,7 +49,6 @@
         transform: translateX(calc(-100% * var(--closure-list-offset)));
 
         .closure-row {
-          box-sizing: border-box;
           width: 1080px;
           padding: 0 48px;
 
@@ -129,16 +110,6 @@
         align-self: center;
         padding: 0 48px 20px;
       }
-
-      .paging-indicators {
-        display: flex;
-        align-items: center;
-        margin-right: 66px;
-
-        .paging-indicator:first-child:not(:only-child) {
-          margin-right: 27px;
-        }
-      }
     }
 
     .paging-info-container,

assets/src/apps/v2/elevator.tsx

@@ -14,14 +14,16 @@ import EvergreenContent from "Components/v2/evergreen_content";
 import ScreenPage from "Components/v2/screen_page";
 import { MappingContext } from "Components/v2/widget";
 import MultiScreenPage from "Components/v2/multi_screen_page";
-import ElevatorClosures from "Components/v2/elevator/elevator_closures";
+import OutsideElevatorClosures from "Components/v2/elevator/outside_elevator_closures";
+import CurrentElevatorClosed from "Components/v2/elevator/current_elevator_closed";
 import SimulationScreenPage from "Components/v2/simulation_screen_page";
 import Footer from "Components/v2/elevator/footer";
 import NormalHeader from "Components/v2/normal_header";
 
 const TYPE_TO_COMPONENT = {
   normal: NormalScreen,
-  elevator_closures: ElevatorClosures,
+  outside_elevator_closures: OutsideElevatorClosures,
+  current_elevator_closed: CurrentElevatorClosed,
   evergreen_content: EvergreenContent,
   footer: Footer,
   normal_header: NormalHeader,