UI: Change screen backgrounds from background to surface color (#276)

### TL;DR Updated screen backgrounds to use surface color instead of background color in the Trip Planner UI ### What changed? Changed the background color property from `KrailTheme.colors.background` to `KrailTheme.colors.surface` in: - SavedTripsScreen - SearchStopScreen - TimeTableScreen ### Why make this change? Using the surface color provides better visual hierarchy and follows Material Design guidelines more closely, where surface colors are typically used for components that rest on top of the background
ksharma-xyz · Oct 31, 2024 · 82ea0b1 · 82ea0b1
1 parent ee6e638
commit 82ea0b1
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/...anner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt b/...anner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt
@@ -45,7 +45,7 @@ fun SavedTripsScreen(
     Box(
         modifier = modifier
             .fillMaxSize()
-            .background(color = KrailTheme.colors.background)
+            .background(color = KrailTheme.colors.surface)
             .statusBarsPadding(),
     ) {
         Column {

diff --git a/...anner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/searchstop/SearchStopScreen.kt b/...anner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/searchstop/SearchStopScreen.kt
@@ -74,7 +74,7 @@ fun SearchStopScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(color = KrailTheme.colors.background)
+            .background(color = KrailTheme.colors.surface)
             .statusBarsPadding()
             .imePadding(),
     ) {

diff --git a/...planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/...planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt
@@ -46,7 +46,7 @@ fun TimeTableScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(color = KrailTheme.colors.background),
+            .background(color = KrailTheme.colors.surface),
     ) {
         TitleBar(
             title = {