diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionListItem.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionListItem.kt index c875a7a..1a9da00 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionListItem.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionListItem.kt @@ -19,7 +19,7 @@ fun TransactionListItem(transaction: AccountTransaction, backgroundColor: Color) Row( modifier = Modifier.fillMaxWidth() .background(color = backgroundColor) - .padding(4.dp), + .padding(horizontal = 6.dp, vertical = 4.dp), verticalAlignment = Alignment.CenterVertically ) { Column( diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionsList.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionsList.kt index 591fb3a..d6f3370 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionsList.kt +++ b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/TransactionsList.kt @@ -4,6 +4,8 @@ import androidx.compose.foundation.background 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.material.Card import androidx.compose.material.Divider import androidx.compose.material.MaterialTheme import androidx.compose.material.Text @@ -32,7 +34,7 @@ fun TransactionsList(transactions: List) { modifier = Modifier.padding(4.dp) ) { items(groupedByMonth.keys.sortedDescending()) { month -> - Column(modifier = Modifier.fillMaxWidth()) { + Column(Modifier.fillMaxWidth()) { Text( text = DI.formatUtil.formatMonth(month), fontSize = 16.sp, @@ -44,12 +46,17 @@ fun TransactionsList(transactions: List) { val monthTransactions = groupedByMonth[month].orEmpty().sortedByDescending { it.valueDate } - Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed - monthTransactions.forEachIndexed { index, transaction -> - TransactionListItem(transaction, if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent) + Card( + shape = RoundedCornerShape(12.dp), // Rounded corners + elevation = 2.dp // Shadow elevation + ) { + Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed + monthTransactions.forEachIndexed { index, transaction -> + TransactionListItem(transaction, if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent) - if (index < monthTransactions.size - 1) { - Divider(color = Colors.Zinc200, thickness = 1.dp) + if (index < monthTransactions.size - 1) { + Divider(color = Colors.Zinc200, thickness = 1.dp) + } } } }