From 50cc2bf8b258098b6d10eca4c575d7673fbe7beb Mon Sep 17 00:00:00 2001 From: Jonathan Nobels Date: Thu, 4 Apr 2024 10:09:46 -0400 Subject: [PATCH] android/ui: restyle the run as exit node screen Updates tailscale/corp#18202 Restyle the run as exit node screen per UX Signed-off-by: Jonathan Nobels --- .../tailscale/ipn/ui/view/RunExitNodeView.kt | 26 ++++++++++++------- android/src/main/res/values/strings.xml | 6 ++--- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/RunExitNodeView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/RunExitNodeView.kt index 6ce06a5..df512a1 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/RunExitNodeView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/RunExitNodeView.kt @@ -6,11 +6,13 @@ package com.tailscale.ipn.ui.view import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.outlined.ArrowForward +import androidx.compose.material3.Button import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold @@ -19,14 +21,12 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import com.tailscale.ipn.R -import com.tailscale.ipn.ui.theme.ts_color_light_blue import com.tailscale.ipn.ui.util.LoadingIndicator import com.tailscale.ipn.ui.viewModel.ExitNodePickerNav import com.tailscale.ipn.ui.viewModel.RunExitNodeViewModel @@ -45,8 +45,9 @@ fun RunExitNodeView( LoadingIndicator.Wrap { Column( horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(16.dp, alignment = Alignment.Top), - modifier = Modifier.padding(innerPadding).padding(16.dp).fillMaxHeight()) { + verticalArrangement = + Arrangement.spacedBy(24.dp, alignment = Alignment.CenterVertically), + modifier = Modifier.padding(innerPadding).padding(24.dp).fillMaxHeight()) { RunExitNodeGraphic() if (isRunningExitNode) { @@ -64,15 +65,16 @@ fun RunExitNodeView( fontWeight = FontWeight.SemiBold) Text(stringResource(R.string.run_exit_node_explainer)) } - Text(stringResource(R.string.run_exit_node_caution), color = Color.Red) + Text(stringResource(R.string.run_exit_node_caution)) - PrimaryActionButton(onClick = { model.setRunningExitNode(!isRunningExitNode) }) { + Button(onClick = { model.setRunningExitNode(!isRunningExitNode) }) { if (isRunningExitNode) { Text(stringResource(R.string.stop_running_as_exit_node)) } else { Text(stringResource(R.string.start_running_as_exit_node)) } } + Spacer(modifier = Modifier.size(24.dp)) } } } @@ -82,7 +84,11 @@ fun RunExitNodeView( fun RunExitNodeGraphic() { @Composable fun ArrowForward() { - Icon(Icons.AutoMirrored.Outlined.ArrowForward, "Arrow Forward", modifier = Modifier.size(24.dp)) + Icon( + Icons.AutoMirrored.Outlined.ArrowForward, + "Arrow Forward", + modifier = Modifier.size(24.dp), + tint = MaterialTheme.colorScheme.onSurfaceVariant) } Row( @@ -92,19 +98,19 @@ fun RunExitNodeGraphic() { Icon( painter = painterResource(id = R.drawable.computer), "Computer icon", - tint = ts_color_light_blue, + tint = MaterialTheme.colorScheme.onSurface, modifier = Modifier.size(36.dp)) ArrowForward() Icon( painter = painterResource(id = R.drawable.android), "Android icon", - tint = ts_color_light_blue, + tint = MaterialTheme.colorScheme.onSurface, modifier = Modifier.size(36.dp)) ArrowForward() Icon( painter = painterResource(id = R.drawable.globe), "Globe icon", - tint = ts_color_light_blue, + tint = MaterialTheme.colorScheme.onSurface, modifier = Modifier.size(36.dp)) } } diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml index 4c50b5e..46fde52 100644 --- a/android/src/main/res/values/strings.xml +++ b/android/src/main/res/values/strings.xml @@ -116,11 +116,11 @@ Mullvad VPN Best available Run as exit node - Run this device as an exit node? + Run as exit node? Other devices in your tailnet will be able to route their internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it. - Caution: Running an exit node will severely impact battery life. On a metered data plan, significant cellular data charges may also apply. Always disable this feature when no longer needed. + Running an exit node will severely impact battery life. On a metered data plan, significant cellular data charges may also apply. Always disable this feature when no longer needed. Stop running as exit node - Start running as exit node + Run as exit node Now running as exit node Other devices in your tailnet can now route their internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it. Enabled