android: more welcome styling (#363)

* spacing and size updates to welcome page

* spacing and allow space for keyboard

apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt

@@ -12,53 +12,61 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.ChatModel
 import chat.simplex.app.model.Profile
 import chat.simplex.app.views.helpers.withApi
+import com.google.accompanist.insets.ProvideWindowInsets
+import com.google.accompanist.insets.navigationBarsWithImePadding
 import kotlinx.coroutines.DelicateCoroutinesApi
 
 @DelicateCoroutinesApi
 @Composable
 fun WelcomeView(chatModel: ChatModel, routeHome: () -> Unit) {
-  Box(
-    modifier = Modifier
-      .fillMaxSize()
-      .background(color = MaterialTheme.colors.background)
-  ){
-    Column(
-      verticalArrangement = Arrangement.SpaceBetween,
+  ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
+    Box(
       modifier = Modifier
-        .verticalScroll(rememberScrollState())
         .fillMaxSize()
         .background(color = MaterialTheme.colors.background)
-        .padding(12.dp)
     ) {
-      Image(
-        painter = painterResource(R.drawable.logo), contentDescription = "Simplex Logo",
-      )
-      Text(
-        "You control your chat!",
-        style = MaterialTheme.typography.h4,
-        color = MaterialTheme.colors.onBackground
-      )
-      Text(
-        "The messaging and application platform protecting your privacy and security.",
-        style = MaterialTheme.typography.body1,
-        color = MaterialTheme.colors.onBackground
-      )
-      Spacer(Modifier.height(8.dp))
-      Text(
-        "We don't store any of your contacts or messages (once delivered) on the servers.",
-        style = MaterialTheme.typography.body1,
-        color = MaterialTheme.colors.onBackground
-      )
-      Spacer(Modifier.height(24.dp))
-      CreateProfilePanel(chatModel, routeHome)
+      Column(
+        verticalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+          .verticalScroll(rememberScrollState())
+          .fillMaxSize()
+          .background(color = MaterialTheme.colors.background)
+          .padding(12.dp)
+      ) {
+        Image(
+          painter = painterResource(R.drawable.logo),
+          contentDescription = "Simplex Logo",
+          modifier = Modifier.padding(vertical = 15.dp)
+        )
+        Text(
+          "You control your chat!",
+          style = MaterialTheme.typography.h4,
+          color = MaterialTheme.colors.onBackground
+        )
+        Text(
+          "The messaging and application platform protecting your privacy and security.",
+          style = MaterialTheme.typography.body1,
+          color = MaterialTheme.colors.onBackground
+        )
+        Spacer(Modifier.height(8.dp))
+        Text(
+          "We don't store any of your contacts or messages (once delivered) on the servers.",
+          style = MaterialTheme.typography.body1,
+          color = MaterialTheme.colors.onBackground
+        )
+        Spacer(Modifier.height(24.dp))
+        CreateProfilePanel(chatModel, routeHome)
+      }
     }
   }
 }
 
+
 fun isValidDisplayName(name: String) : Boolean {
   return (name.firstOrNull { it.isWhitespace() }) == null
 }
@@ -87,7 +95,8 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
     Text(
       "Display Name",
       style = MaterialTheme.typography.h6,
-      color = MaterialTheme.colors.onBackground
+      color = MaterialTheme.colors.onBackground,
+      modifier = Modifier.padding(bottom = 3.dp)
     )
     BasicTextField(
       value = displayName,
@@ -96,7 +105,9 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
         .fillMaxWidth()
         .background(MaterialTheme.colors.secondary)
         .height(40.dp)
-        .clip(RoundedCornerShape(3.dp)),
+        .clip(RoundedCornerShape(5.dp))
+        .padding(8.dp)
+        .navigationBarsWithImePadding(),
       textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
       keyboardOptions = KeyboardOptions(
         capitalization = KeyboardCapitalization.None,
@@ -104,18 +115,20 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
       ),
       singleLine = true
     )
-    if(!isValidDisplayName(displayName)) {
-      Text(
-        "Display name cannot contain whitespace.",
-        style = MaterialTheme.typography.body1,
-        color = MaterialTheme.colors.error
-      )
-    }
-    Spacer(Modifier.height(10.dp))
+    val errorText = if(!isValidDisplayName(displayName)) "Display name cannot contain whitespace." else ""
+
+    Text(
+      errorText,
+      fontSize = 15.sp,
+      color = MaterialTheme.colors.error
+    )
+
+    Spacer(Modifier.height(3.dp))
     Text(
       "Full Name (Optional)",
       style = MaterialTheme.typography.h6,
-      color = MaterialTheme.colors.onBackground
+      color = MaterialTheme.colors.onBackground,
+      modifier = Modifier.padding(bottom = 5.dp)
     )
     BasicTextField(
       value = fullName,
@@ -124,7 +137,9 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
         .fillMaxWidth()
         .background(MaterialTheme.colors.secondary)
         .height(40.dp)
-        .clip(RoundedCornerShape(3.dp)),
+        .clip(RoundedCornerShape(3.dp))
+        .padding(8.dp)
+        .navigationBarsWithImePadding(),
       textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
       keyboardOptions = KeyboardOptions(
         capitalization = KeyboardCapitalization.None,
@@ -132,6 +147,7 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
       ),
       singleLine = true
     )
+    Spacer(Modifier.height(20.dp))
     Button(onClick = {
       withApi {
         val user = chatModel.controller.apiCreateActiveUser(