Beautify settings page.

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

@@ -1,6 +1,7 @@
 package me.zobrist.tichucounter.ui.settings
 
 import android.content.res.Configuration
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.*
@@ -9,7 +10,11 @@ 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.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Alignment.Companion.End
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.InspectableModifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -79,21 +84,22 @@ fun BooleanSetting(name: String, value: Boolean, updateValue: (Boolean) -> Unit)
     Row(
         Modifier
             .fillMaxWidth()
-            .padding(bottom = 10.dp)) {
+            .padding(20.dp)) {
-        TextField(
+        Column() {
-            value = name,
+            Text(name, style = MaterialTheme.typography.bodyLarge)
-            onValueChange = { },
+            Text(value.toString(), style = MaterialTheme.typography.labelLarge)
-            trailingIcon = {
+
-                Switch(
+        }
-                    checked = value,
+        Column(
-                    modifier = Modifier.padding(end = 10.dp),
+            Modifier
-                    onCheckedChange = { updateValue(it) })
-            },
-            singleLine = true,
-            readOnly = true,
-            modifier = Modifier
                 .fillMaxWidth()
         )
+        {
+            Switch(
+                checked = value,
+                modifier = Modifier.align(End),
+                onCheckedChange = { updateValue(it)})
+        }
     }
 }
 
@@ -103,27 +109,25 @@ fun <T> StringSetting(name: String, map: Map<T, Int>, selected: T, onSelected: (
 
     var expanded by remember { mutableStateOf(false) }
 
-    val source = remember { MutableInteractionSource() }
-
-    if (source.collectIsPressedAsState().value) {
-        expanded = true
-    }
-
         Row(
             Modifier
                 .fillMaxWidth()
-            .padding(bottom = 10.dp)) {
+                .padding(20.dp)
-        TextField(
+                .clickable { expanded = true }) {
-            value = stringResource(map[selected]!!),
+            Column() {
-            onValueChange = { },
+                Text(name, style = MaterialTheme.typography.bodyLarge)
-            trailingIcon = { Icon(Icons.Outlined.ArrowDropDown, contentDescription = null) },
+                Text(stringResource(map[selected]!!), style = MaterialTheme.typography.labelLarge)
-            singleLine = true,
+            }
-            label = { Text(name) },
+
-            readOnly = true,
+            Column(
-            interactionSource = source,
+                Modifier
-            modifier = Modifier
+                    .fillMaxWidth()) {
-                .fillMaxWidth()
+                Icon(
-        )
+                    Icons.Outlined.ArrowDropDown,
+                    contentDescription = null,
+                    modifier = Modifier.align(End),)
+            }
+
             DropdownMenu(
                 expanded = expanded,
                 onDismissRequest = { expanded = false }