feat: improve layout and add send icon to comment submission UI (#15)

This commit makes the following improvements to the comment submission UI:
-   Wraps the UI in a `Box` to center the content.
-   Pads `Row` components.
-   Adds an `Icon` in the submit button.
-   Makes `TextField` fill available width and height.
These changes affect `App.kt`.

Closes #6

Reviewed-on: #15
Co-authored-by: Ben Martin <ben.martin@sky.uk>
Co-committed-by: Ben Martin <ben.martin@sky.uk>

composeApp/src/commonMain/kotlin/uk/sky/bob/application/App.kt

@@ -1,15 +1,21 @@
 package uk.sky.bob.application
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.FilterChip
+import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Send
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -27,38 +33,46 @@ import org.jetbrains.compose.ui.tooling.preview.Preview
 @Preview
 fun App() {
     MaterialTheme {
-        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+        Box(
-            Row {
+            modifier = Modifier.fillMaxHeight(),
-                val state = remember { mutableStateOf(Sentiment.HAPPY) }
+            contentAlignment = Alignment.Center,
-                for (emotion in Sentiment.entries) {
+        ) {
-                    FilterChip(
+            Column(
-                        onClick = { state.value = emotion },
+                Modifier.fillMaxWidth(),
-                        selected = state.value == emotion,
+                horizontalAlignment = Alignment.CenterHorizontally,
-                        modifier = Modifier.padding(8.dp),
+            ) {
-                        leadingIcon = { Text(emotion.leadingIcon) },
+                Row(modifier = Modifier.padding(8.dp)) {
-                    ) {
+                    val state = remember { mutableStateOf(Sentiment.HAPPY) }
-                        Text(emotion.friendlyName)
+                    for (emotion in Sentiment.entries) {
+                        FilterChip(
+                            onClick = { state.value = emotion },
+                            selected = state.value == emotion,
+                            modifier = Modifier.padding(8.dp),
+                            leadingIcon = { Text(emotion.leadingIcon) },
+                        ) {
+                            Text(emotion.friendlyName)
+                        }
                     }
                 }
-            }
 
-            Row {
+                Row(modifier = Modifier.padding(8.dp)) {
-                var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                    var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-                    mutableStateOf(
+                        mutableStateOf(
-                        TextFieldValue("")
+                            TextFieldValue("")
+                        )
+                    }
+                    TextField(
+                        value = text,
+                        onValueChange = { text = it },
+                        label = { Text("Your comment") },
+                        modifier = Modifier.height(100.dp).fillMaxWidth().padding(8.dp),
                     )
                 }
-                TextField(
-                    value = text,
-                    onValueChange = { text = it },
-                    label = { Text("Your comment") },
-                    maxLines = 3,
-                )
-            }
 
-            Row {
+                Row(modifier = Modifier.padding(8.dp)) {
-                Button(onClick = { /* Handle submit */ }) {
+                    Button(onClick = { /* Handle submit */ }, modifier = Modifier.padding(8.dp)) {
-                    Text("Submit")
+                        Icon(Icons.AutoMirrored.Filled.Send, contentDescription = "Send")
+                    }
                 }
             }
         }