Do some styling.

app/src/main/java/me/zobrist/tichucounter/ui/counter/CounterView.kt

@@ -3,24 +3,26 @@ package me.zobrist.tichucounter.ui.counter
 import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 
 
-
 @Composable
 fun Counter(viewModel: CounterViewModel) {
 
     var orientation by remember { mutableStateOf(Configuration.ORIENTATION_PORTRAIT) }
     orientation = LocalConfiguration.current.orientation
 
+    Surface {
         if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
             Landscape(viewModel)
         } else {
             Portrait(viewModel)
         }
     }
+}
 
 @Composable
 fun Landscape(viewModel: CounterViewModel) {
@@ -55,9 +57,8 @@ fun Landscape(viewModel: CounterViewModel) {
                 { viewModel.digitClicked(it) },
                 { viewModel.addSub100Clicked(it) },
                 { viewModel.deleteClicked() },
-                { viewModel.negateClicked() },
+                { viewModel.negateClicked() }
-                { viewModel.submitClicked() }
+            ) { viewModel.submitClicked() }
-            )
         }
     }
 
@@ -94,8 +95,7 @@ fun Portrait(viewModel: CounterViewModel) {
             { viewModel.digitClicked(it) },
             { viewModel.addSub100Clicked(it) },
             { viewModel.deleteClicked() },
-            { viewModel.negateClicked() },
+            { viewModel.negateClicked() }
-            { viewModel.submitClicked() }
+        ) { viewModel.submitClicked() }
-        )
     }
 }

app/src/main/java/me/zobrist/tichucounter/ui/counter/KeyboardView.kt

@@ -1,8 +1,10 @@
 package me.zobrist.tichucounter.ui.counter
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Backspace
 import androidx.compose.material.icons.outlined.Check
