UI: Refine trip planner spacing and typography (#399)

### TL;DR
Refined the visual design of the trip planner UI components and updated the Usual Ride screen layout.

### What changed?
- Adjusted padding and spacing in the Origin/Destination component
- Modified the vertical spacing between stops in the SavedTripCard
- Updated the Usual Ride screen text styling and content
- Changed bottom button positioning to use navigation bar padding
- Removed redundant spacer in the bottom button section
- Updated "Let's set the vibe." to "Let's set the vibe!"
- Enhanced typography for the "Select a color" text

### How to test?
1. Navigate to the Usual Ride screen
2. Verify the updated text and styling changes
3. Check the bottom button alignment with the navigation bar
4. Confirm the Origin/Destination component spacing looks correct
5. Review the SavedTripCard vertical spacing between stops

### Why make this change?
These UI refinements improve the visual consistency and user experience across the app. The adjusted spacing and padding create a more polished look, while the updated text styling and navigation bar handling ensure better compatibility across different devices.

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

@@ -33,7 +33,7 @@ internal fun OriginDestination(
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
-            .padding(bottom = 16.dp, top = 4.dp),
+            .padding(top = 4.dp),
     ) {
         Row(
             horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -44,7 +44,7 @@ internal fun OriginDestination(
                     strokeWidth = 3.dp,
                     circleRadius = 5.dp,
                 )
-                .padding(start = 12.dp, bottom = 8.dp),
+                .padding(start = 16.dp, bottom = 8.dp),
         ) {
             AnimatedContent(
                 targetState = trip.fromStopName,
@@ -85,7 +85,7 @@ internal fun OriginDestination(
                     strokeWidth = 3.dp,
                     circleRadius = 5.dp,
                 )
-                .padding(start = 12.dp, top = 8.dp),
+                .padding(start = 16.dp, top = 8.dp),
         ) {
             AnimatedContent(
                 targetState = trip.toStopName,

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

@@ -72,7 +72,7 @@ fun SavedTripCard(
             modifier = Modifier
                 .padding(horizontal = 16.dp)
                 .weight(1f),
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
         ) {
             Text(text = trip.fromStopName, style = KrailTheme.typography.bodyMedium)
             Text(text = trip.toStopName, style = KrailTheme.typography.bodyMedium)

feature/trip-planner/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/usualride/UsualRideScreen.kt

@@ -12,10 +12,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
@@ -116,7 +115,7 @@ fun UsualRideScreen(
             LazyColumn(contentPadding = PaddingValues(top = 12.dp, bottom = 152.dp)) {
                 item {
                     Text(
-                        text = "Let's set the vibe.",
+                        text = "Let's set the vibe!",
                         style = KrailTheme.typography.headlineLarge.copy(fontWeight = FontWeight.Normal),
                         modifier = Modifier
                             .padding(horizontal = 24.dp)
@@ -127,7 +126,7 @@ fun UsualRideScreen(
                 item {
                     Text(
                         text = "Select a color",
-                        style = KrailTheme.typography.bodyMedium,
+                        style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
                         modifier = Modifier
                             .padding(horizontal = 24.dp)
                             .padding(bottom = 16.dp),
@@ -149,8 +148,8 @@ fun UsualRideScreen(
         if (selectedProductClass != null) {
             Column(
                 modifier = Modifier.align(Alignment.BottomCenter)
-                    .statusBarsPadding()
-                    .padding(bottom = 20.dp)
+                    .navigationBarsPadding()
+                    .padding(bottom = 10.dp)
             ) {
                 Text(
                     text = "Let's #KRAIL",
@@ -176,8 +175,6 @@ fun UsualRideScreen(
                         }
                         .padding(vertical = 10.dp),
                 )
-
-                Spacer(modifier = Modifier.height(20.dp))
             }
         }
     }