From 056884ebef92851d04357b2cec2acd6d2d6e8354 Mon Sep 17 00:00:00 2001
From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com>
Date: Sat, 14 Dec 2024 14:34:26 +1100
Subject: [PATCH] UI: Update ThemeSelection radio button layout (#455)

### TL;DR
Updated the theme selection screen's radio button layout to display selected background in a even odd pattern.

### What changed?
- Renamed `TransportModeRadioButton` to `ThemeSelectionRadioButton`
- Modified the layout to support alternating left/right positioning
- Added corner radius logic to create connected button appearance
- Adjusted padding and spacing to accommodate the new grid layout
- Switched from `items` to `itemsIndexed` to track even/odd positioning

### Screenshots

https://github.com/user-attachments/assets/5c489489-075d-4786-80d0-9eb74fdc4384


### Why make this change?
Improves the visual presentation
---
 .../ui/themeselection/ThemeSelectionScreen.kt | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt
index 2c848fdc..b7918ebb 100644
--- a/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt
+++ b/feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/themeselection/ThemeSelectionScreen.kt
@@ -18,7 +18,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
@@ -134,10 +134,14 @@ fun ThemeSelectionScreen(
                     )
                 }
 
-                items(items = transportModes.toImmutableList(), key = { it.productClass }) { mode ->
-                    TransportModeRadioButton(
+                itemsIndexed(
+                    items = transportModes.toImmutableList(),
+                    key = { _, item -> item.productClass },
+                ) { index, mode ->
+                    ThemeSelectionRadioButton(
                         mode = mode,
                         selected = selectedProductClass == mode.productClass,
+                        isEvenPosition = index % 2 == 0,
                         onClick = { clickedMode ->
                             selectedProductClass = clickedMode.productClass
                         },
@@ -182,8 +186,9 @@ fun ThemeSelectionScreen(
 }
 
 @Composable
-private fun TransportModeRadioButton(
+private fun ThemeSelectionRadioButton(
     mode: TransportMode,
+    isEvenPosition: Boolean,
     onClick: (TransportMode) -> Unit,
     modifier: Modifier = Modifier,
     selected: Boolean = false,
@@ -193,25 +198,42 @@ private fun TransportModeRadioButton(
         label = "backgroundColor",
         animationSpec = tween(durationMillis = 300, easing = LinearEasing),
     )
+    val cornerRadius by remember { mutableStateOf(36.dp) }
 
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 12.dp)
-            .background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
+            .padding(
+                start = if (isEvenPosition) 12.dp else 0.dp,
+                end = if (isEvenPosition) 0.dp else 12.dp,
+            )
+            .background(
+                color = backgroundColor, shape = RoundedCornerShape(
+                    topStart = if (isEvenPosition) cornerRadius else 0.dp,
+                    topEnd = if (isEvenPosition) 0.dp else cornerRadius,
+                    bottomStart = if (isEvenPosition) cornerRadius else 0.dp,
+                    bottomEnd = if (isEvenPosition) 0.dp else cornerRadius,
+                )
+            )
             .clickable(
                 role = Role.Button,
                 indication = null,
                 interactionSource = remember { MutableInteractionSource() },
             ) { onClick(mode) }
-            .padding(vertical = 24.dp, horizontal = 24.dp),
+            .padding(vertical = 24.dp)
+            .padding(
+                start = if (isEvenPosition) 0.dp else 12.dp,
+                end = if (isEvenPosition) 0.dp else 12.dp,
+            ),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Box(
             modifier = Modifier
+                .padding(start = 12.dp)
                 .size(32.dp)
                 .clip(CircleShape)
-                .background(color = mode.colorCode.hexToComposeColor()),
+                .background(color = mode.colorCode.hexToComposeColor())
+                ,
         )
 
         Text(