Select stations page (#399)

* fix: refactor database config across environments * feat: add logging, parallel processing to build_places * chore: move NewPaMessagePage into own directory * feat: add optional list of route_ids to Screen type * chore: move existing rendering logic to own component * feat: opaque routing for PA/ESS message page(s) * feat: render list of orange line stations with pa/ess * feat: basic zone selection (via station) * feat: select all zones for line behavior * feat: generalize list behavior for subway (exc. green) * chore: extract RouteColumn component * feat: minimal support for green line * feat: green line select all checkbox * chore: remove TODO comment, won't do * feat: support silver line * feat: support silver and bus on station select * Added GL station groups. * Added RL station groups. * Added OL station groups. * Station Group column styling. * Column styling for all routes. * Added custom checkboxes. * Fixed some spacing. * Added IDs to checkboxes so label can be clicked to check box. * Fixed title alignment. * Line up containers. * Added sumary bar component. * Added other subway routes. * Use lodash/fp instead of lodash. * Add SL and Bus. * Finished styling of group tags. * Added X button functionality. * Added buttons to SelectStationsPage. * Cleanup and formatting. * Fixed tests. * Added :test to conditional. * Added classNames mapping. * Fixed test config for Ecto. * Removed Longwood. * Replace useEffect and useState with useMemo. * Let pluralize add number to string. * Set label width to width of column. * Fixed scroll behavior. * Added navigation to cancel button. * Remove some hidden overflow. * Custom scrollbar color. * Hide sidebar on SelectStationsPage. * Added some color variables. * Remove bottom padding. * Revert "fix: refactor database config across environments" This reverts commit 090252e. * Use :not instead of selecting each non-GL route. * Added a custom class to icon. * Changed sort function to return list unchanged for unrecognized IDs. * Renamed props. * Renamed variables to match what they represent. * Renamed variables. * Wrapped page in a Modal. --------- Co-authored-by: sloane <[email protected]>
mbta · Jul 30, 2024 · ce29459 · ce29459
1 parent 394552d
commit ce29459
Show file tree

Hide file tree

Showing 26 changed files with 1,233 additions and 87 deletions.
diff --git a/assets/css/dashboard/button-image.scss b/assets/css/dashboard/button-image.scss
@@ -6,7 +6,7 @@
     flex-direction: column;
     height: 268px;
     border-radius: 16px;
-    background: #2b3741;
+    background: $bg-elevation-4;
     border-color: transparent;
     flex: 1 1 306px;
     align-items: center;

diff --git a/assets/css/dashboard/configure-screens-workflow-page.scss b/assets/css/dashboard/configure-screens-workflow-page.scss
@@ -34,7 +34,7 @@
       }
 
       .screens-table-body tr.screen-row:not(:first-child) {
-        border-top-color: #2b3741;
+        border-top-color: $bg-elevation-4;
         border-top-width: 1px;
       }
 

diff --git a/...-pa-message-page/new-pa-message-page.scss → ...d/new-pa-message/new-pa-message-page.scss b/...-pa-message-page/new-pa-message-page.scss → ...d/new-pa-message/new-pa-message-page.scss
@@ -6,13 +6,6 @@
     margin: 0;
   }
 
-  &__header {
-    font-size: 40px;
-    font-weight: 500;
-    line-height: 48px;
-    text-align: left;
-  }
-
   &__associate-alert-subtext {
     color: $text-secondary;
   }

