WIP

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

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

@@ -55,8 +55,7 @@ private val LightColors =
         surfaceDim = Color(0xFFF7F5F4), // gray-100
         //        surface = Color(0xFFF7F5F4), // gray-100
         surface = Color(0xFFFFFFFF), // white,
-        //        background = Color(0xFFF7F5F4), // gray-100
-        background = Color(0xFFFFFFFF), // white
+        background = Color(0xFFF7F5F4), // gray-100
         surfaceBright = Color(0xFFFFFFFF), // white
         surfaceContainerLowest = Color(0xFFFFFFFF), // white
         surfaceContainerLow = Color(0xFFF7F5F4), // gray-100
@@ -134,8 +133,8 @@ val ColorScheme.surfaceContainerListItem: ListItemColors
         containerColor = MaterialTheme.colorScheme.surfaceContainer,
         headlineColor = MaterialTheme.colorScheme.onSurface,
         leadingIconColor = MaterialTheme.colorScheme.onSurface,
-        overlineColor = MaterialTheme.colorScheme.onSurface,
-        supportingTextColor = MaterialTheme.colorScheme.onSurface,
+        overlineColor = MaterialTheme.colorScheme.onSurfaceVariant,
+        supportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant,
         trailingIconColor = MaterialTheme.colorScheme.onSurface,
         disabledHeadlineColor = default.disabledHeadlineColor,
         disabledLeadingIconColor = default.disabledLeadingIconColor,

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

@@ -41,7 +41,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -63,7 +62,6 @@ 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
 import com.tailscale.ipn.ui.util.flag
@@ -221,7 +219,7 @@ fun StartingView() {
       modifier = Modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally) {
-        TailscaleLogoView(animated = true, Modifier.size(72.dp))
+        TailscaleLogoView(animated = true, Modifier.size(40.dp))
       }
 }
 
@@ -243,7 +241,8 @@ fun ConnectView(
           Icon(
               painter = painterResource(id = R.drawable.power),
               contentDescription = null,
-              modifier = Modifier.size(48.dp))
+              modifier = Modifier.size(40.dp),
+              tint = MaterialTheme.colorScheme.onSurfaceVariant)
           Text(
               text = stringResource(id = R.string.not_connected),
               fontSize = MaterialTheme.typography.titleMedium.fontSize,
@@ -312,9 +311,9 @@ fun PeerList(
       shadowElevation = 0.dp,
       colors =
           SearchBarDefaults.colors(
-              containerColor = Color.Transparent, dividerColor = Color.Transparent),
+              containerColor = MaterialTheme.colorScheme.surface,
+              dividerColor = MaterialTheme.colorScheme.outline),
       modifier = Modifier.fillMaxWidth()) {
-        Lists.ItemDivider()
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
         ) {

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

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
@@ -32,8 +33,8 @@ val logoDotsMatrix: DotsMatrix =
 @Composable
 fun TailscaleLogoView(animated: Boolean = false, modifier: Modifier) {
 
-  val primaryColor: Color = Color(0xFF706E6D)
-  val secondaryColor: Color = primaryColor.copy(alpha = 0.3f)
+  val primaryColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
+  val secondaryColor: Color = primaryColor.copy(alpha = 0.1f)
 
   val currentDotsMatrix: StateFlow<DotsMatrix> = MutableStateFlow(logoDotsMatrix)
   var currentDotsMatrixIndex = 0

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

@@ -4,19 +4,9 @@
 package com.tailscale.ipn.ui.view
 
 import androidx.compose.material3.Switch
-import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
-import com.tailscale.ipn.ui.theme.ts_color_light_blue
 
 @Composable
 fun TintedSwitch(checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, enabled: Boolean = true) {
-  Switch(
-      checked = checked,
-      onCheckedChange = onCheckedChange,
-      enabled = enabled,
-      colors =
-          SwitchDefaults.colors(
-              checkedBorderColor = ts_color_light_blue,
-              checkedThumbColor = ts_color_light_blue,
-              checkedTrackColor = ts_color_light_blue.copy(alpha = 0.3f)))
+  Switch(checked = checked, onCheckedChange = onCheckedChange, enabled = enabled)
 }