WIP

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

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

@@ -46,8 +46,10 @@ private val LightColors =
     lightColorScheme(
         primary = Color(0xFF4B70CC), // blue-500
         onPrimary = Color(0xFFFFFFFF), // white
-        primaryContainer = Color(0xFFF0F5FF), // blue-0
-        onPrimaryContainer = Color(0xFF3E5DB3), // blue-600
+        //        primaryContainer = Color(0xFFF0F5FF), // blue-0
+        primaryContainer = Color(0xFF6D94EC), // blue-400
+        //        onPrimaryContainer = Color(0xFF3E5DB3), // blue-600
+        onPrimaryContainer = Color(0xFFFFFFFF), // white,
         error = Color(0xFFB22C30), // red-500
         onError = Color(0xFFFFFFFF), // white
         errorContainer = Color(0xFFFEF6F3), // red-0
@@ -150,7 +152,7 @@ val ColorScheme.primaryListItem: ListItemColors
         containerColor = MaterialTheme.colorScheme.primary,
         headlineColor = MaterialTheme.colorScheme.onPrimary,
         leadingIconColor = MaterialTheme.colorScheme.onPrimary,
-        overlineColor = MaterialTheme.colorScheme.onPrimary,
+        overlineColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f),
         supportingTextColor = MaterialTheme.colorScheme.onPrimary,
         trailingIconColor = MaterialTheme.colorScheme.onPrimary,
         disabledHeadlineColor = default.disabledHeadlineColor,

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

@@ -3,6 +3,7 @@
 
 package com.tailscale.ipn.ui.view
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
@@ -20,12 +21,11 @@ import com.tailscale.ipn.ui.model.IpnLocal
 
 @OptIn(ExperimentalCoilApi::class)
 @Composable
-fun Avatar(profile: IpnLocal.LoginProfile?, size: Int = 50) {
+fun Avatar(profile: IpnLocal.LoginProfile?, size: Int = 50, action: (() -> Unit)? = null) {
   Box(contentAlignment = Alignment.Center, modifier = Modifier.size(size.dp).clip(CircleShape)) {
-    Icon(
-        imageVector = Icons.Default.Person,
-        contentDescription = null,
-        modifier = Modifier.size((size * .8f).dp))
+    var modifier = Modifier.size((size * .8f).dp)
+    action?.let { modifier = modifier.clickable { action() } }
+    Icon(imageVector = Icons.Default.Person, contentDescription = null, modifier = modifier)
 
     profile?.UserProfile?.ProfilePicURL?.let { url ->
       AsyncImage(model = url, modifier = Modifier.size((size * 1.2f).dp), contentDescription = null)

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

@@ -47,6 +47,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.isGranted
@@ -100,26 +101,32 @@ fun MainView(navigation: MainViewNavigation, viewModel: MainViewModel = viewMode
                 },
                 headlineContent = {
                   if (username.isNotEmpty()) {
-                    Text(text = username, style = MaterialTheme.typography.titleMedium)
+                    Text(
+                        text = username,
+                        style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp))
                   }
                 },
                 supportingContent = {
                   if (username.isNotEmpty()) {
-                    Text(text = stateStr, style = MaterialTheme.typography.bodyMedium)
+                    Text(
+                        text = stateStr,
+                        style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp))
                   } else {
-                    Text(text = stateStr, style = MaterialTheme.typography.bodyMedium)
+                    Text(
+                        text = stateStr,
+                        style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp))
                   }
                 },
                 trailingContent = {
-                  Box(
-                      modifier =
-                          Modifier.weight(1f).clickable { navigation.onNavigateToSettings() },
-                      contentAlignment = Alignment.CenterEnd) {
-                        when (user.value) {
-                          null -> SettingsButton(user.value) { navigation.onNavigateToSettings() }
-                          else -> Avatar(profile = user.value, size = 36)
-                        }
-                      }
+                  Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) {
+                    when (user.value) {
+                      null -> SettingsButton(user.value) { navigation.onNavigateToSettings() }
+                      else ->
+                          Avatar(profile = user.value, size = 36) {
+                            navigation.onNavigateToSettings()
+                          }
+                    }
+                  }
                 })
 
             when (state.value) {
@@ -169,7 +176,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
               overlineContent = {
                 Text(
                     stringResource(R.string.exit_node),
-                    style = MaterialTheme.typography.bodyMedium,
+                    style = MaterialTheme.typography.bodySmall,
                 )
               },
               headlineContent = {
@@ -179,12 +186,15 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
                           location?.let { "${it.CountryCode?.flag()} ${it.Country} - ${it.City}" }
                               ?: name
                               ?: stringResource(id = R.string.none),
-                      style = MaterialTheme.typography.titleMedium,
+                      style = MaterialTheme.typography.bodyMedium,
                       maxLines = 1,
                       overflow = TextOverflow.Ellipsis)
                   Icon(
-                      Icons.Outlined.ArrowDropDown,
-                      null,
+                      imageVector = Icons.Outlined.ArrowDropDown,
+                      contentDescription = null,
+                      tint =
+                          if (active) MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f)
+                          else MaterialTheme.colorScheme.onSurfaceVariant,
                   )
                 }
               },
@@ -336,7 +346,8 @@ fun PeerList(
                     Row(verticalAlignment = Alignment.CenterVertically) {
                       Box(
                           modifier =
-                              Modifier.size(10.dp)
+                              Modifier.padding(top = 2.dp)
+                                  .size(10.dp)
                                   .background(
                                       color = peer.connectedColor(netmap.value),
                                       shape = RoundedCornerShape(percent = 50))) {}

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

@@ -5,6 +5,7 @@ package com.tailscale.ipn.ui.view
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
@@ -41,10 +42,9 @@ fun Header(@StringRes title: Int = 0, titleText: String? = null, onBack: (() ->
 
 @Composable
 fun BackArrow(action: () -> Unit) {
-  Icon(
-      Icons.AutoMirrored.Filled.ArrowBack,
-      null,
-      modifier = Modifier.clickable { action() }.padding(start = 15.dp, end = 20.dp))
+  Box(modifier = Modifier.padding(start = 15.dp, end = 20.dp)) {
+    Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() })
+  }
 }
 
 @Composable