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 @@ + + + + + + + + + + + + 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 @@ Taildrop failed - Tailscale - Get started - 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 + Get Started + Tailscale is a mesh VPN for securely connecting your devices. + 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.