From 227b0ef0abcf0a3cf452ebe6c9d2fd2149f18144 Mon Sep 17 00:00:00 2001
From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:48:28 +1100
Subject: [PATCH] Update JourneyDetailCard UI

---
 .../ui/components/JourneyDetailCard.kt        | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyDetailCard.kt b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyDetailCard.kt
index a688ac15..0720f6f6 100644
--- a/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyDetailCard.kt
+++ b/feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyDetailCard.kt
@@ -2,6 +2,8 @@ package xyz.ksharma.krail.trip_planner.ui.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -12,6 +14,7 @@ import xyz.ksharma.krail.design.system.components.Text
 import xyz.ksharma.krail.design.system.preview.ComponentPreviews
 import xyz.ksharma.krail.design.system.theme.KrailTheme
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun JourneyDetailCard(
     header: String,
@@ -24,26 +27,21 @@ fun JourneyDetailCard(
         Text(header, style = KrailTheme.typography.titleMedium)
 
         journeyLegList.forEach { leg ->
-            Row(
+            FlowRow(
                 modifier = Modifier.padding(vertical = 12.dp),
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp),
             ) {
-                Row(
-                    modifier = Modifier,
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
-                ) {
-                    TransportModeInfo(
-                        backgroundColor = leg.transportation.backgroundColor,
-                        letter = leg.transportation.letter,
-                        badgeText = leg.transportation.badgeText,
-                    )
-                }
+                TransportModeInfo(
+                    backgroundColor = leg.transportation.backgroundColor,
+                    letter = leg.transportation.letter,
+                    badgeText = leg.transportation.badgeText,
+                )
 
-                // TODO - Flow to next line instead of same Row for large font size/Measure.
                 Text(
-                    leg.headline,
-                    style = KrailTheme.typography.bodyLarge,
-                    modifier = Modifier.weight(1f)
+                    text = leg.headline,
+                    color = KrailTheme.colors.onPrimaryContainer,
+                    style = KrailTheme.typography.bodyMedium,
                 )
             }