@@ -14,8 +16,12 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.platform.SoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import me.zobrist.tichucounter.R
+import me.zobrist.tichucounter.ui.AppTheme
 
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@@ -37,33 +43,27 @@ fun KeyboardView(
 
     Column {
         Row {
-            TextField(
+            Column(Modifier.weight(1f)) {
-                value = scoreA,
+
-                onValueChange = { },
+                CenteredTextField(
-                placeholder = { Text("0") },
+                    scoreA,
-                singleLine = true,
+                    keyboardController,
-                readOnly = true,
+                    requestFocusA
-                modifier = Modifier
+                ) {
-                    .onFocusChanged {
+                    updateFocusStateA(it)
-                        keyboardController?.hide()
+                }
-                        updateFocusStateA(it.isFocused)
+
+            }
+            Column(Modifier.weight(1f)) {
+
+                CenteredTextField(
+                    scoreB,
+                    keyboardController,
+                    null
+                ) {
+                    updateFocusStateB(it)
                 }
-                    .focusRequester(requestFocusA)
-                    .weight(1f),
-            )
-            TextField(
-                value = scoreB,
-                onValueChange = { },
-                placeholder = { Text("0") },
-                singleLine = true,
-                readOnly = true,
-                modifier = Modifier
-                    .onFocusChanged {
-                        keyboardController?.hide()
-                        updateFocusStateB(it.isFocused)
             }
-                    .weight(1f)
-            )
         }
 
         Row {
@@ -119,7 +119,13 @@ fun KeyboardView(
             IconButton(
                 onClick = { deleteClicked() },
                 modifier = Modifier.weight(1F)
-            ) { Icon(Icons.Outlined.Backspace, stringResource(R.string.submit)) }
+            ) {
+                Icon(
+                    Icons.Outlined.Backspace,
+                    stringResource(R.string.back),
+                    tint = MaterialTheme.colorScheme.primary
+                )
+            }
         }
         Row {
             TextButton(
@@ -135,7 +141,75 @@ fun KeyboardView(
                 onClick = { submitClicked() },
                 modifier = Modifier.weight(1F),
                 enabled = enableSubmit
-            ) { Icon(Icons.Outlined.Check, stringResource(R.string.submit)) }
+            ) {
+                Icon(
+                    Icons.Outlined.Check,
+                    stringResource(R.string.submit),
+                    tint = MaterialTheme.colorScheme.primary
+                )
             }
         }
     }
+}
+
+@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
+@Composable
+fun CenteredTextField(
+    value: String,
+    keyboardController: SoftwareKeyboardController?,
+    focusRequester: FocusRequester?,
+    updateFocusState: (Boolean) -> Unit
+) {
+    var modifier = Modifier
+        .onFocusChanged {
+            keyboardController?.hide()
+            updateFocusState(it.isFocused)
+        }
+        .fillMaxWidth()
+
+    if (focusRequester != null) {
+        modifier.focusRequester(focusRequester)
+    }
+
+    TextField(
+        value = value,
+        onValueChange = { },
+        placeholder = {
+            Text(
+                "0",
+                textAlign = TextAlign.Center,
+                modifier = Modifier.fillMaxWidth()
+            )
+        },
+        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
+        singleLine = true,
+        readOnly = true,
+        modifier = modifier
+    )
+}
+
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
+@Composable
+fun KeyboardViewPreview() {
+    AppTheme {
+        Surface {
+            KeyboardView(
+                "",
+                "350",
+                FocusRequester(),
+                false,
+                {},
+                {},
+                {},
+                {},
+                {},
+                {},
+                {})
+        }
+    }
+
+
+}

app/src/main/java/me/zobrist/tichucounter/ui/counter/RoundListView.kt

@@ -1,5 +1,6 @@
 package me.zobrist.tichucounter.ui.counter
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -8,6 +9,7 @@ import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
@@ -17,6 +19,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import me.zobrist.tichucounter.data.Round
+import me.zobrist.tichucounter.ui.AppTheme
 
 @Composable
 fun RoundListView(rounds: List<Round>, modifier: Modifier) {
@@ -62,15 +65,21 @@ private fun RoundListItem(round: Round, index: Int, lazyListState: LazyListState
     }
 }
 
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
 @Composable
-@Preview
 fun RoundListViewPreview() {
-    val rounds = listOf<Round>(
+    val rounds = listOf(
         Round(1, 10, 90),
         Round(1, 5, 95),
         Round(1, 100, 0),
         Round(1, 125, -25),
         Round(1, 50, 50)
     )
+
+    AppTheme {
+        Surface {
             RoundListView(rounds, Modifier)
         }
+    }
+}

app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamNamesView.kt

@@ -1,11 +1,14 @@
 package me.zobrist.tichucounter.ui.counter
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.*
 
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import me.zobrist.tichucounter.ui.AppTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -18,6 +21,7 @@ fun TeamNamesView(
     Row() {
         TextField(
             value = nameA,
+            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
             onValueChange = { updateA(it) },
             singleLine = true,
             modifier = Modifier.weight(1f)
@@ -25,6 +29,7 @@ fun TeamNamesView(
 
         TextField(
             value = nameB,
+            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center),
             onValueChange = { updateB(it) },
             singleLine = true,
             modifier = Modifier.weight(1f)
@@ -32,8 +37,11 @@ fun TeamNamesView(
     }
 }
 
-@Preview
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
 @Composable
 private fun TeamNamesViewPreview() {
+    AppTheme {
         TeamNamesView("TeamA", "TeamB", {}, {})
     }
+}

app/src/main/java/me/zobrist/tichucounter/ui/counter/TeamScoresView.kt

@@ -1,32 +1,51 @@
 package me.zobrist.tichucounter.ui.counter
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import me.zobrist.tichucounter.ui.AppTheme
 
 
 @Composable
 fun TeamScoresView(scoreA: Int, scoreB: Int) {
+
+    ElevatedCard() {
         Row() {
             Text(
+                style = MaterialTheme.typography.bodyLarge,
                 text = scoreA.toString(),
-            modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(5f),
                 textAlign = TextAlign.Center
             )
 
+            Spacer(modifier = Modifier.weight(1f))
+
             Text(
+                style = MaterialTheme.typography.bodyLarge,
                 text = scoreB.toString(),
-            modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(5f),
                 textAlign = TextAlign.Center
             )
         }
     }
+}
 
-@Preview
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
 @Composable
-private fun TeamNamesView() {
+private fun TeamScoresViewPreview() {
+    AppTheme {
+        Surface {
             TeamScoresView(10, 90)
         }
+    }
+}

app/src/main/res/values/themes.xml

@@ -1,7 +1,6 @@
 <resources>
 
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"></style>
-    </style>
 
     <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />