better padding buttons

app/src/main/java/de/lelehier/keeper/screens/home_screen.kt

@@ -11,6 +11,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -64,11 +65,12 @@ fun HomeScreen(paddingValues: PaddingValues) {
             .padding(paddingValues)
             .fillMaxSize()
             .imePadding()
-            .padding(all = 56.dp),
+            .padding(start = 56.dp, end = 56.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center) {
         Greeting(serverURL, currentScreen);
         AnimatedContent(
+            modifier = Modifier.padding(bottom = 24.dp),
             targetState = currentScreen,
             transitionSpec = {
                 fadeIn(
@@ -84,34 +86,44 @@ fun HomeScreen(paddingValues: PaddingValues) {
         }
         }
 
-        Row (
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            AnimatedVisibility(currentScreen == "passwordDialog") {
-                OutlinedButton (
-                    onClick = {currentScreen = "serverDialog"},
-                    modifier = Modifier.padding(top = 24.dp)
+        AnimatedVisibility(currentScreen == "passwordDialog" || currentScreen == "apiDialog") {
+            Row(
+                modifier = Modifier.padding(bottom = 12.dp)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                OutlinedButton(
+                    onClick = { currentScreen = "serverDialog" },
+                    modifier = Modifier.weight(1f)
                 ) {
                     Row() {
                         Text(text = "Change Server")
                     }
                 }
-            }
-            Spacer(modifier = Modifier.width(12.dp))
-            AnimatedVisibility(currentScreen == "passwordDialog") {
-                OutlinedButton (
-                    onClick = {},
-                    modifier = Modifier.padding(top = 24.dp)
+                Spacer(modifier = Modifier.width(12.dp))
+                OutlinedButton(
+                    modifier = Modifier.weight(1f),
+                    onClick = {
+                        when (currentScreen) {
+                            "passwordDialog" -> {
+                                currentScreen = "apiDialog"
+                            }
+
+                            "apidialog" -> {
+                                currentScreen = "passwordDialog"
+                            }
+                        }
+                    },
                 ) {
                     Row() {
-                        when(currentScreen) {
+                        when (currentScreen) {
                             "passwordDialog" -> Text(text = "Use API Key")
                             "apiDialog" -> Text(text = "Use Password")
                         }
                     }
                 }
             }
-            }
+        }
         Button(
             onClick = {when(currentScreen) {
                 "serverDialog" -> currentScreen = "passwordDialog"
@@ -119,9 +131,9 @@ fun HomeScreen(paddingValues: PaddingValues) {
                 "apiDialog" -> currentScreen = "loadingDialog"
                 "loadingDialog" -> currentScreen = "loadingDialog"
             }},
-            modifier = Modifier.padding(top = 24.dp)
+            modifier = Modifier
                 .fillMaxWidth()
-                .height(128.dp),
+                .height(96.dp),
             enabled = when(currentScreen) {
                 "serverDialog" -> isValidUrl(serverURL)
                 "passwordDialog" -> username.isNotEmpty() && password.isNotEmpty()
@@ -229,11 +241,11 @@ fun PasswordDialog(username: String, password: String, updateUsername: (newUsern
 
 @Composable
 fun ApiDialog(apiKey: String, updateApiKey: (newApiKey: String) -> Unit) {
-    var dialogApiKey by remember { mutableStateOf("") }
+    var dialogApiKey by remember { mutableStateOf(apiKey) }
     Column {
         OutlinedTextField(
             modifier = Modifier.fillMaxWidth(),
-            label = { Text(text = "Password") },
+            label = { Text(text = "API Key") },
             textStyle = MaterialTheme.typography.bodySmall,
             value = dialogApiKey,
             onValueChange = { text ->
@@ -245,6 +257,7 @@ fun ApiDialog(apiKey: String, updateApiKey: (newApiKey: String) -> Unit) {
     }
 }
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun LoadingDialog () {
     CircularWavyProgressIndicator()