UI updates

Author: joreilly

common/BikeShareNotebook.ipynb

@@ -2,42 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "source": [
-    "import dev.johnoreilly.common.di.createHttpClient\n",
-    "import dev.johnoreilly.common.remote.CityBikesApi\n",
-    "import io.ktor.client.engine.java.Java\n",
-    "import kotlinx.coroutines.GlobalScope\n",
-    "import kotlinx.coroutines.MainScope\n",
-    "import kotlinx.coroutines.launch\n",
-    "import kotlinx.coroutines.runBlocking\n",
-    "import kotlinx.serialization.json.Json\n",
-    "%useLatestDescriptors\n",
-    "%use dataframe, kandy\n",
-    "%use kandy-geo\n",
-    "\n",
-    "val json = Json { isLenient = true; ignoreUnknownKeys = true; useAlternativeNames = false }\n",
-    "val engine = Java.create()\n",
-    "val httpClient = createHttpClient(engine, json)\n",
-    "val api = CityBikesApi(httpClient)\n",
-    "\n",
-    "val networkList = runBlocking { api.fetchNetworkList().networks }\n",
-    "val coordinates = networkList.map { it.location }.toDataFrame()\n",
-    "\n",
-    "val points = coordinates.map {\n",
-    "    GeometryFactory().createPoint(Coordinate(it.get(\"longitude\").toString().toDouble(), it.get(\"latitude\").toString().toDouble()))\n",
-    "}.filter { it.y > 35 && it.y < 75 && it.x > -10 && it.x < 65}\n",
-    "\n",
-    "GeoDataFrame.readGeoJson(\"europe.geojson\").plot {\n",
-    "    geoMap()\n",
-    "    geoPoints(points) {\n",
-    "        size = 2.0\n",
-    "        color = Color.RED\n",
-    "    }\n",
-    "    layout {\n",
-    "        size = 4000 to 4000\n",
-    "    }\n",
-    "}\n"
-   ],
+   "source": "",
    "metadata": {
     "collapsed": false,
     "ExecuteTime": {

common/src/commonMain/kotlin/dev/johnoreilly/common/countrylist/CountryListUI.kt

@@ -3,18 +3,25 @@
 package dev.johnoreilly.common.countrylist
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 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 bikeshare.common.generated.resources.Res
 import bikeshare.common.generated.resources.allDrawableResources
@@ -29,8 +36,24 @@ import software.amazon.lastmile.kotlin.inject.anvil.AppScope
 @CircuitInject(CountryListScreen::class, AppScope::class)
 @Composable
 fun CountryListUi(state: CountryListScreen.State, modifier: Modifier = Modifier) {
-    Scaffold(modifier = modifier, topBar = { TopAppBar(title = { Text("Countries") }) }) { innerPadding ->
-        LazyColumn(modifier = Modifier.padding(innerPadding)) {
+    Scaffold(
+        modifier = modifier, 
+        topBar = { 
+            TopAppBar(
+                title = { Text("Choose a Country", style = MaterialTheme.typography.titleLarge) },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primary,
+                    titleContentColor = MaterialTheme.colorScheme.onPrimary
+                )
+            ) 
+        }
+    ) { innerPadding ->
+        LazyColumn(
+            modifier = Modifier
+                .padding(innerPadding)
+                .padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
             items(state.countryList) { country ->
                 CountryView(country) {
                     state.eventSink(CountryListScreen.Event.CountryClicked(country.code))
@@ -44,23 +67,45 @@ fun CountryListUi(state: CountryListScreen.State, modifier: Modifier = Modifier)
 @OptIn(ExperimentalResourceApi::class)
 @Composable
 fun CountryView(country: Country, countrySelected: (country: Country) -> Unit) {
-    Row(
+    Card(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable(onClick = { countrySelected(country) })
-            .padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp),
-        verticalAlignment = Alignment.CenterVertically
+            .clickable(onClick = { countrySelected(country) }),
+        shape = RoundedCornerShape(8.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surface
+        )
     ) {
-        val flagDrawable = Res.allDrawableResources["flag_${country.code.lowercase()}"]
-        if (flagDrawable != null) {
-            Image(
-                painterResource(flagDrawable),
-                modifier = Modifier.size(32.dp),
-                contentDescription = country.displayName
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            val flagDrawable = Res.allDrawableResources["flag_${country.code.lowercase()}"]
+            if (flagDrawable != null) {
+                Box(
+                    modifier = Modifier
+                        .size(48.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(MaterialTheme.colorScheme.surfaceVariant)
+                        .padding(4.dp)
+                ) {
+                    Image(
+                        painterResource(flagDrawable),
+                        modifier = Modifier.size(40.dp),
+                        contentDescription = country.displayName
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.width(16.dp))
+            Text(
+                text = country.displayName, 
+                style = MaterialTheme.typography.bodyLarge,
+                fontWeight = FontWeight.Medium
             )
         }
-
-        Spacer(modifier = Modifier.size(16.dp))
-        Text(text = country.displayName, style = MaterialTheme.typography.bodyLarge)
     }
 }