feat(LiveComponents.TripPlannerForm): fixes for mode selector + updat…

…ed MbtaMetro & overhauled typography (#2194)

assets/css/_buttons.scss

@@ -145,10 +145,10 @@
 }
 
 .c-inline-buttons {
-  margin: -1em -calc(#{$half-gutter} / 2) 1em;
+  margin-bottom: 1em;
 
   .btn {
-    margin: 1em calc(#{$half-gutter} / 2) 0;
+    margin-bottom: 0;
     white-space: normal;
 
     @include media-breakpoint-down(sm) {

assets/css/_errors.scss

@@ -3,13 +3,13 @@
 // Used in the error layout page
 .error-page {
   @include media-breakpoint-between(md, xxl) {
-    margin-top: $base-spacing__new * 10;
+    margin-top: 40px;
   }
   @include media-breakpoint-only(sm) {
-    margin: $base-spacing__new * 6 $base-spacing__new * 10;
+    margin: 24px 40px;
   }
   @include media-breakpoint-only(xs) {
-    margin: $base-spacing__new * 4 $base-spacing__new * 6;
+    margin: 16px 24px;
   }
 }
 
@@ -29,9 +29,9 @@
 .error-pre-title {
   color: $gray;
   line-height: 1.4;
-  margin-bottom: $base-spacing__new * 4;
+  margin-bottom: 16px;
   @include media-breakpoint-only(sm) {
-    margin-bottom: $base-spacing__new * 2;
+    margin-bottom: 8px;
   }
 }
 
@@ -47,7 +47,7 @@
   flex-direction: column;
   @include media-breakpoint-up(sm) {
     flex-direction: row-reverse;
-    margin-top: $base-spacing__new * 6;
+    margin-top: 24px;
   }
   @include media-breakpoint-up(xxl) {
     margin-top: 0;
@@ -56,34 +56,34 @@
 
 .error-details-container {
   @include media-breakpoint-only(sm) {
-    margin-right: $base-spacing__new * 6;
-    margin-top: $base-spacing__new * 4;
+    margin-right: 24px;
+    margin-top: 16px;
   }
   @include media-breakpoint-between(md, lg) {
-    margin-right: $base-spacing__new * 10;
+    margin-right: 40px;
   }
   @include media-breakpoint-only(xxl) {
-    margin-right: $base-spacing__new * 15;
+    margin-right: 60px;
   }
 }
 
 .error-svg-container {
   flex: 0 0 auto;
   @include media-breakpoint-only(xxl) {
-    margin: 0 $base-spacing__new * 20;
+    margin: 0 80px;
     width: 380px;
   }
   @include media-breakpoint-between(md,lg) {
-    margin: 0 $base-spacing__new * 10;
+    margin: 0 40px;
     width: 280px;
   }
   @include media-breakpoint-down(sm) {
-    margin: 0 $base-spacing__new * 6;
+    margin: 0 24px;
     width: 220px;
   }
   @include media-breakpoint-only(xs) {
     align-self: center;
-    margin: $base-spacing__new * 5;
+    margin: 20px;
   }
 }
 

assets/css/_global-navigation.scss

@@ -68,9 +68,9 @@ nav.m-menu--desktop {
     border: 0;
     color: $brand-primary-lightest-contrast;
     cursor: pointer;
-    margin-left: $base-spacing__new;
+    margin-left: 4px;
     outline: none;
-    padding: 0 $base-spacing__new;
+    padding: 0 4px;
     text-decoration: none;
     width: 5em; // arbitrary, but would be too wide otherwise
 
@@ -107,10 +107,10 @@ nav.m-menu--desktop {
   // place for up/down arrows
   .c-indicator--angle {
     @include fa-icon-solid($fa-var-caret-down);
-    margin-left: $base-spacing__new;
+    margin-left: 4px;
     pointer-events: none;
     @include media-breakpoint-only(xxl) {
-      margin-left: $space-2_new;
+      margin-left: 8px;
     }
   }
 
@@ -177,7 +177,7 @@ nav.m-menu--desktop {
   }
 
   .m-menu__link {
-    padding: $space-2_new 0;
+    padding: 8px 0;
   }
 
   // Alternate layout for Contact menu
@@ -190,7 +190,7 @@ nav.m-menu--desktop {
     }
 
     .m-menu-feature.emergency-contacts.desktop {
-      border-radius: 0 $space-2_new $space-2_new;
+      border-radius: 0 8px 8px;
       grid-row: 3 / 4;
       width: unset;
     }
@@ -208,8 +208,8 @@ nav.m-menu--desktop {
   font-size: $font-size-base-sm;
   font-weight: $headings-font-weight;
   line-height: 1.75;
-  margin-bottom: $space-4_new;
-  padding-bottom: $base-spacing__new;
+  margin-bottom: 16px;
+  padding-bottom: 4px;
   text-transform: uppercase;
   white-space: normal;
 
@@ -244,11 +244,11 @@ nav.m-menu--desktop {
 // Contact numbers & Popular fares sections
 .m-menu__feature {
   background-color: $brand-primary-darkest;
-  border-radius: 0 $space-2_new $space-2_new 0;
+  border-radius: 0 8px 8px 0;
   font-size: $font-size-base-sm;
   margin-bottom: 8px;
   margin-top: 1rem;
-  padding: $space-3_new;
+  padding: 12px;
   width: calc(100% - 40px);
 
   // Description list
@@ -261,7 +261,7 @@ nav.m-menu--desktop {
   dt,
   dd {
     border-bottom: 1px solid $brand-primary;
-    padding: $space-2_new 0;
+    padding: 8px 0;
 
     &:last-of-type {
       border-bottom: unset;
@@ -279,7 +279,7 @@ nav.m-menu--desktop {
   dd {
     font-weight: $headings-font-weight;
     margin-bottom: 0;
-    padding-right: $space-4_new;
+    padding-right: 16px;
     text-align: right;
 
     &:last-of-type {
@@ -295,7 +295,7 @@ nav.m-menu--desktop {
   }
 
   @include media-breakpoint-up(sm) {
-    border-radius: 0 $space-2_new $space-2_new;
+    border-radius: 0 8px 8px;
   }
 
   @include media-breakpoint-up(lg) {
@@ -305,7 +305,7 @@ nav.m-menu--desktop {
 
   // CSS for the Contact Numbers split-container
   &.top-section {
-    border-radius: 0 $space-2_new 0 0;
+    border-radius: 0 8px 0 0;
     margin-bottom: 2px;
   }
 
@@ -322,11 +322,11 @@ nav.m-menu--desktop {
   }
 
   &.bottom-section {
-    border-radius: 0 0 $space-2_new;
+    border-radius: 0 0 8px;
     margin-top: 0;
 
     @include media-breakpoint-up(sm) {
-      border-radius: 0 0 $space-2_new $space-2_new;
+      border-radius: 0 0 8px 8px;
     }
 
     .m-menu__feature_phone {
@@ -338,7 +338,7 @@ nav.m-menu--desktop {
 }
 
 .m-menu__feature_phone {
-  padding-top: $space-3_new;
+  padding-top: 12px;
   white-space: normal;
 
   a {

assets/css/_header.scss

@@ -198,8 +198,6 @@ nav.m-menu--mobile {
 }
 
 .m-menu__link {
-  @include font-link();
-
   align-items: center;
   display: flex;
   padding: 12px 12px 12px 24px;
@@ -220,13 +218,13 @@ nav.m-menu--mobile {
 
   .m-menu__section-heading {
     color: $brand-primary-lightest;
-    margin: $space-4_new 0 0 $space-4_new;
+    margin: 16px 0 0 16px;
   }
 
   .m-menu__section {
     border-bottom: 1px solid $brand-primary-light-contrast;
-    padding-bottom: $space-4_new;
-    padding-top: $space-2_new;
+    padding-bottom: 16px;
+    padding-top: 8px;
 
     @include media-breakpoint-only(sm) {
       margin-left: 40px;
@@ -242,7 +240,6 @@ nav.m-menu--mobile {
     margin: 0;
 
     .c-accordion-ui__trigger {
-      @include heading-4();
       border: 2px solid $brand-primary;
       color: $white;
 

assets/css/_select-custom.scss

@@ -1,7 +1,8 @@
 .c-select-custom {
   appearance: none;
   background-color: $white;
-  border: 0;
+  border: solid $border-width $brand-primary-dark;
+  border-radius: $border-radius;
   overflow: hidden;
   padding-right: $base-spacing * 2;
   text-overflow: ellipsis;
@@ -15,11 +16,10 @@
 }
 
 .c-select-custom__container {
-  background-color: $white;
-  border: solid $border-width $brand-primary-dark;
-  border-radius: $border-radius;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
   margin: calc(#{$base-spacing} / 2) 0;
-  padding: $base-spacing * .6; // match button height
   position: relative;
 
   &.error {

assets/css/_stop-card.scss

@@ -419,18 +419,6 @@ $radius: 4px;
       line-height: 1.95;
     }
   }
-  .departure-list__headsign {
-    @include heading-4();
-    font-weight: bold;
-    margin: 0;
-  }
-}
-
-.departure-card__times {
-  .no-real-time-data {
-    @extend .font-helvetica-neue;
-    @extend .fs-14;
-  }
 }
 
 .stop-departures--realtime {