Fix horizontal rules.

mbta · Nov 6, 2024 · 8f43924 · 8f43924
1 parent b290119
commit 8f43924
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/assets/css/v2/elevator/elevator_closures.scss b/assets/css/v2/elevator/elevator_closures.scss
@@ -16,39 +16,41 @@
     color: $cool-black-30;
   }
 
-  hr {
-    width: 100%;
+  hr.thick {
     min-height: 24px;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
     background-color: $cool-black-15;
     border: none;
   }
 
+  hr.thin {
+    min-height: 2px;
+    margin: 24px 0 0;
+    background-color: $true-grey-45;
+    border: none;
+    opacity: 0.5;
+  }
+
   .outside-alert-list {
     position: relative;
     height: 100%;
     font-family: Inter;
     background-color: $warm-neutral-90;
 
-    hr {
-      min-height: 2px;
-      margin-top: 24px;
-      background-color: $true-grey-45;
-      border: none;
-      opacity: 0.5;
-    }
-
-    .header {
-      display: flex;
-      max-height: 432px;
+    .header-container {
       margin: 48px;
-      font-size: 112px;
-      font-weight: 700;
-      line-height: 112px;
+      margin-bottom: 0;
+
+      .header {
+        display: flex;
+        max-height: 432px;
+        font-size: 112px;
+        font-weight: 700;
+        line-height: 112px;
 
-      &__title {
-        word-spacing: 9999px;
+        &__title {
+          word-spacing: 9999px;
+        }
       }
     }
 

diff --git a/assets/src/components/v2/elevator/elevator_closures.tsx b/assets/src/components/v2/elevator/elevator_closures.tsx
@@ -39,7 +39,7 @@ const ClosureRow = ({ alert }: ClosureRowProps) => {
       <div className="alert-row__elevator-name">
         {elevator_name} ({elevator_id})
       </div>
-      <hr />
+      <hr className="thin" />
     </div>
   );
 };
@@ -61,7 +61,7 @@ const InStationSummary = ({ alerts }: InStationSummaryProps) => {
           <NormalService height={72} width={72} fill="#145A06" />
         </span>
       </div>
-      <hr />
+      <hr className="thick" />
     </>
   );
 };
@@ -107,13 +107,15 @@ const OutsideAlertList = ({
 
   return (
     <div className="outside-alert-list">
-      <div className="header">
-        <div className="header__title">MBTA Elevator Closures</div>
-        <div>
-          <AccessibilityAlert height={128} width={128} />
+      <div className="header-container">
+        <div className="header">
+          <div className="header__title">MBTA Elevator Closures</div>
+          <div>
+            <AccessibilityAlert height={128} width={128} />
+          </div>
         </div>
+        <hr className="thin" />
       </div>
-      <hr />
       <div className="alert-list-container">
         {
           <div