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,64 +53,59 @@ fun PeerDetails(
     model.node.collectAsState().value?.let { node ->
       Scaffold(
           topBar = {
-            TopAppBar(
+            Header(
                 title = {
-                  ListItem(
-                      colors = MaterialTheme.colorScheme.surfaceContainerListItem,
-                      headlineContent = {
-                        Text(
-                            text = node.displayName,
-                            style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp))
-                      },
-                      supportingContent = {
-                        Row(verticalAlignment = Alignment.CenterVertically) {
-                          Box(
-                              modifier =
-                                  Modifier.size(8.dp)
-                                      .background(
-                                          color = node.connectedColor(netmap),
-                                          shape = RoundedCornerShape(percent = 50))) {}
-                          Spacer(modifier = Modifier.size(8.dp))
-                          Text(
-                              text = stringResource(id = node.connectedStrRes(netmap)),
-                              style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp))
-                        }
-                      },
-                  )
-                },
-                colors = MaterialTheme.colorScheme.topAppBar,
-                navigationIcon = { BackArrow(action = { nav.onBack() }) },
-            )
-          }) { innerPadding ->
-            LazyColumn(
-                modifier = Modifier.padding(innerPadding),
-            ) {
-              item(key = "tailscaleAddresses") {
-                Box(
-                    modifier =
-                        Modifier.fillMaxWidth()
-                            .background(
-                                color = MaterialTheme.colorScheme.surface,
-                                shape = RectangleShape)) {
+                  Column {
+                    Text(
+                        text = node.displayName,
+                        style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp),
+                        color = MaterialTheme.colorScheme.onSurface)
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                      Box(
+                          modifier =
+                              Modifier.size(8.dp)
+                                  .background(
+                                      color = node.connectedColor(netmap),
+                                      shape = RoundedCornerShape(percent = 50))) {}
+                      Spacer(modifier = Modifier.size(8.dp))
                       Text(
-                          modifier = Modifier.padding(start = 16.dp, top = 16.dp),
-                          text = stringResource(R.string.tailscale_addresses),
-                          style = MaterialTheme.typography.titleSmall,
+                          text = stringResource(id = node.connectedStrRes(netmap)),
+                          style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp),
                           color = MaterialTheme.colorScheme.onSurfaceVariant)
                     }
-              }
+                  }
+                },
+                onBack = { nav.onBack() })
+          },
+      ) { innerPadding ->
+        LazyColumn(
+            modifier = Modifier.padding(innerPadding),
+        ) {
+          item(key = "tailscaleAddresses") {
+            Box(
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .background(
+                            color = MaterialTheme.colorScheme.surface, shape = RectangleShape)) {
+                  Text(
+                      modifier = Modifier.padding(start = 16.dp, top = 16.dp),
+                      text = stringResource(R.string.tailscale_addresses),
+                      style = MaterialTheme.typography.titleSmall,
+                      color = MaterialTheme.colorScheme.onSurfaceVariant)
+                }
+          }
 
-              itemsWithDividers(node.displayAddresses, key = { it.address }) {
-                AddressRow(address = it.address, type = it.typeString)
-              }
+          itemsWithDividers(node.displayAddresses, key = { it.address }) {
+            AddressRow(address = it.address, type = it.typeString)
+          }
 
-              item(key = "infoDivider") { Lists.SectionDivider() }
+          item(key = "infoDivider") { Lists.SectionDivider() }
 
-              itemsWithDividers(node.info, key = { "info_${it.titleRes}" }) {
-                ValueRow(title = stringResource(id = it.titleRes), value = it.value.getString())
-              }
-            }
+          itemsWithDividers(node.info, key = { "info_${it.titleRes}" }) {
+            ValueRow(title = stringResource(id = it.titleRes), value = it.value.getString())
           }
+        }
+      }
     }
   }
 }

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) }) {
-          innerPadding ->
+      topBar = {
+        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) } },
   )