Style setting screen.

app/src/main/java/me/zobrist/tichucounter/ui/settings/SettingsView.kt

@@ -1,17 +1,22 @@
 package me.zobrist.tichucounter.ui.settings
 
+import android.content.res.Configuration
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ArrowDropDown
 import androidx.compose.material.icons.outlined.Check
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import me.zobrist.tichucounter.R
 import me.zobrist.tichucounter.domain.Language
 import me.zobrist.tichucounter.domain.Theme
+import me.zobrist.tichucounter.ui.AppTheme
 
 
 val languageMap = mapOf(
@@ -38,7 +43,6 @@ fun SettingsView(viewModel: SettingsViewModel) {
         { viewModel.updateTheme(it) })
 }
 
-@Preview
 @Composable
 fun SettingsView(
     valueScreenOn: Boolean = true,
@@ -68,15 +72,28 @@ fun SettingsView(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun BooleanSetting(name: String, value: Boolean, updateValue: (Boolean) -> Unit) {
-    Row {
-        Column() {
-            Text(text = name)
-        }
-        Column() {
-            Checkbox(checked = value, onCheckedChange = { updateValue(it) })
-        }
+
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .padding(bottom = 10.dp)) {
+        TextField(
+            value = name,
+            onValueChange = { },
+            trailingIcon = {
+                Switch(
+                    checked = value,
+                    modifier = Modifier.padding(end = 10.dp),
+                    onCheckedChange = { updateValue(it) })
+            },
+            singleLine = true,
+            readOnly = true,
+            modifier = Modifier
+                .fillMaxWidth()
+        )
     }
 }
 
@@ -86,19 +103,26 @@ fun <T> StringSetting(name: String, map: Map<T, Int>, selected: T, onSelected: (
 
     var expanded by remember { mutableStateOf(false) }
 
-    Row() {
+    val source = remember { MutableInteractionSource() }
+
+    if (source.collectIsPressedAsState().value) {
+        expanded = true
+    }
+
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .padding(bottom = 10.dp)) {
         TextField(
             value = stringResource(map[selected]!!),
             onValueChange = { },
+            trailingIcon = { Icon(Icons.Outlined.ArrowDropDown, contentDescription = null) },
             singleLine = true,
             label = { Text(name) },
             readOnly = true,
+            interactionSource = source,
             modifier = Modifier
-                .onFocusChanged {
-                    if (it.isFocused) {
-                        expanded = true
-                    }
-                }
+                .fillMaxWidth()
         )
         DropdownMenu(
             expanded = expanded,
@@ -120,3 +144,15 @@ fun <T> StringSetting(name: String, map: Map<T, Int>, selected: T, onSelected: (
         }
     }
 }
+
+@Preview(name = "Light Mode")
+@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
+@Composable
+fun SettingsViewPreview() {
+
+    AppTheme() {
+        Surface() {
+            SettingsView()
+        }
+    }
+}