diff --git a/assets/css/dashboard/new-pa-message/new-pa-message.scss b/assets/css/dashboard/new-pa-message/new-pa-message.scss
@@ -0,0 +1,33 @@
+@import "./new-pa-message-page.scss";
+@import "./select-stations-page.scss";
+@import "./selected-stations-summary.scss";
+
+.new-pa-message,
+.select-stations-page-modal {
+  height: 100%;
+
+  .header {
+    font-size: 40px;
+    font-weight: 500;
+    line-height: 48px;
+    text-align: left;
+  }
+
+  .cancel-button {
+    background-color: transparent;
+    color: $text-link-primary;
+    border: none;
+  }
+
+  .submit-button {
+    background-color: $button-primary;
+    color: $button-secondary;
+  }
+}
+
+.select-stations-page-modal {
+  .modal-content {
+    color: $text-primary;
+    background-color: $dark-bg;
+  }
+}
diff --git a/assets/css/dashboard/new-pa-message/select-stations-page.scss b/assets/css/dashboard/new-pa-message/select-stations-page.scss
@@ -0,0 +1,186 @@
+.select-stations-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: hidden;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin: 24px 40px 0 40px;
+
+    .buttons {
+      display: flex;
+      align-items: center;
+
+      .btn {
+        height: 38px;
+      }
+    }
+  }
+
+  .container-fluid {
+    display: flex;
+    margin-top: 40px;
+    padding: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-grow: 0;
+    scrollbar-color: $theme-secondary $bg-elevation-4;
+
+    .form-check {
+      display: flex;
+      padding: 0;
+
+      .form-check-input {
+        height: 16px;
+        width: 16px;
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .form-check-label {
+        flex-grow: 1;
+      }
+    }
+
+    .col {
+      background-color: $cool-gray-20;
+      border-radius: 0px 0px 8px 8px;
+      margin-right: 24px;
+      display: flex;
+      flex-direction: column;
+
+      &:first-child {
+        margin-left: 40px;
+      }
+
+      &:last-child {
+        margin-right: 40px;
+      }
+
+      .col-content {
+        padding: 8px 16px;
+      }
+    }
+
+    .title {
+      padding: 8px 16px;
+      border-radius: 8px 8px 0px 0px;
+      width: 100%;
+      height: 40px;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 24px;
+    }
+
+    .station-groups-col {
+      min-width: 273px;
+
+      .title {
+        background-color: $cool-gray-40;
+      }
+
+      .route-groups {
+        padding: 0 16px;
+
+        &:nth-child(2) {
+          padding-top: 16px;
+        }
+
+        &:last-child {
+          padding-bottom: 16px;
+        }
+
+        .station-group {
+          &:not(:last-child) {
+            margin-bottom: 24px;
+          }
+        }
+      }
+
+      .col-content {
+        height: 100%;
+        overflow-y: auto;
+        padding-left: 0;
+      }
+
+      .group-title {
+        color: $text-secondary;
+      }
+
+      hr {
+        margin-top: 24px;
+        margin-bottom: 8px;
+      }
+    }
+
+    .route-col {
+      min-width: 304px;
+
+      &:not(&--green) {
+        height: fit-content;
+        max-height: 100%;
+
+        .col-content {
+          flex-basis: content;
+          overflow-y: auto;
+        }
+      }
+
+      .station-name {
+        margin-bottom: 6px;
+      }
+
+      &--green {
+        .title {
+          background-color: $mbta-green;
+          height: fit-content;
+        }
+
+        .branches-col {
+          overflow-y: auto;
+          height: 100%;
+
+          .title {
+            border-radius: 0;
+            background-color: $bg-elevation-4;
+            font-size: 16px;
+          }
+        }
+      }
+
+      &--red,
+      &--mattapan {
+        .title {
+          background-color: $mbta-red;
+        }
+      }
+
+      &--orange {
+        .title {
+          background-color: $mbta-orange;
+        }
+      }
+
+      &--blue {
+        .title {
+          background-color: $mbta-blue;
+        }
+      }
+
+      &--silver {
+        .title {
+          background-color: $mbta-silver;
+        }
+      }
+
+      &--bus {
+        .title {
+          color: $text-invert;
+          background-color: $mbta-bus;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/css/dashboard/new-pa-message/selected-stations-summary.scss b/assets/css/dashboard/new-pa-message/selected-stations-summary.scss
@@ -0,0 +1,80 @@
+.selected-stations-summary {
+  display: flex;
+  align-items: center;
+  height: 52px;
+  border-radius: 8px;
+  background-color: $cool-gray-30;
+  margin: 40px 40px 0 40px;
+  padding: 15px 18px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+
+  .label {
+    margin-right: 8px;
+  }
+
+  span {
+    color: $text-secondary;
+  }
+
+  .geo-alt-fill-icon {
+    margin-right: 7px;
+  }
+
+  .selected-group-tag {
+    height: 36px;
+    padding: 6px 12px;
+    border: 1px solid $text-secondary;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-right: 4px;
+    display: flex;
+    align-items: center;
+
+    &--green {
+      background-color: $mbta-green;
+    }
+    &--red {
+      background-color: $mbta-red;
+    }
+    &--orange {
+      background-color: $mbta-orange;
+    }
+    &--blue {
+      background-color: $mbta-blue;
+    }
+    &--mattapan {
+      background-color: $mbta-red;
+    }
+    &--silver {
+      background-color: $mbta-silver;
+    }
+    &--bus {
+      background-color: $mbta-bus;
+      color: $text-invert;
+      fill: $text-invert;
+    }
+
+    button {
+      height: 24px;
+      width: 16px;
+      margin-left: 4px;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+
+      &.bus {
+        svg {
+          fill: $text-invert;
+        }
+      }
+
+      .bi-x {
+        display: block;
+      }
+    }
+  }
+}
diff --git a/assets/css/dashboard/pa-messages-page.scss b/assets/css/dashboard/pa-messages-page.scss
@@ -72,11 +72,11 @@
   }
 
   th {
-    border-bottom: 1px solid #495057;
+    border-bottom: 1px solid $theme-secondary;
   }
 
   td {
-    border-bottom: 1px solid #2b3741;
+    border-bottom: 1px solid $bg-elevation-4;
   }
 
   &__start-end {

diff --git a/assets/css/screenplay.scss b/assets/css/screenplay.scss
@@ -23,7 +23,7 @@ $form-check-input-border: 1px solid #8b9198;
 @import "dashboard/bottom-action-bar.scss";
 @import "dashboard/configure-screens-workflow-page.scss";
 @import "dashboard/pa-messages-page.scss";
-@import "dashboard/new-pa-message-page/new-pa-message-page.scss";
+@import "dashboard/new-pa-message/new-pa-message.scss";
 @import "place-row.scss";
 @import "places-action-bar.scss";
 @import "filter-dropdown.scss";
@@ -99,6 +99,7 @@ input[type="button"] {
 .h5 {
   font-weight: 700;
   font-size: 16px;
+  line-height: 24px;
 }
 
 .body {

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -33,6 +33,7 @@ $mbta-red: #da291c;
 $mbta-blue: #003da5;
 $mbta-orange: #ed8b00;
 $mbta-bus: #ffc72c;
+$mbta-silver: #6c777e;
 
 $sidebar-width: 108px;
 
@@ -41,6 +42,7 @@ $text-disabled: #c6c6c9;
 $text-secondary: #c1c7ce;
 
 $theme-primary: #384956;
+$theme-secondary: #495057;
 
 $border-primary: #8b9198;
 
@@ -53,3 +55,5 @@ $dark-bg: #0f1417;
 $text-link-primary: #c1e4ff;
 $text-invert: #212529;
 $bg-border-disabled: #353b41;
+
+$bg-elevation-4: #2b3741;