Merge pull request #5181 from HSLdevcom/DT-6578

DT-6578: Style fixes
HSLdevcom · Dec 2, 2024 · e39cfd3 · e39cfd3
2 parents 373966c + 31bfe6e
commit e39cfd3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
@@ -70,12 +70,12 @@ export default function NaviCard({
             legType={legType}
             time={time}
           />
-          <div type="button" className="navitop-arrow">
-            <Icon
-              img="icon-icon_arrow-collapse"
-              className={`cursor-pointer ${cardExpanded ? 'inverted' : ''}`}
-            />
-          </div>
+        </div>
+        <div type="button" className="navitop-arrow">
+          <Icon
+            img="icon-icon_arrow-collapse"
+            className={`cursor-pointer ${cardExpanded ? 'inverted' : ''}`}
+          />
         </div>
       </div>
       {cardExpanded && (

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -50,6 +50,7 @@ function NaviCardContainer(
   const handleClick = () => {
     setCardExpanded(!cardExpanded);
   };
+
   useEffect(() => {
     if (cardRef.current) {
       const contentHeight = cardRef.current.clientHeight;

diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js
@@ -38,7 +38,7 @@ export default function NaviInstructions(
         </div>
         {distance && duration && (
           <div className={cx('duration', fadeOut && 'fade-out')}>
-            {displayDistance(distance, config, intl.formatNumber)} &nbsp; (
+            {displayDistance(distance, config, intl.formatNumber)} (
             {durationToString(duration * 1000)})
           </div>
         )}

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
@@ -47,12 +47,14 @@
   top: 80px;
   width: 92%;
   margin-left: 4%;
-  border-radius: 15px;
+  border-radius: 8px;
   min-height: 70px;
   color: black;
   background-color: white !important;
   display: flex;
   align-items: center;
+  letter-spacing: -0.3px;
+  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
 
   &.expanded {
     max-height: unset;
@@ -62,9 +64,6 @@
     .inverted {
       transform: rotate(180deg);
     }
-
-    position: absolute;
-    right: 20px;
   }
 
   .content {
@@ -149,7 +148,7 @@
             margin-left: 10px;
             font-size: $font-size-small;
             font-weight: $font-weight-book;
-            max-width: 120px;
+            max-width: 85%;
             text-align: left;
             align-content: center;
           }
@@ -170,6 +169,7 @@
         font-size: $font-size-xsmall;
         font-weight: $font-weight-book;
         display: flex;
+        margin-top: 4px;
       }
     }
 
@@ -180,7 +180,7 @@
 
       .extension-divider {
         border: 1px solid #ddd;
-        width: 75%;
+        width: 85%;
         margin-left: 35px;
         margin-top: var(--space-s);
         margin-bottom: var(--space-s);
@@ -229,6 +229,7 @@
           margin-left: var(--space-xs);
           justify-content: center;
           font-size: $font-size-small;
+          max-width: 85%;
         }
       }
 
@@ -361,7 +362,7 @@
   height: 69px;
   margin-left: 5%;
   width: 90%;
-  top: 160px;
+  letter-spacing: -0.3px;
 
   div:first-child {
     margin-top: 0;
@@ -382,10 +383,12 @@
 
   .info-stack-item {
     position: relative;
-    border-radius: 15px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     padding: 16px;
+    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
+    animation: slideIn 0.5s ease-out forwards;
 
     .icon-container {
       display: flex;
@@ -403,6 +406,7 @@
 
       .navi-alert-content {
         width: 100%;
+        margin: 0 8px;
       }
     }
 
@@ -412,7 +416,7 @@
       .navi-alert-content {
         display: flex;
         flex-direction: column;
-        margin-left: 8px;
+        margin: 0 8px;
 
         span:first-child {
           font-weight: $font-weight-medium;
@@ -460,13 +464,13 @@
       margin-left: 1px;
 
       .icon-container {
-        height: 24px;
-        width: 24px;
+        height: 32px;
+        width: 32px;
 
         .icon {
           &.notification-close {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
           }
         }
       }
@@ -499,6 +503,7 @@
       display: flex;
       flex-direction: column;
       margin-left: 8px;
+      margin-right: 8px;
       width: 100%;
 
       span:first-child {