fix: streamlined markup and classes

HSLdevcom · Dec 27, 2024 · f65f563 · f65f563
1 parent 28595fe
commit f65f563
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 130 deletions.
diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
@@ -1,13 +1,13 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-import { legShape, configShape } from '../../../util/shapes';
-import Icon from '../../Icon';
 import { isRental } from '../../../util/legUtils';
-import NaviInstructions from './NaviInstructions';
+import { getRouteMode } from '../../../util/modeUtils';
+import { configShape, legShape } from '../../../util/shapes';
+import Icon from '../../Icon';
 import NaviCardExtension from './NaviCardExtension';
+import NaviInstructions from './NaviInstructions';
 import { LEGTYPE } from './NaviUtils';
-import { getRouteMode } from '../../../util/modeUtils';
 
 const iconMap = {
   BICYCLE: 'icon-icon_cyclist',
@@ -29,46 +29,44 @@ export default function NaviCard(
   { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin },
   { config },
 ) {
+  let mainCardContent;
   if (legType === LEGTYPE.PENDING) {
-    return (
+    mainCardContent = (
       <FormattedMessage
         id="navigation-journey-start"
         values={{ time: startTime }}
       />
     );
-  }
-  if (legType === LEGTYPE.END) {
-    return <FormattedMessage id="navigation-journey-end" />;
-  }
-  if (!leg && !nextLeg) {
+  } else if (legType === LEGTYPE.END) {
+    mainCardContent = <FormattedMessage id="navigation-journey-end" />;
+  } else if (!leg && !nextLeg) {
     return null;
-  }
-  let iconColor = 'currentColor';
-  let iconName;
-  let instructions = '';
-  if (legType === LEGTYPE.TRANSIT) {
-    const m = getRouteMode(leg.route, config);
-    iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color;
-    iconName = iconMap[m.toUpperCase()];
+  } else {
+    let iconColor = 'currentColor';
+    let iconName;
+    let instructions = '';
+    if (legType === LEGTYPE.TRANSIT) {
+      const m = getRouteMode(leg.route, config);
+      iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color;
+      iconName = iconMap[m.toUpperCase()];
 
-    instructions = `navileg-in-transit`;
-  } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) {
-    if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') {
-      instructions = `navileg-rent-scooter`;
-    } else {
-      instructions = 'rent-cycle-at';
+      instructions = `navileg-in-transit`;
+    } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) {
+      if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') {
+        instructions = `navileg-rent-scooter`;
+      } else {
+        instructions = 'rent-cycle-at';
+      }
+      iconName = iconMap[leg.mode];
+    } else if (legType === LEGTYPE.MOVE) {
+      instructions = `navileg-${leg?.mode.toLowerCase()}`;
+      iconName = iconMap.WALK;
+    } else if (legType === LEGTYPE.WAIT) {
+      iconName = iconMap.WAIT;
     }
-    iconName = iconMap[leg.mode];
-  } else if (legType === LEGTYPE.MOVE) {
-    instructions = `navileg-${leg?.mode.toLowerCase()}`;
-    iconName = iconMap.WALK;
-  } else if (legType === LEGTYPE.WAIT) {
-    iconName = iconMap.WAIT;
-  }
 
