Exit node picker styling

android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt

@@ -4,6 +4,8 @@
 package com.tailscale.ipn.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ListItemColors
@@ -124,7 +126,7 @@ val ColorScheme.listItem: ListItemColors
   }
 
 /** Color scheme for list items that should be styled as a surface container. */
-val ColorScheme.containerListItem: ListItemColors
+val ColorScheme.surfaceContainerListItem: ListItemColors
   @Composable
   get() {
     val default = ListItemDefaults.colors()
@@ -140,6 +142,23 @@ val ColorScheme.containerListItem: ListItemColors
         disabledTrailingIconColor = default.disabledTrailingIconColor)
   }
 
+/** Color scheme for list items that should be styled as a primary item. */
+val ColorScheme.primaryListItem: ListItemColors
+  @Composable
+  get() {
+    val default = ListItemDefaults.colors()
+    return ListItemColors(
+        containerColor = MaterialTheme.colorScheme.primary,
+        headlineColor = MaterialTheme.colorScheme.onPrimary,
+        leadingIconColor = MaterialTheme.colorScheme.onPrimary,
+        overlineColor = MaterialTheme.colorScheme.onPrimary,
+        supportingTextColor = MaterialTheme.colorScheme.onPrimary,
+        trailingIconColor = MaterialTheme.colorScheme.onPrimary,
+        disabledHeadlineColor = default.disabledHeadlineColor,
+        disabledLeadingIconColor = default.disabledLeadingIconColor,
+        disabledTrailingIconColor = default.disabledTrailingIconColor)
+  }
+
 /** Main color scheme for top app bar, styles it as a surface container. */
 @OptIn(ExperimentalMaterial3Api::class)
 val ColorScheme.topAppBar: TopAppBarColors
@@ -151,3 +170,14 @@ val ColorScheme.topAppBar: TopAppBarColors
               navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
               titleContentColor = MaterialTheme.colorScheme.onSurface,
           )
+
+val ColorScheme.secondaryButton: ButtonColors
+  @Composable
+  get() {
+    val defaults = ButtonDefaults.buttonColors()
+    return ButtonColors(
+        containerColor = MaterialTheme.colorScheme.primaryContainer,
+        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+        disabledContainerColor = defaults.disabledContainerColor,
+        disabledContentColor = defaults.disabledContentColor)
+  }

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

@@ -28,6 +28,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SearchBar
@@ -57,8 +58,10 @@ import com.tailscale.ipn.ui.model.IpnLocal
 import com.tailscale.ipn.ui.model.Permission
 import com.tailscale.ipn.ui.model.Permissions
 import com.tailscale.ipn.ui.model.Tailcfg
-import com.tailscale.ipn.ui.theme.containerListItem
 import com.tailscale.ipn.ui.theme.listItem
+import com.tailscale.ipn.ui.theme.primaryListItem
+import com.tailscale.ipn.ui.theme.secondaryButton
+import com.tailscale.ipn.ui.theme.surfaceContainerListItem
 import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.util.LoadingIndicator
 import com.tailscale.ipn.ui.util.PeerSet
@@ -88,7 +91,7 @@ fun MainView(navigation: MainViewNavigation, viewModel: MainViewModel = viewMode
             val username = viewModel.userName
 
             ListItem(
-                colors = MaterialTheme.colorScheme.containerListItem,
+                colors = MaterialTheme.colorScheme.surfaceContainerListItem,
                 leadingContent = {
                   val isOn = viewModel.vpnToggleState.collectAsState(initial = false)
                   TintedSwitch(
@@ -151,6 +154,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
   val peer = exitNodeId?.let { id -> netmap.value?.Peers?.find { it.StableID == id } }
   val location = peer?.Hostinfo?.Location
   val name = peer?.ComputedName
+  val active = peer != null
 
   Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surfaceContainer)) {
     Box(
@@ -160,6 +164,9 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
                 .fillMaxWidth()) {
           ListItem(
               modifier = Modifier.clickable { navAction() },
+              colors =
+                  if (active) MaterialTheme.colorScheme.primaryListItem
+                  else ListItemDefaults.colors(),
               overlineContent = {
                 Text(
                     stringResource(R.string.exit_node),
@@ -184,9 +191,11 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
               },
               trailingContent = {
                 if (peer != null) {
-                  Button(onClick = { viewModel.disableExitNode() }) {
+                  Button(
-                    Text(stringResource(R.string.disable))
+                      colors = MaterialTheme.colorScheme.secondaryButton,
-                  }
+                      onClick = { viewModel.disableExitNode() }) {
+                        Text(stringResource(R.string.disable))
+                      }
                 }
               })
         }