From c30260166f0f207e47f7e12f425e6b566e82e8cb Mon Sep 17 00:00:00 2001
From: Jonathan Nobels <jnobels@gmail.com>
Date: Thu, 4 Apr 2024 08:24:20 -0400
Subject: [PATCH] android/ui: restyle the intro screen

Updates tailscale/corp#18202

Restyle the intro screen per UX

Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>
---
 .../com/tailscale/ipn/ui/view/IntroView.kt    | 46 ++++++++++---------
 .../main/res/drawable/androidicon_light.xml   | 34 ++++++++++++++
 android/src/main/res/values/strings.xml       |  6 +--
 3 files changed, 61 insertions(+), 25 deletions(-)
 create mode 100644 android/src/main/res/drawable/androidicon_light.xml

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt
index 3712377..d4f421a 100644
--- a/android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt
+++ b/android/src/main/java/com/tailscale/ipn/ui/view/IntroView.kt
@@ -4,22 +4,21 @@
 package com.tailscale.ipn.ui.view
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -30,33 +29,36 @@ import com.tailscale.ipn.R
 fun IntroView(onContinue: () -> Unit) {
   Surface {
     Column(
-        modifier = Modifier.fillMaxHeight().padding(20.dp),
-        horizontalAlignment = Alignment.CenterHorizontally) {
-          Spacer(modifier = Modifier.height(30.dp))
+        modifier = Modifier.fillMaxHeight(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center) {
           Image(
-              modifier =
-                  Modifier.width(140.dp)
-                      .height(140.dp)
-                      .clip(RoundedCornerShape(50))
-                      .background(Color.Black)
-                      .padding(15.dp),
-              painter = painterResource(id = R.drawable.ic_tile),
+              modifier = Modifier.width(80.dp).height(80.dp),
+              painter = painterResource(id = R.drawable.androidicon_light),
               contentDescription = stringResource(R.string.app_icon_content_description))
-          Spacer(modifier = Modifier.height(10.dp))
-          Text(
-              text = stringResource(R.string.tailscale),
-              style = MaterialTheme.typography.headlineLarge)
-          Spacer(modifier = Modifier.height(20.dp))
+          Spacer(modifier = Modifier.height(40.dp))
           Text(
+              modifier = Modifier.padding(start = 40.dp, end = 40.dp, bottom = 40.dp),
               text = stringResource(R.string.welcome1),
-              style = MaterialTheme.typography.bodyMedium,
+              style = MaterialTheme.typography.bodyLarge,
               textAlign = TextAlign.Center)
-          Spacer(modifier = Modifier.height(20.dp))
-          PrimaryActionButton(onClick = onContinue) {
+
+          Button(onClick = onContinue) {
             Text(
                 text = stringResource(id = R.string.getStarted),
                 fontSize = MaterialTheme.typography.titleMedium.fontSize)
           }
+          Spacer(modifier = Modifier.height(40.dp))
+        }
+
+    Box(
+        modifier = Modifier.fillMaxHeight().padding(start = 20.dp, end = 20.dp, bottom = 40.dp),
+        contentAlignment = Alignment.BottomCenter) {
+          Text(
+              text = stringResource(R.string.welcome2),
+              style = MaterialTheme.typography.bodyMedium,
+              color = MaterialTheme.colorScheme.onSurfaceVariant,
+              textAlign = TextAlign.Center)
         }
   }
 }
diff --git a/android/src/main/res/drawable/androidicon_light.xml b/android/src/main/res/drawable/androidicon_light.xml
new file mode 100644
index 0000000..341e69f
--- /dev/null
+++ b/android/src/main/res/drawable/androidicon_light.xml
@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="200"
+    android:viewportHeight="200">
+
+  <path
+      android:pathData="M50,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#cccccc"/>
+  <path
+      android:pathData="M87.5,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#cccccc"/>
+  <path
+      android:pathData="M125,62.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#cccccc"/>
+  <path
+      android:pathData="M50,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M87.5,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M125,100a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M50,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#cccccc"/>
+  <path
+      android:pathData="M87.5,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M125,137.5a12.5,12.5 0,1 0,25 0a12.5,12.5 0,1 0,-25 0z"
+      android:fillColor="#cccccc"/>
+</vector>
diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml
index 4c50b5e..3b0c564 100644
--- a/android/src/main/res/values/strings.xml
+++ b/android/src/main/res/values/strings.xml
@@ -219,8 +219,8 @@
     <string name="taildrop_share_failed_title">Taildrop failed</string>
 
     <!-- Strings for the intro screen -->
-    <string name="tailscale">Tailscale</string>
-    <string name="getStarted">Get started</string>
-    <string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices. All connections are device-to-device, so we never see your data.\n\nWe collect and use your email address and name, as well as your device name, OS version, and IP address in order to help you to connect your devices and manage your settings. We log when you are connected to your network.\n</string>
+    <string name="getStarted">Get Started</string>
+    <string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices.</string>
+    <string name="welcome2">All connections are device-to-device, so we never see your data. We collect and use your email address and name, as well as your device name, OS version, and IP address in order to help you to connect your devices and manage your settings. We log when you are connected to your network.</string>
 
 </resources>