Ideal button

ksharma-xyz · Jan 20, 2025 · 309e490 · 309e490
1 parent 45cdbf8
commit 309e490
Show file tree

Hide file tree

Showing 18 changed files with 449 additions and 226 deletions.
diff --git a/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt b/composeApp/src/commonMain/kotlin/xyz/ksharma/krail/KrailNavHost.kt
@@ -19,6 +19,7 @@ import kotlinx.serialization.Serializable
 import org.koin.compose.viewmodel.koinViewModel
 import xyz.ksharma.krail.splash.SplashScreen
 import xyz.ksharma.krail.splash.SplashViewModel
+import xyz.ksharma.krail.taj.LocalTextColor
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.LocalThemeContentColor
 import xyz.ksharma.krail.taj.theme.KrailTheme
@@ -55,6 +56,7 @@ fun KrailNavHost(modifier: Modifier = Modifier) {
     CompositionLocalProvider(
         LocalThemeColor provides themeColorHexCode,
         LocalThemeContentColor provides themeContentColorHexCode,
+        LocalTextColor provides KrailTheme.colors.onSurface,
     ) {
         NavHost(
             navController = navController,

diff --git a/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt b/...ner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/alerts/CollapsibleAlert.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ButtonColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -21,13 +22,16 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
 import xyz.ksharma.krail.taj.LocalThemeColor
+import xyz.ksharma.krail.taj.components.Button
+import xyz.ksharma.krail.taj.components.ButtonDefaults
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
 import xyz.ksharma.krail.taj.theme.getForegroundColor
 import xyz.ksharma.krail.taj.toAdaptiveSize
+import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip.planner.ui.state.alerts.ServiceAlert
 
@@ -107,30 +111,36 @@ fun CollapsibleAlert(
                 )
             }
         } else {
-            Box(
-                modifier = Modifier
-                    .padding(start = 12.dp + 24.dp.toAdaptiveSize(), bottom = 12.dp)
-                    .background(
-                        color = getForegroundColor(backgroundColor),
-                        shape = RoundedCornerShape(50),
-                    )
-                    .padding(horizontal = 16.dp, vertical = 2.dp),
-                contentAlignment = Alignment.Center,
-            ) {
-                Text(
-                    text = "Read More",
-                    style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold),
-                    color = getForegroundColor(getForegroundColor(backgroundColor)),
+
+            val buttonBackgroundColor by remember {
+                mutableStateOf(getForegroundColor(backgroundColor))
+            }
+            val buttonContentColor by remember(buttonBackgroundColor) {
+                mutableStateOf(getForegroundColor(buttonBackgroundColor))
+            }
+            Button(
+                colors = ButtonColors(
+                    containerColor = buttonBackgroundColor,
+                    contentColor = buttonContentColor,
+                    disabledContainerColor = buttonBackgroundColor.copy(alpha = DisabledContentAlpha),
+                    disabledContentColor = buttonContentColor.copy(alpha = DisabledContentAlpha),
+                ),
+                onClick = onClick,
+                dimensions = ButtonDefaults.extraSmallButtonSize(),
+                modifier = Modifier.padding(
+                    start = 12.dp + 24.dp.toAdaptiveSize(),
+                    bottom = 8.dp
                 )
+            ) {
+                Text(text = "Read More")
             }
         }
     }
 }
 
 // region Previews
 
