android/ui: make it more obvious that account settings row is clickable

Updates tailscale/corp#18968

Signed-off-by: Percy Wegmann <percy@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt

@@ -21,6 +21,7 @@ import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.tailscale.ipn.BuildConfig
 import com.tailscale.ipn.R
@@ -49,6 +50,7 @@ fun SettingsView(settingsNav: SettingsNav, viewModel: SettingsViewModel = viewMo
               onClick = settingsNav.onNavigateToUserSwitcher)
 
           if (isAdmin) {
+            Lists.ItemDivider()
             AdminTextView { handler.openUri(Links.ADMIN_URL) }
           }
 
@@ -150,9 +152,11 @@ fun AdminTextView(onNavigateToAdminConsole: () -> Unit) {
 
   ListItem(
       headlineContent = {
-        ClickableText(
+        Box(modifier = Modifier.padding(vertical = 4.dp)) {
-            text = adminStr,
+          ClickableText(
-            style = MaterialTheme.typography.bodyMedium,
+              text = adminStr,
-            onClick = { onNavigateToAdminConsole() })
+              style = MaterialTheme.typography.bodyMedium,
+              onClick = { onNavigateToAdminConsole() })
+        }
       })
 }

android/src/main/java/com/tailscale/ipn/ui/view/UserView.kt

@@ -5,13 +5,20 @@ package com.tailscale.ipn.ui.view
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemColors
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
 import com.tailscale.ipn.R
 import com.tailscale.ipn.ui.model.IpnLocal
 import com.tailscale.ipn.ui.theme.minTextSize
@@ -33,13 +40,17 @@ enum class UserActionState {
 @Composable
 fun UserView(
     profile: IpnLocal.LoginProfile?,
-    onClick: () -> Unit = {},
+    onClick: (() -> Unit)? = null,
-    actionState: UserActionState = UserActionState.NONE
+    colors: ListItemColors = ListItemDefaults.colors(),
+    actionState: UserActionState = UserActionState.NONE,
 ) {
   Box {
+    var modifier: Modifier = Modifier
+    onClick?.let { modifier = modifier.clickable { it() } }
     profile?.let {
       ListItem(
-          modifier = Modifier.clickable { onClick() },
+          modifier = modifier,
+          colors = colors,
           leadingContent = { Avatar(profile = profile, size = 36) },
           headlineContent = {
             AutoResizingText(
@@ -59,14 +70,17 @@ fun UserView(
             when (actionState) {
               UserActionState.CURRENT -> CheckedIndicator()
               UserActionState.SWITCHING -> SimpleActivityIndicator(size = 26)
-              UserActionState.NAV -> Unit
+              UserActionState.NAV ->
+                  Icon(
+                      Icons.AutoMirrored.Filled.KeyboardArrowRight, null, Modifier.offset(x = 6.dp))
               UserActionState.NONE -> Unit
             }
           })
     }
         ?: run {
           ListItem(
-              modifier = Modifier.clickable { onClick() },
+              modifier = modifier,
+              colors = colors,
               headlineContent = {
                 Text(
                     text = stringResource(id = R.string.accounts),

android/src/main/res/values/strings.xml

@@ -40,8 +40,8 @@
 
     <!-- Strings for the settings screen -->
     <string name="settings_title">Settings</string>
-    <string name="settings_admin_prefix">You can manage your account from the admin console.&#160;</string>
+    <string name="settings_admin_prefix">"Manage your tailnet settings in the "</string>
-    <string name="settings_admin_link">View admin console</string>
+    <string name="settings_admin_link">admin console</string>
     <string name="about_tailscale">About Tailscale</string>
     <string name="bug_report">Bug report</string>
     <string name="use_ts_dns">Use Tailscale DNS</string>
@@ -98,6 +98,7 @@
     <string name="logout_failed">Unable to logout at this time. Please try again.</string>
     <string name="error">Error</string>
     <string name="accounts">Accounts</string>
+    <string name="manage_accounts">Manage accounts</string>
     <string name="add_account">Add another account…</string>
     <string name="add_account_short">Add account</string>
     <string name="reauthenticate">Reauthenticate</string>