-  return (
-    <div className="navi-top-card">
-      <div className="main-card">
+    mainCardContent = (
+      <>
         <Icon img={iconName} className="mode" color={iconColor} />
         <div className={`instructions ${cardExpanded ? 'expanded' : ''}`}>
           <NaviInstructions
@@ -81,13 +79,18 @@ export default function NaviCard(
             origin={origin}
           />
         </div>
-        <div type="button" className="navitop-arrow">
+        <div type="button" className="navi-top-card-arrow">
           <Icon
             img="icon-icon_arrow-collapse"
             className={`cursor-pointer ${cardExpanded ? 'inverted' : ''}`}
           />
         </div>
-      </div>
+      </>
+    );
+  }
+  return (
+    <div className="main-card">
+      <div className="content">{mainCardContent}</div>
       {cardExpanded && (
         <NaviCardExtension
           legType={legType}

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -215,22 +215,20 @@ function NaviCardContainer(
     >
       <button
         type="button"
-        className={`navitop ${cardExpanded ? 'expanded' : ''}`}
+        className={`navi-top-card-button ${cardExpanded ? 'expanded' : ''}`}
         onClick={handleClick}
         ref={cardRef}
       >
-        <div className="content">
-          <NaviCard
-            leg={l}
-            nextLeg={nextLeg}
-            cardExpanded={cardExpanded}
-            legType={legType}
-            startTime={legTimeStr(firstLeg.start)}
-            time={time}
-            position={position}
-            origin={origin}
-          />
-        </div>
+        <NaviCard
+          leg={l}
+          nextLeg={nextLeg}
+          cardExpanded={cardExpanded}
+          legType={legType}
+          startTime={legTimeStr(firstLeg.start)}
+          time={time}
+          position={position}
+          origin={origin}
+        />
       </button>
       {activeMessages.length > 0 && (
         <NaviStack messages={activeMessages} handleRemove={handleRemove} />

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
@@ -61,7 +61,7 @@ $fixed-width-padding: 16px;
   }
 }
 
-.navitop {
+.navi-top-card-button {
   margin: 0 var(--space-s) 5px var(--space-s);
   border-radius: 8px;
   min-height: 70px;
@@ -78,116 +78,114 @@ $fixed-width-padding: 16px;
     max-height: unset;
   }
 
-  .navitop-arrow {
+  .navi-top-card-arrow {
     .inverted {
       transform: rotate(180deg);
     }
   }
 
-  .content {
+  .main-card {
     width: 100%;
+    margin: var(--space-m) var(--space-l);
 
-    .navi-top-card {
-      margin: 16px 24px 16px;
+    .content {
+      display: flex;
+      flex-direction: row;
+      color: black;
+      justify-content: center;
 
-      .main-card {
-        display: flex;
-        flex-direction: row;
+      .mode {
+        width: 32px;
+        height: 32px;
         color: black;
+        margin-right: var(--space-s);
+        margin-top: var(--space-xxs);
+      }
+    }
 
-        .mode {
-          width: 32px;
-          height: 32px;
-          color: black;
-          margin-right: var(--space-s);
-          margin-top: var(--space-xxs);
-        }
+    .instructions {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      font-size: $font-size-normal;
+      font-weight: $font-weight-medium;
+
+      &.expanded {
+        margin-bottom: 0;
       }
 
-      .instructions {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+      .destination-header {
         font-size: $font-size-normal;
-        font-weight: $font-weight-medium;
+        font-weight: 500;
+        display: flex;
+      }
 
-        &.expanded {
-          margin-bottom: 0;
-        }
+      .vehicle-leg {
+        display: flex;
+        margin-top: var(--space-xs);
+        font-weight: $font-weight-book;
+        width: 80%;
+        text-align: left;
+      }
 
-        .destination-header {
-          font-size: $font-size-normal;
-          font-weight: 500;
+      .wait-leg {
+        display: flex;
+        margin-top: 3px;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .route-info {
           display: flex;
+          align-self: flex-start;
+          margin-bottom: var(--space-xcs);
         }
 
-        .vehicle-leg {
-          display: flex;
-          margin-top: var(--space-xs);
+        .wait-duration {
           font-weight: $font-weight-book;
-          width: 80%;
-          text-align: left;
+          margin-top: var(--space-xs);
         }
 
-        .wait-leg {
-          display: flex;
-          margin-top: 3px;
-          flex-direction: column;
-          align-items: flex-start;
-
-          .route-info {
-            display: flex;
-            align-self: flex-start;
-            margin-bottom: var(--space-xcs);
-          }
-
-          .wait-duration {
-            font-weight: $font-weight-book;
-            margin-top: var(--space-xs);
-          }
-
-          .bar {
-            border-radius: $border-radius;
-          }
-
-          .route-number {
-            .vcenter-children {
-              .vehicle-number {
-                color: white;
-                margin-top: 5px;
-              }
+        .bar {
+          border-radius: $border-radius;
+        }
 
-              display: flex;
+        .route-number {
+          .vcenter-children {
+            .vehicle-number {
+              color: white;
+              margin-top: 5px;
             }
-          }
 
-          .headsign {
-            margin-left: 10px;
-            font-size: $font-size-small;
-            font-weight: $font-weight-book;
-            max-width: 85%;
-            text-align: left;
-            align-content: center;
+            display: flex;
           }
+        }
 
-          .icon {
-            margin-top: 2px;
-            height: 25px;
-            width: 25px;
-          }
+        .headsign {
+          margin-left: 10px;
+          font-size: $font-size-small;
+          font-weight: $font-weight-book;
+          max-width: 85%;
+          text-align: left;
+          align-content: center;
         }
-      }
 
-      .duration {
-        &.fade-out {
-          animation: fadeOut 3s forwards;
+        .icon {
+          margin-top: 2px;
+          height: 25px;
+          width: 25px;
         }
+      }
+    }
 
-        font-size: $font-size-xsmall;
-        font-weight: $font-weight-book;
-        display: flex;
-        margin-top: 4px;
+    .duration {
+      &.fade-out {
+        animation: fadeOut 3s forwards;
       }
+
+      font-size: $font-size-xsmall;
+      font-weight: $font-weight-book;
+      display: flex;
+      margin-top: 4px;
     }
 
     .extension {