android/ui: restyle the intro screen

Updates tailscale/corp#18202

Restyle the intro screen per UX

Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>

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),
+        modifier = Modifier.fillMaxHeight(),
-        horizontalAlignment = Alignment.CenterHorizontally) {
+        horizontalAlignment = Alignment.CenterHorizontally,
-          Spacer(modifier = Modifier.height(30.dp))
+        verticalArrangement = Arrangement.Center) {
           Image(
-              modifier =
+              modifier = Modifier.width(80.dp).height(80.dp),
-                  Modifier.width(140.dp)
+              painter = painterResource(id = R.drawable.androidicon_light),
-                      .height(140.dp)
-                      .clip(RoundedCornerShape(50))
-                      .background(Color.Black)
-                      .padding(15.dp),
-              painter = painterResource(id = R.drawable.ic_tile),
               contentDescription = stringResource(R.string.app_icon_content_description))
-          Spacer(modifier = Modifier.height(10.dp))
+          Spacer(modifier = Modifier.height(40.dp))
-          Text(
-              text = stringResource(R.string.tailscale),
-              style = MaterialTheme.typography.headlineLarge)
-          Spacer(modifier = Modifier.height(20.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)
         }
   }
 }

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>

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="getStarted">Get started</string>
+    <string name="welcome1">Tailscale is a mesh VPN for securely connecting your devices.</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="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>