UI: Polish TimeTableScreen layout and typography

core/date-time/src/main/kotlin/xyz/ksharma/krail/core/datetime/DateTimeHelper.kt

@@ -75,7 +75,7 @@ object DateTimeHelper {
             totalMinutes < 0 -> "${totalMinutes.absoluteValue} mins ago"
             totalMinutes == 0L -> "Now"
             hours == 1L -> "In ${hours.absoluteValue}h ${partialMinutes.absoluteValue}m"
-            hours >= 2 -> "In ${hours.absoluteValue} h"
+            hours >= 2 -> "In ${hours.absoluteValue}h"
             else -> "In ${totalMinutes.absoluteValue} ${if (totalMinutes.absoluteValue == 1L) "min" else "mins"}"
         }
         Timber.d("\t minutes: $partialMinutes, hours: $hours, formattedDifference: $formattedDifference -> originTime")

core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextFieldButton.kt

@@ -50,7 +50,7 @@ fun TextFieldButton(
                 .fillMaxWidth()
                 .height(TextFieldHeight)
                 .clip(RoundedCornerShape(TextFieldHeight.div(2)))
-                .background(color = KrailTheme.colors.surface)
+                .background(color = KrailTheme.colors.background)
                 .clickable(role = Role.Button, onClick = onClick)
                 .padding(horizontal = 16.dp, vertical = 4.dp),
             contentAlignment = Alignment.CenterStart,

core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TitleBar.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
@@ -32,7 +33,8 @@ fun TitleBar(
         modifier = modifier
             .statusBarsPadding()
             .fillMaxWidth()
-            .padding(vertical = 16.dp, horizontal = 16.dp),
+            .padding(horizontal = 16.dp)
+            .heightIn(min = 56.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically,
     ) {

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt

@@ -1,5 +1,6 @@
 package xyz.ksharma.krail.trip.planner.ui.components
 
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -66,6 +67,7 @@ fun LegView(
     Column(
         modifier = modifier
             .fillMaxWidth()
+            .animateContentSize()
             .background(
                 color = transportModeBackgroundColor(transportMode = transportModeLine.transportMode),
                 shape = RoundedCornerShape(12.dp),

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/StopSearchListItem.kt

@@ -44,7 +44,7 @@ fun StopSearchListItem(
     ) {
         Text(
             text = stopName,
-            style = KrailTheme.typography.bodyLarge,
+            style = KrailTheme.typography.titleSmall,
         )
         Row(
             horizontalArrangement = Arrangement.spacedBy(8.dp),

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt

@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -28,10 +27,12 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toImmutableList
 import xyz.ksharma.krail.design.system.components.Text
 import xyz.ksharma.krail.design.system.components.TitleBar
@@ -104,14 +105,15 @@ fun TimeTableScreen(
                         trip,
                         modifier = Modifier
                             .fillMaxWidth()
-                            .clip(
-                                shape = RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp),
-                            )
                             .background(color = themeColor),
                     )
                 }
             }
 
+            item {
+                Spacer(modifier = Modifier.height(16.dp))
+            }
+
             if (timeTableState.isLoading) {
                 item {
                     Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -156,7 +158,7 @@ fun TimeTableScreen(
                             onEvent(TimeTableUiEvent.JourneyCardClicked(journey.journeyId))
                         },
                         modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp),
+                            .padding(horizontal = 12.dp, vertical = 8.dp),
                     )
                 }
             } else {
@@ -185,22 +187,22 @@ private fun OriginDestination(
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
-            .padding(bottom = 12.dp),
+            .padding(bottom = 16.dp),
     ) {
         Row(
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
                 .timeLineTop(
                     color = KrailTheme.colors.onSurface,
-                    strokeWidth = 2.dp,
-                    circleRadius = 4.dp,
+                    strokeWidth = 3.dp,
+                    circleRadius = 5.dp,
                 )
-                .padding(start = 12.dp, bottom = 4.dp),
+                .padding(start = 12.dp, bottom = 8.dp),
         ) {
             Text(
                 text = trip.fromStopName,
-                style = KrailTheme.typography.bodyLarge,
+                style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
             )
         }
 
@@ -210,14 +212,14 @@ private fun OriginDestination(
             modifier = Modifier
                 .timeLineBottom(
                     color = KrailTheme.colors.onSurface,
-                    strokeWidth = 2.dp,
-                    circleRadius = 4.dp,
+                    strokeWidth = 3.dp,
+                    circleRadius = 5.dp,
                 )
-                .padding(start = 12.dp, top = 4.dp),
+                .padding(start = 12.dp, top = 8.dp),
         ) {
             Text(
                 text = trip.toStopName,
-                style = KrailTheme.typography.bodyLarge,
+                style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
             )
         }
     }
@@ -254,7 +256,7 @@ fun JourneyCardItem(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun PreviewOriginDestination() {
     KrailTheme {
@@ -269,3 +271,39 @@ private fun PreviewOriginDestination() {
         )
     }
 }
+
+@PreviewLightDark
+@Composable
+private fun PreviewTimeTableScreen() {
+    KrailTheme {
+        TimeTableScreen(
+            timeTableState = TimeTableState(
+                trip = Trip(
+                    fromStopName = "From Stop",
+                    toStopName = "To Stop",
+                    fromStopId = "123",
+                    toStopId = "456",
+                ),
+                journeyList = listOf(
+                    TimeTableState.JourneyCardInfo(
+                        timeText = "12:00",
+                        platformText = 'A',
+                        originTime = "12:00",
+                        destinationTime = "12:30",
+                        travelTime = "30 mins",
+                        transportModeLines = persistentListOf(
+                            TransportModeLine(
+                                transportMode = TransportMode.Bus(),
+                                lineName = "123",
+                            ),
+                        ),
+                        legs = persistentListOf(),
+                        originUtcDateTime = "2024-11-01T12:00:00Z",
+                    ),
+                ).toImmutableList(),
+            ),
+            expandedJourneyId = null,
+            onEvent = {},
+        )
+    }
+}