From f7ccf46b55d011a18dd9107351c9abe3e6d1b65f Mon Sep 17 00:00:00 2001
From: Fabian Zobrist <fabian@zobrist.me>
Date: Fri, 20 Jan 2023 13:55:06 +0100
Subject: [PATCH] Beautify settings page.

---
 .../tichucounter/ui/settings/SettingsView.kt  | 102 +++++++++---------
 1 file changed, 53 insertions(+), 49 deletions(-)

diff --git a/app/src/main/java/me/zobrist/tichucounter/ui/settings/SettingsView.kt b/app/src/main/java/me/zobrist/tichucounter/ui/settings/SettingsView.kt
index e6e92d7..8181ae3 100644
--- a/app/src/main/java/me/zobrist/tichucounter/ui/settings/SettingsView.kt
+++ b/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)) {
-        TextField(
-            value = name,
-            onValueChange = { },
-            trailingIcon = {
-                Switch(
-                    checked = value,
-                    modifier = Modifier.padding(end = 10.dp),
-                    onCheckedChange = { updateValue(it) })
-            },
-            singleLine = true,
-            readOnly = true,
-            modifier = Modifier
+            .padding(20.dp)) {
+        Column() {
+            Text(name, style = MaterialTheme.typography.bodyLarge)
+            Text(value.toString(), style = MaterialTheme.typography.labelLarge)
+
+        }
+        Column(
+            Modifier
                 .fillMaxWidth()
         )
+        {
+            Switch(
+                checked = value,
+                modifier = Modifier.align(End),
+                onCheckedChange = { updateValue(it)})
+        }
     }
 }
 
@@ -103,44 +109,42 @@ 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)) {
-        TextField(
-            value = stringResource(map[selected]!!),
-            onValueChange = { },
-            trailingIcon = { Icon(Icons.Outlined.ArrowDropDown, contentDescription = null) },
-            singleLine = true,
-            label = { Text(name) },
-            readOnly = true,
-            interactionSource = source,
-            modifier = Modifier
+        Row(
+            Modifier
                 .fillMaxWidth()
-        )
-        DropdownMenu(
-            expanded = expanded,
-            onDismissRequest = { expanded = false }
-        ) {
-            map.forEach {
-                DropdownMenuItem(
-                    onClick = {
-                        onSelected(it.key)
-                        expanded = false
-                    },
-                    text = { Text(stringResource(it.value)) },
-                    trailingIcon = {
-                        if (it.key == selected) {
-                            Icon(Icons.Outlined.Check, contentDescription = null)
-                        }
-                    })
+                .padding(20.dp)
+                .clickable { expanded = true }) {
+            Column() {
+                Text(name, style = MaterialTheme.typography.bodyLarge)
+                Text(stringResource(map[selected]!!), style = MaterialTheme.typography.labelLarge)
             }
+
+            Column(
+                Modifier
+                    .fillMaxWidth()) {
+                Icon(
+                    Icons.Outlined.ArrowDropDown,
+                    contentDescription = null,
+                    modifier = Modifier.align(End),)
+            }
+
+            DropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { expanded = false }
+            ) {
+                map.forEach {
+                    DropdownMenuItem(
+                        onClick = {
+                            onSelected(it.key)
+                            expanded = false
+                        },
+                        text = { Text(stringResource(it.value)) },
+                        trailingIcon = {
+                            if (it.key == selected) {
+                                Icon(Icons.Outlined.Check, contentDescription = null)
+                            }
+                        })
+                }
         }
     }
 }