UI: Refactor TransportModeIcon component and usage (#596)

Update impl of TransportModeIcon
- Refactor TransportModeIcon to accept a TransportMode instead of individual letter and color props
- Add size variants (Small, Medium, Large) with corresponding dp values
- Improve border handling with consistent styling
- Update typography and text styling to use theme tokens

Update usages
- Update JourneyCard to use new TransportModeIcon API
- Update LegView to use simplified TransportModeIcon props
- Update SavedTripCard to use new TransportMode parameter
- Update StopSearchListItem to use simplified icon implementation
- Update TransportModeChip to use new icon component
- Update TransportModeInfo to use new API structure
- Fix TransportModeBadge height to use dp instead of sp

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt

@@ -369,10 +369,7 @@ fun DefaultJourneyCardContent(
                         horizontalArrangement = Arrangement.spacedBy(6.dp),
                     ) {
                         transportModeList.forEachIndexed { index, mode ->
-                            TransportModeIcon(
-                                letter = mode.name.first(),
-                                backgroundColor = mode.colorCode.hexToComposeColor(),
-                            )
+                            TransportModeIcon(transportMode = mode)
                             if (index != transportModeList.lastIndex) {
                                 SeparatorIcon(modifier = Modifier.align(Alignment.CenterVertically))
                             }

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

@@ -152,8 +152,7 @@ fun LegView(
                         )
                     } else {
                         TransportModeInfo(
-                            letter = transportModeLine.transportMode.name.first(),
-                            backgroundColor = transportModeLine.transportMode.colorCode.hexToComposeColor(),
+                            transportMode = transportModeLine.transportMode,
                             badgeText = transportModeLine.lineName,
                             badgeColor = transportModeLine.lineColorCode.hexToComposeColor(),
                         )
@@ -344,8 +343,7 @@ private fun StopsRow(
         }
 
         TransportModeInfo(
-            letter = line.transportMode.name.first(),
-            backgroundColor = line.transportMode.colorCode.hexToComposeColor(),
+            transportMode = line.transportMode,
             badgeText = line.lineName,
             badgeColor = line.lineColorCode.hexToComposeColor(),
             modifier = Modifier.align(Alignment.CenterVertically),

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SavedTripCard.kt

@@ -59,10 +59,7 @@ fun SavedTripCard(
         verticalAlignment = Alignment.CenterVertically,
     ) {
         primaryTransportMode?.let {
-            TransportModeIcon(
-                letter = primaryTransportMode.name.first().uppercaseChar(),
-                backgroundColor = primaryTransportMode.colorCode.hexToComposeColor(),
-            )
+            TransportModeIcon(transportMode = primaryTransportMode,)
         }
 
         Column(

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

@@ -53,10 +53,7 @@ fun StopSearchListItem(
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             transportModeSet.forEach { mode ->
-                TransportModeIcon(
-                    letter = mode.name.first(),
-                    backgroundColor = mode.colorCode.hexToComposeColor(),
-                )
+                TransportModeIcon(transportMode = mode)
             }
         }
     }

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeBadge.kt

@@ -34,7 +34,7 @@ fun TransportModeBadge(
     ) {
         Box(
             modifier = modifier
-                .requiredHeightIn(with(density) { 22.sp.toDp() })
+                .requiredHeightIn(with(density) { 24.toDp() })
                 .clip(shape = RoundedCornerShape(percent = 20))
                 .background(color = backgroundColor),
             contentAlignment = Alignment.Center,

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeChip.kt

@@ -81,30 +81,12 @@ fun TransportModeChip(
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
             // Make this a separate component - TransportModeIcon
-            Box(
-                modifier = Modifier
-                    .size(32.dp.toAdaptiveDecorativeIconSize())
-                    .clip(CircleShape)
-                    .background(
-                        color = transportMode.colorCode.hexToComposeColor(),
-                        shape = CircleShape,
-                    )
-                    .border(
-                        3.dp.toAdaptiveDecorativeIconSize(), // 3.dp is token value
-                        modeIconBorderColor,
-                        CircleShape,
-                    ),
-                contentAlignment = Alignment.Center,
-            ) {
-                CompositionLocalProvider(
-                    LocalTextColor provides Color.White,
-                ) {
-                    Text(
-                        text = transportMode.name.first().toString(),
-                        color = Color.White,
-                    )
-                }
-            }
+            TransportModeIcon(
+                transportMode = transportMode,
+                borderColor = modeIconBorderColor,
+                textColor = textColor,
+                displayBorder = true,
+            )
 
             Text(text = transportMode.name)
         }

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/TransportModeIcon.kt

@@ -3,131 +3,149 @@ package xyz.ksharma.krail.trip.planner.ui.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import xyz.ksharma.krail.taj.LocalContentAlpha
 import xyz.ksharma.krail.taj.LocalTextColor
+import xyz.ksharma.krail.taj.LocalTextStyle
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.hexToComposeColor
 import xyz.ksharma.krail.taj.theme.KrailTheme
+import xyz.ksharma.krail.taj.toAdaptiveDecorativeIconSize
+import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 
 @Composable
 fun TransportModeIcon(
-    letter: Char,
-    backgroundColor: Color,
+    transportMode: TransportMode,
     modifier: Modifier = Modifier,
-    borderEnabled: Boolean = false,
-    iconSize: TextUnit = 22.sp,
-    fontSize: TextUnit? = null,
+    borderColor: Color = Color.White,
+    textColor: Color = Color.White,
+    displayBorder: Boolean = false,
+    size: TransportModeIconSize = TransportModeIconSize.Small,
 ) {
-    val density = LocalDensity.current
-    val textStyle = KrailTheme.typography.labelLarge
-
-    // Content alphas should always be 100% for Transport related icons
     CompositionLocalProvider(
-        LocalContentAlpha provides 1f,
-        LocalTextColor provides Color.White,
+        LocalTextColor provides textColor,
+        LocalTextStyle provides KrailTheme.typography.titleMedium,
     ) {
         Box(
             modifier = modifier
-                .clip(shape = CircleShape)
-                .requiredSize(with(density) { iconSize.toDp() })
-                .aspectRatio(1f)
-                .borderIfEnabled(enabled = borderEnabled)
-                .background(color = backgroundColor),
+                .size(size.dpSize.toAdaptiveDecorativeIconSize())
+                .clip(CircleShape)
+                .background(
+                    color = transportMode.colorCode.hexToComposeColor(),
+                    shape = CircleShape,
+                )
+                .borderIfEnabled(
+                    enabled = displayBorder,
+                    color = borderColor,
+                ),
             contentAlignment = Alignment.Center,
         ) {
-            Text(
-                text = "$letter",
-                color = Color.White,
-                // todo - need concrete token for style, meanwhile keep same as TransportModeBadge,
-                style = textStyle.copy(fontSize = fontSize ?: textStyle.fontSize),
-            )
+            CompositionLocalProvider(
+                LocalTextColor provides Color.White,
+            ) {
+                Text(
+                    text = transportMode.name.first().toString().uppercase(),
+                    color = Color.White,
+                )
+            }
         }
     }
 }
 
-private fun Modifier.borderIfEnabled(enabled: Boolean): Modifier =
+@Composable
+private fun Modifier.borderIfEnabled(enabled: Boolean, color: Color): Modifier =
     if (enabled) {
-        this.then(border(width = 1.dp, color = Color.White, shape = CircleShape))
-    } else {
-        this
-    }
+        this.then(
+            border(
+                width = 3.dp.toAdaptiveDecorativeIconSize(),
+                color = color,
+                shape = CircleShape,
+            )
+        )
+    } else this
 
-// region Previews
+enum class TransportModeIconSize(val dpSize: Dp) {
+    Small(24.dp), Medium(28.dp), Large(32.dp)
+}
 
+// region Previews
 
 @Composable
 private fun TrainPreview() {
     KrailTheme {
-        TransportModeIcon(backgroundColor = "#F6891F".hexToComposeColor(), letter = 'T')
+        TransportModeIcon(
+            transportMode = TransportMode.Train(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = false
+        )
     }
 }
 
-
 @Composable
 private fun BusPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#00B5EF".hexToComposeColor(),
-            letter = 'B',
+            transportMode = TransportMode.Bus(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = false
         )
     }
 }
 
-
 @Composable
 private fun MetroPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#009B77".hexToComposeColor(),
-            letter = 'M',
+            transportMode = TransportMode.Metro(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = false
         )
     }
 }
 
-
 @Composable
 private fun LightRailPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#EE343F".hexToComposeColor(),
-            letter = 'L',
+            transportMode = TransportMode.LightRail(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = false
         )
     }
 }
 
-
 @Composable
 private fun FerryPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#5AB031".hexToComposeColor(),
-            letter = 'F',
+            transportMode = TransportMode.Ferry(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = false
         )
     }
 }
 
