From 375bb290fe5d30e71ac2db75bb83489d86870da3 Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Mon, 2 Dec 2024 14:04:57 +0200
Subject: [PATCH 1/2] style fixes

---
 app/component/itinerary/navigator/NaviCard.js | 12 +++----
 .../itinerary/navigator/NaviCardContainer.js  |  1 +
 .../itinerary/navigator/NaviInstructions.js   |  2 +-
 .../itinerary/navigator/navigator.scss        | 31 ++++++++++++-------
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
index ffaea0a7e0..386d5f6fc8 100644
--- 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
index 0299ca536c..bf6897b08c 100644
--- 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
index 3fc63f3c6a..12f18d8b9b 100644
--- 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
index 9651e1be1e..38bfa1386c 100644
--- 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,8 @@
 
       .navi-alert-content {
         width: 100%;
+        margin-left: 8px;
+        margin-right: 8px;
       }
     }
 
@@ -413,6 +418,7 @@
         display: flex;
         flex-direction: column;
         margin-left: 8px;
+        margin-right: 8px;
 
         span:first-child {
           font-weight: $font-weight-medium;
@@ -460,13 +466,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 +505,7 @@
       display: flex;
       flex-direction: column;
       margin-left: 8px;
+      margin-right: 8px;
       width: 100%;
 
       span:first-child {

From 31bfe6e8be57fc59e2cbf59929ac46e499e7299d Mon Sep 17 00:00:00 2001
From: Janne Antikainen <antiik91@gmail.com>
Date: Mon, 2 Dec 2024 14:07:58 +0200
Subject: [PATCH 2/2] simplify margi n

---
 app/component/itinerary/navigator/navigator.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 38bfa1386c..9b66bf223d 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -406,8 +406,7 @@
 
       .navi-alert-content {
         width: 100%;
-        margin-left: 8px;
-        margin-right: 8px;
+        margin: 0 8px;
       }
     }
 
@@ -417,8 +416,7 @@
       .navi-alert-content {
         display: flex;
         flex-direction: column;
-        margin-left: 8px;
-        margin-right: 8px;
+        margin: 0 8px;
 
         span:first-child {
           font-weight: $font-weight-medium;