Fix horizontal rules.

mbta · Nov 5, 2024 · 928bbef · 928bbef
1 parent 3803e25
commit 928bbef
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/assets/css/v2/elevator/elevator_closures.scss b/assets/css/v2/elevator/elevator_closures.scss
@@ -18,10 +18,11 @@
 
   hr {
     width: 100%;
-    height: 24px;
+    min-height: 24px;
     margin-top: 0;
     margin-bottom: 0;
     background-color: $cool-black-15;
+    border: none;
   }
 
   .outside-alert-list {
@@ -31,6 +32,14 @@
     position: relative;
     font-family: Inter;
 
+    hr {
+      background-color: $true-grey-45;
+      opacity: 50%;
+      min-height: 2px;
+      margin-top: 24px;
+      border: none;
+    }
+
     .header {
       max-height: 432px;
       display: flex;
@@ -58,16 +67,11 @@
             color: $cool-black-15;
           }
 
-          hr {
-            background-color: $true-grey-45;
-            height: 2px;
-            margin-bottom: 24px;
-          }
-
           &__name-and-pills {
             display: flex;
             align-items: center;
             gap: 24px;
+            margin-bottom: 14px;
 
             .route-pill {
               width: 132px;

diff --git a/assets/src/components/v2/elevator/elevator_closures.tsx b/assets/src/components/v2/elevator/elevator_closures.tsx
@@ -29,7 +29,6 @@ const ClosureRow = ({ alert }: ClosureRowProps) => {
   console.log(routes);
   return (
     <div className="alert-row">
-      <hr />
       <div className="alert-row__name-and-pills">
         {routes.map((route) => (
           <RoutePill pill={route} key={routePillKey(route)} />
@@ -39,6 +38,7 @@ const ClosureRow = ({ alert }: ClosureRowProps) => {
       <div className="alert-row__elevator-name">
         {elevator_name} ({elevator_id})
       </div>
+      <hr />
     </div>
   );
 };
@@ -130,6 +130,7 @@ const OutsideAlertList = ({
           <AccessibilityAlert height={128} width={128} />
         </div>
       </div>
+      <hr />
       <div className="alert-list-container">
         <div className="alert-list" ref={ref}>
           {visibleAlerts.map((alert) => (