-
 @Composable
 private fun TrainWithBackgroundPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#F6891F".hexToComposeColor(),
-            letter = 'T',
-            borderEnabled = true,
+            transportMode = TransportMode.Train(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = true
         )
     }
 }
@@ -136,45 +154,46 @@ private fun TrainWithBackgroundPreview() {
 private fun BusWithBackgroundPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#00B5EF".hexToComposeColor(),
-            letter = 'B',
-            borderEnabled = true,
+            transportMode = TransportMode.Bus(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = true
         )
     }
 }
 
-
 @Composable
 private fun MetroWithBackgroundPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#009B77".hexToComposeColor(),
-            letter = 'M',
-            borderEnabled = true,
+            transportMode = TransportMode.Metro(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = true
         )
     }
 }
 
-
 @Composable
 private fun LightRailWithBackgroundPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#EE343F".hexToComposeColor(),
-            letter = 'L',
-            borderEnabled = true,
+            transportMode = TransportMode.LightRail(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = true
         )
     }
 }
 
-
 @Composable
 private fun FerryWithBackgroundPreview() {
     KrailTheme {
         TransportModeIcon(
-            backgroundColor = "#5AB031".hexToComposeColor(),
-            letter = 'F',
-            borderEnabled = true,
+            transportMode = TransportMode.Ferry(),
+            borderColor = Color.White,
+            textColor = Color.White,
+            displayBorder = true,
         )
     }
 }