MessageEntryView: appearance tweaks

app/src/debug/kotlin/previews/Previews.kt

@@ -6,12 +6,18 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import net.buzzert.kordophonedroid.R
 import net.buzzert.kordophonedroid.ui.conversationlist.ConversationListItem
 import net.buzzert.kordophonedroid.ui.conversationlist.ConversationListScreen
 import net.buzzert.kordophonedroid.ui.conversationlist.NoContentView
+import net.buzzert.kordophonedroid.ui.messagelist.MessageEntry
 import net.buzzert.kordophonedroid.ui.messagelist.MessageListItem
 import net.buzzert.kordophonedroid.ui.messagelist.MessageMetadata
 import net.buzzert.kordophonedroid.ui.messagelist.MessageTranscript
@@ -75,6 +81,16 @@ private fun MessageListScreenPreview() {
     }
 }
 
+@Preview
+@Composable
+private fun MessageEntryPreview() {
+    var textState by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue("Hello this is some text that might wrap multiple lines to show that there must be some padding here. "))
+    }
+
+    MessageEntry(onSend = {}, onTextChanged = {}, textFieldValue = textState)
+}
+
 // - No content
 
 @Preview

app/src/main/java/net/buzzert/kordophonedroid/ui/messagelist/MessageEntryView.kt

@@ -1,12 +1,13 @@
 package net.buzzert.kordophonedroid.ui.messagelist
 
-import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
@@ -15,6 +16,7 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.TextFieldValue
@@ -29,28 +31,24 @@ fun MessageEntry(
 ) {
     Row(
         modifier = Modifier
+            .background(MaterialTheme.colors.onSurface.copy(alpha = 0.18f))
             .fillMaxWidth()
-            .padding(8.dp)
+            .padding(vertical = 8.dp, horizontal = 12.dp)
+            .imePadding()
+            .navigationBarsPadding()
     ) {
-        Surface(
+            Surface(
-            shape = RoundedCornerShape(8.dp),
+                shape = MaterialTheme.shapes.medium,
-            border = BorderStroke(1.dp, color = MaterialTheme.colors.onBackground.copy(0.4f))
+                modifier = Modifier.weight(1f)
-        ) {
+                    .align(Alignment.CenterVertically)
-            Row(modifier = Modifier
+                    .shadow(4.dp)
-                .padding(horizontal = 8.dp)
-                .weight(1f)
-                .align(Alignment.Bottom)
-                .imePadding()
-                .navigationBarsPadding()
             ) {
                 BasicTextField(
                     value = textFieldValue,
                     onValueChange = { onTextChanged(it) },
                     modifier = Modifier
                         .fillMaxWidth()
-                        .weight(1f)
+                        .padding(horizontal = 8.dp, vertical = 8.dp),
-                        .align(Alignment.CenterVertically)
-                        .padding(horizontal = 8.dp),
                     cursorBrush = SolidColor(MaterialTheme.colors.onBackground),
                     textStyle = MaterialTheme.typography.body1.copy(MaterialTheme.colors.onBackground),
                     decorationBox = { textContent ->
@@ -66,11 +64,12 @@ fun MessageEntry(
                         textContent()
                     }
                 )
-
-                Button(onClick = onSend) {
-                    Text(text = "Send")
-                }
             }
-        }
+
+            Spacer(Modifier.width(8.dp))
+
+            Button(onClick = onSend) {
+                Text(text = "Send")
+            }
     }
 }

app/src/main/java/net/buzzert/kordophonedroid/ui/messagelist/MessageListScreen.kt

@@ -184,6 +184,7 @@ fun Messages(
         LazyColumn(
             reverseLayout = true,
             state = scrollState,
+            contentPadding = PaddingValues(vertical = 8.dp),
             modifier = Modifier
                 .fillMaxSize()
                 .padding(horizontal = 16.dp)