-
-//@Preview(fontScale = 2f)
+@Preview
 @Composable
 private fun PreviewCollapsibleAlertCollapsed() {
     KrailTheme {
@@ -149,7 +159,7 @@ private fun PreviewCollapsibleAlertCollapsed() {
     }
 }
 
-
+@Preview
 @Composable
 private fun PreviewCollapsibleAlertExpanded() {
     KrailTheme {

diff --git a/...nner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt b/...nner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt
@@ -51,7 +51,7 @@ import krail.feature.trip_planner.ui.generated.resources.ic_walk
 import org.jetbrains.compose.resources.painterResource
 import xyz.ksharma.krail.taj.LocalContentAlpha
 import xyz.ksharma.krail.taj.components.AlertButton
-import xyz.ksharma.krail.taj.components.ButtonSize
+import xyz.ksharma.krail.taj.components.ButtonDefaults
 import xyz.ksharma.krail.taj.components.SeparatorIcon
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
@@ -236,14 +236,17 @@ fun ExpandedJourneyCardContent(
         ) {
             if (totalUniqueServiceAlerts > 0) {
                 AlertButton(
-                    label = if (totalUniqueServiceAlerts > 1) {
-                        "$totalUniqueServiceAlerts Alerts"
-                    } else {
-                        "$totalUniqueServiceAlerts Alert"
-                    },
-                    size = ButtonSize.COMPACT,
+                    dimensions = ButtonDefaults.smallButtonSize(),
                     onClick = onAlertClick,
-                )
+                ) {
+                    Text(
+                        text = if (totalUniqueServiceAlerts > 1) {
+                            "$totalUniqueServiceAlerts Alerts"
+                        } else {
+                            "$totalUniqueServiceAlerts Alert"
+                        },
+                    )
+                }
             }
 
             TextWithIcon(

diff --git a/...-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt b/...-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -17,6 +16,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ButtonColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -31,7 +31,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -42,10 +41,14 @@ import krail.feature.trip_planner.ui.generated.resources.Res
 import krail.feature.trip_planner.ui.generated.resources.ic_a11y
 import krail.feature.trip_planner.ui.generated.resources.ic_clock
 import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
 import xyz.ksharma.krail.taj.LocalContentAlpha
+import xyz.ksharma.krail.taj.components.Button
+import xyz.ksharma.krail.taj.components.ButtonDefaults
 import xyz.ksharma.krail.taj.components.Text
 import xyz.ksharma.krail.taj.theme.KrailTheme
 import xyz.ksharma.krail.taj.toAdaptiveDecorativeIconSize
+import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip.planner.ui.state.TransportModeLine
 import xyz.ksharma.krail.trip.planner.ui.state.timetable.TimeTableState
@@ -128,6 +131,10 @@ fun LegView(
                         StopsRow(
                             stops = "$stopsCount stops",
                             line = transportModeLine,
+                            onClick = {
+                                showIntermediateStops = !showIntermediateStops
+                                onClick(showIntermediateStops)
+                            },
                         )
                     } else {
                         TransportModeInfo(
@@ -275,27 +282,33 @@ private fun StopInfo(
 
 @OptIn(ExperimentalLayoutApi::class)
 @Composable
-private fun StopsRow(stops: String, line: TransportModeLine, modifier: Modifier = Modifier) {
+private fun StopsRow(
+    stops: String,
+    line: TransportModeLine,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
     FlowRow(
         modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(8.dp),
         verticalArrangement = Arrangement.spacedBy(4.dp),
     ) {
-        Box(
-            modifier = Modifier
-                .background(
-                    color = line.transportMode.colorCode.hexToComposeColor(),
-                    shape = RoundedCornerShape(50),
-                )
-                .padding(horizontal = 20.dp, vertical = 2.dp),
-            contentAlignment = Alignment.Center,
+        val buttonContainerColor by remember {
+            mutableStateOf(line.transportMode.colorCode.hexToComposeColor())
+        }
+        Button(
+            colors = ButtonColors(
+                containerColor = buttonContainerColor,
+                contentColor = Color.White,
+                disabledContainerColor = buttonContainerColor.copy(alpha = DisabledContentAlpha),
+                disabledContentColor = Color.White.copy(alpha = DisabledContentAlpha),
+            ),
+            onClick = onClick,
+            dimensions = ButtonDefaults.smallButtonSize(),
         ) {
-            Text(
-                text = stops,
-                style = KrailTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold),
-                color = Color.White,
-            )
+            Text(text = stops)
         }
+
         TransportModeInfo(
             letter = line.transportMode.name.first(),
             backgroundColor = line.transportMode.colorCode.hexToComposeColor(),
@@ -308,6 +321,7 @@ private fun StopsRow(stops: String, line: TransportModeLine, modifier: Modifier
 
 // region Previews
 
+@Preview
 @Composable
 private fun PreviewLegView() {
     KrailTheme {
@@ -341,6 +355,7 @@ private fun PreviewLegView() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewLegViewTwoStops() {
     KrailTheme {
@@ -369,6 +384,7 @@ private fun PreviewLegViewTwoStops() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewLegViewMetro() {
     KrailTheme {
@@ -397,6 +413,7 @@ private fun PreviewLegViewMetro() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewLegViewFerry() {
     KrailTheme {
@@ -425,6 +442,7 @@ private fun PreviewLegViewFerry() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewLegViewLightRail() {
     KrailTheme {
@@ -453,6 +471,7 @@ private fun PreviewLegViewLightRail() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewStopsRow() {
     KrailTheme {
@@ -462,10 +481,12 @@ private fun PreviewStopsRow() {
                 transportMode = TransportMode.Bus(),
                 lineName = "700",
             ),
+            onClick = {},
         )
     }
 }
 
+@Preview
 @Composable
 private fun PreviewProminentStopInfo() {
     KrailTheme {
@@ -479,6 +500,7 @@ private fun PreviewProminentStopInfo() {
     }
 }
 
+@Preview
 @Composable
 private fun PreviewRouteSummary() {
     KrailTheme {

diff --git a/...er/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt b/...er/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/components/SearchStopRow.kt
@@ -24,7 +24,7 @@ import krail.feature.trip_planner.ui.generated.resources.Res
 import krail.feature.trip_planner.ui.generated.resources.ic_reverse
 import krail.feature.trip_planner.ui.generated.resources.ic_search
 import org.jetbrains.compose.resources.painterResource
-import xyz.ksharma.krail.taj.LocalOnContentColor
+import xyz.ksharma.krail.taj.LocalContentColor
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.components.RoundIconButton
 import xyz.ksharma.krail.taj.components.Text
@@ -93,7 +93,7 @@ fun SearchStopRow(
                     Image(
                         painter = painterResource(Res.drawable.ic_reverse),
                         contentDescription = "Reverse",
-                        colorFilter = ColorFilter.tint(LocalOnContentColor.current),
+                        colorFilter = ColorFilter.tint(LocalContentColor.current),
                         modifier = Modifier.size(24.dp),
                     )
                 },
@@ -105,7 +105,7 @@ fun SearchStopRow(
                     Image(
                         painter = painterResource(Res.drawable.ic_search),
                         contentDescription = "Search",
-                        colorFilter = ColorFilter.tint(LocalOnContentColor.current),
+                        colorFilter = ColorFilter.tint(LocalContentColor.current),
                         modifier = Modifier.size(24.dp),
                     )
                 },