More styling

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

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

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
@@ -37,7 +38,9 @@ fun MullvadExitNodePicker(
     LoadingIndicator.Wrap {
       Scaffold(
           topBar = {
-            Header(titleText = "${countryCode.flag()} ${any.country}", onBack = nav.onNavigateBack)
+            Header(
+                title = { Text("${countryCode.flag()} ${any.country}") },
+                onBack = nav.onNavigateBack)
           }) { innerPadding ->
             LazyColumn(modifier = Modifier.padding(innerPadding)) {
               if (nodes.size > 1) {

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

@@ -6,6 +6,7 @@ package com.tailscale.ipn.ui.view
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -19,7 +20,6 @@ import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
@@ -35,8 +35,6 @@ import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.tailscale.ipn.R
 import com.tailscale.ipn.ui.theme.listItem
-import com.tailscale.ipn.ui.theme.surfaceContainerListItem
-import com.tailscale.ipn.ui.theme.topAppBar
 import com.tailscale.ipn.ui.theme.ts_color_light_blue
 import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.util.itemsWithDividers
@@ -55,16 +53,13 @@ fun PeerDetails(
     model.node.collectAsState().value?.let { node ->
       Scaffold(
           topBar = {
-            TopAppBar(
+            Header(
                 title = {
-                  ListItem(
+                  Column {
-                      colors = MaterialTheme.colorScheme.surfaceContainerListItem,
-                      headlineContent = {
                     Text(
                         text = node.displayName,
-                            style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp))
+                        style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp),
-                      },
+                        color = MaterialTheme.colorScheme.onSurface)
-                      supportingContent = {
                     Row(verticalAlignment = Alignment.CenterVertically) {
                       Box(
                           modifier =
@@ -75,15 +70,14 @@ fun PeerDetails(
                       Spacer(modifier = Modifier.size(8.dp))
                       Text(
                           text = stringResource(id = node.connectedStrRes(netmap)),
-                              style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp))
+                          style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp),
+                          color = MaterialTheme.colorScheme.onSurfaceVariant)
+                    }
                   }
                 },
-                  )
+                onBack = { nav.onBack() })
           },
-                colors = MaterialTheme.colorScheme.topAppBar,
+      ) { innerPadding ->
-                navigationIcon = { BackArrow(action = { nav.onBack() }) },
-            )
-          }) { innerPadding ->
         LazyColumn(
             modifier = Modifier.padding(innerPadding),
         ) {
@@ -92,8 +86,7 @@ fun PeerDetails(
                 modifier =
                     Modifier.fillMaxWidth()
                         .background(
-                                color = MaterialTheme.colorScheme.surface,
+                            color = MaterialTheme.colorScheme.surface, shape = RectangleShape)) {
-                                shape = RectangleShape)) {
                   Text(
                       modifier = Modifier.padding(start = 16.dp, top = 16.dp),
                       text = stringResource(R.string.tailscale_addresses),

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

@@ -30,7 +30,8 @@ import com.tailscale.ipn.ui.util.itemsWithDividers
 @OptIn(ExperimentalPermissionsApi::class)
 @Composable
 fun PermissionsView(nav: BackNavigation, openApplicationSettings: () -> Unit) {
-  Scaffold(topBar = { Header(title = R.string.permissions, onBack = nav.onBack) }) { innerPadding ->
+  Scaffold(topBar = { Header(titleRes = R.string.permissions, onBack = nav.onBack) }) { innerPadding
+    ->
     val permissions = Permissions.all
     val permissionStates =
         rememberMultiplePermissionsState(permissions = permissions.map { it.name })

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

@@ -45,8 +45,9 @@ fun SettingsView(
   val managedBy = viewModel.managedBy.collectAsState().value
 
   Scaffold(
-      topBar = { Header(title = R.string.settings_title, onBack = settingsNav.onBackPressed) }) {
+      topBar = {
-          innerPadding ->
+        Header(titleRes = R.string.settings_title, onBack = settingsNav.onBackPressed)
+      }) { innerPadding ->
         Column(modifier = Modifier.padding(innerPadding)) {
           UserView(
               profile = user,

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

@@ -32,9 +32,19 @@ data class BackNavigation(
 // Header view for all secondary screens
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Header(@StringRes title: Int = 0, titleText: String? = null, onBack: (() -> Unit)? = null) {
+fun Header(
+    @StringRes titleRes: Int = 0,
+    title: (@Composable () -> Unit)? = null,
+    onBack: (() -> Unit)? = null
+) {
   TopAppBar(
-      title = { Text(titleText ?: stringResource(title)) },
+      title = {
+        title?.let { title() }
+            ?: Text(
+                stringResource(titleRes),
+                style = MaterialTheme.typography.titleLarge,
+                color = MaterialTheme.colorScheme.onSurface)
+      },
       colors = MaterialTheme.colorScheme.topAppBar,
       navigationIcon = { onBack?.let { BackArrow(action = it) } },
   )