From e4ec8cccfda503b3dd2e3ca41eaa180fd7afcb6c Mon Sep 17 00:00:00 2001
From: IanRDavies <ian_davies_@hotmail.co.uk>
Date: Tue, 22 Feb 2022 19:32:43 +0000
Subject: [PATCH] android: theme welcome view page (#354)

* initial theming changes

* styling work round 1
---
 .../chat/simplex/app/views/WelcomeView.kt     | 117 +++++++++++++++---
 1 file changed, 97 insertions(+), 20 deletions(-)

diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt
index 2c09ec0cb8..4ca02167bf 100644
--- a/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt
+++ b/apps/android/app/src/main/java/chat/simplex/app/views/WelcomeView.kt
@@ -2,10 +2,15 @@ package chat.simplex.app.views
 
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+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 chat.simplex.app.R
 import chat.simplex.app.model.ChatModel
@@ -16,18 +21,41 @@ import kotlinx.coroutines.DelicateCoroutinesApi
 @DelicateCoroutinesApi
 @Composable
 fun WelcomeView(chatModel: ChatModel, routeHome: () -> Unit) {
-  Column(
-    modifier = Modifier.verticalScroll(rememberScrollState())
-  ) {
-    Image(
-      painter=painterResource(R.drawable.logo), contentDescription = "Simplex Logo",
-    )
-    Text("You control your chat!")
-    Text("The messaging and application platform protecting your privacy and security.")
-    Spacer(Modifier.height(8.dp))
-    Text("We don't store any of your contacts or messages (once delivered) on the servers.")
-    Spacer(Modifier.height(24.dp))
-    CreateProfilePanel(chatModel, routeHome)
+  Box(
+    modifier = Modifier
+      .fillMaxSize()
+      .background(color = MaterialTheme.colors.background)
+  ){
+    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",
+      )
+      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)
+    }
   }
 }
 
@@ -37,14 +65,63 @@ fun CreateProfilePanel(chatModel: ChatModel, routeHome: () -> Unit) {
   var displayName by remember { mutableStateOf("") }
   var fullName by remember { mutableStateOf("") }
 
-  Column {
-    Text("Create profile")
-    Text("Your profile is stored on your device and shared only with your contacts.")
-    Text("Display Name")
-    TextField(value = displayName, onValueChange = { value -> displayName = value })
-    Text("Full Name (Optional)")
-    TextField(value = fullName, onValueChange = { fullName = it })
-    Button(onClick={
+  Column(
+    modifier=Modifier.fillMaxSize()
+  ) {
+    Text(
+      "Create profile",
+      style = MaterialTheme.typography.h4,
+      color = MaterialTheme.colors.onBackground,
+      modifier = Modifier.padding(vertical = 5.dp)
+    )
+    Text(
+      "Your profile is stored on your device and shared only with your contacts.",
+      style = MaterialTheme.typography.body1,
+      color = MaterialTheme.colors.onBackground
+    )
+    Spacer(Modifier.height(10.dp))
+    Text(
+      "Display Name",
+      style = MaterialTheme.typography.h6,
+      color = MaterialTheme.colors.onBackground
+    )
+    BasicTextField(
+      value = displayName,
+      onValueChange = { displayName = it },
+      modifier = Modifier
+        .fillMaxWidth()
+        .background(MaterialTheme.colors.secondary)
+        .height(40.dp)
+        .clip(RoundedCornerShape(3.dp)),
+      textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
+      keyboardOptions = KeyboardOptions(
+        capitalization = KeyboardCapitalization.None,
+        autoCorrect = false
+      ),
+      singleLine = true
+    )
+    Spacer(Modifier.height(10.dp))
+    Text(
+      "Full Name (Optional)",
+      style = MaterialTheme.typography.h6,
+      color = MaterialTheme.colors.onBackground
+    )
+    BasicTextField(
+      value = fullName,
+      onValueChange = { fullName = it },
+      modifier = Modifier
+        .fillMaxWidth()
+        .background(MaterialTheme.colors.secondary)
+        .height(40.dp)
+        .clip(RoundedCornerShape(3.dp)),
+      textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
+      keyboardOptions = KeyboardOptions(
+        capitalization = KeyboardCapitalization.None,
+        autoCorrect = false
+      ),
+      singleLine = true
+    )
+    Button(onClick = {
       withApi {
         val user = chatModel.controller.apiCreateActiveUser(
           Profile(displayName, fullName)