ui: dark mode improvements

Applies dark mode improvements from session w/ Ale

Signed-off-by: Andrea Gottardo <andrea@gottardo.me>
pull/322/head
Andrea Gottardo 1 month ago
parent 5ad25262ad
commit 0b6ab1f7b4

@ -86,28 +86,28 @@ private val LightColors =
private val DarkColors = private val DarkColors =
darkColorScheme( darkColorScheme(
primary = Color(0xFF3f5eb3), // blue-600 primary = Color(0xFF4B70CC), // blue-500
onPrimary = Color(0xFFFFFFFF), // white onPrimary = Color(0xFFFFFFFF), // white
primaryContainer = Color(0xFFf0f5ff), // blue-0 primaryContainer = Color(0xFFf0f5ff), // blue-0
onPrimaryContainer = Color(0xFF3f5eb3), // blue-600 onPrimaryContainer = Color(0xFF3f5eb3), // blue-600
error = Color(0xFF940822), // red-600 error = Color(0xFFB22D30), // red-500
onError = Color(0xFFFFFFFF), // white onError = Color(0xFFFFFFFF), // white
errorContainer = Color(0xFFfff6f4), // red-0 errorContainer = Color(0xFFfff6f4), // red-0
onErrorContainer = Color(0xFF940822), // red-600 onErrorContainer = Color(0xFF940822), // red-600
surfaceDim = Color(0xFF1f1e1e), // gray-900 surfaceDim = Color(0xFF1f1e1e), // gray-900
surface = Color(0xFF232222), // gray-800 surface = Color(0xFF232222), // gray-800
background = Color(0xFF1f1e1e), // gray-900 background = Color(0xFF181717), // gray-1000
surfaceBright = Color(0xFF444342), // gray-600 surfaceBright = Color(0xFF444342), // gray-600
surfaceContainerLowest = Color(0xFF232222), // gray-800 surfaceContainerLowest = Color(0xFF1f1e1e), // gray-900
surfaceContainerLow = Color(0xFF2e2d2d), // gray-700 surfaceContainerLow = Color(0xFF232222), // gray-800
surfaceContainer = Color(0xFF2e2d2d), // gray-700 surfaceContainer = Color(0xFF181717), // gray-1000
surfaceContainerHigh = Color(0xFF2e2d2d), // gray-700 surfaceContainerHigh = Color(0xFF232222), // gray-800
surfaceContainerHighest = Color(0xFF444342), // gray-600 surfaceContainerHighest = Color(0xFF2e2d2d), // gray-700
surfaceVariant = Color(0xFF1f1e1e), // gray-900 surfaceVariant = Color(0xFF1f1e1e), // gray-900
onSurface = Color(0xFFfaf9f8), // gray-0 onSurface = Color(0xFFfaf9f8), // gray-0
onSurfaceVariant = Color(0xFFafacab), // gray-400 onSurfaceVariant = Color(0xFFafacab), // gray-400
outline = Color(0xFF706E6D), // gray-500 outline = Color(0xFF706E6D), // gray-500
outlineVariant = Color(0xFF444342), // gray-600 outlineVariant = Color(0xFF2E2D2D), // gray-700
inverseSurface = Color(0xFFEDEBEA), // gray-200 inverseSurface = Color(0xFFEDEBEA), // gray-200
inverseOnSurface = Color(0xFF000000), // black inverseOnSurface = Color(0xFF000000), // black
scrim = Color(0xAA000000), // black scrim = Color(0xAA000000), // black
@ -144,13 +144,13 @@ val ColorScheme.off: Color
@Composable @Composable
get() = get() =
if (isSystemInDarkTheme()) { if (isSystemInDarkTheme()) {
Color(0xFFAFACAB) // gray-400 Color(0xFF444342) // gray-600
} else { } else {
Color(0xFFD9D6D5) // gray-300 Color(0xFFD9D6D5) // gray-300
} }
val ColorScheme.link: Color val ColorScheme.link: Color
get() = onPrimaryContainer get() = primary
/** /**
* Main color scheme for list items, uses onPrimaryContainer color for leading and trailing icons. * Main color scheme for list items, uses onPrimaryContainer color for leading and trailing icons.

@ -48,6 +48,7 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalFocusManager
@ -94,7 +95,11 @@ data class MainViewNavigation(
@OptIn(ExperimentalPermissionsApi::class) @OptIn(ExperimentalPermissionsApi::class)
@Composable @Composable
fun MainView(loginAtUrl: (String) -> Unit, navigation: MainViewNavigation, viewModel: MainViewModel = viewModel()) { fun MainView(
loginAtUrl: (String) -> Unit,
navigation: MainViewNavigation,
viewModel: MainViewModel = viewModel()
) {
LoadingIndicator.Wrap { LoadingIndicator.Wrap {
Scaffold(contentWindowInsets = WindowInsets.Companion.statusBars) { paddingInsets -> Scaffold(contentWindowInsets = WindowInsets.Companion.statusBars) { paddingInsets ->
Column( Column(
@ -194,9 +199,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
modifier = Modifier.clickable { navAction() }, modifier = Modifier.clickable { navAction() },
colors = colors =
if (active) MaterialTheme.colorScheme.primaryListItem if (active) MaterialTheme.colorScheme.primaryListItem
else else ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surface),
ListItemDefaults.colors(
containerColor = MaterialTheme.colorScheme.surfaceContainerLowest),
overlineContent = { overlineContent = {
Text( Text(
stringResource(R.string.exit_node), stringResource(R.string.exit_node),
@ -238,10 +241,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
@Composable @Composable
fun SettingsButton(action: () -> Unit) { fun SettingsButton(action: () -> Unit) {
IconButton(modifier = Modifier.size(24.dp), onClick = { action() }) { IconButton(modifier = Modifier.size(24.dp), onClick = { action() }) {
Icon( Icon(Icons.Outlined.Settings, null, tint = MaterialTheme.colorScheme.onSurfaceVariant)
Icons.Outlined.Settings,
null,
)
} }
} }
@ -251,7 +251,8 @@ fun StartingView() {
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) { horizontalAlignment = Alignment.CenterHorizontally) {
TailscaleLogoView(animated = true, usesOnBackgroundColors = false, Modifier.size(40.dp)) TailscaleLogoView(
animated = true, usesOnBackgroundColors = false, Modifier.size(40.dp).alpha(0.3f))
} }
} }
@ -286,12 +287,11 @@ fun ConnectView(
textAlign = TextAlign.Center) textAlign = TextAlign.Center)
Spacer(modifier = Modifier.size(1.dp)) Spacer(modifier = Modifier.size(1.dp))
selfNode?.let { selfNode?.let {
PrimaryActionButton( PrimaryActionButton(onClick = { loginAtUrlAction(it.nodeAdminUrl) }) {
onClick = { loginAtUrlAction(it.nodeAdminUrl) }) { Text(
Text( text = stringResource(id = R.string.open_admin_console),
text = stringResource(id = R.string.open_admin_console), fontSize = MaterialTheme.typography.titleMedium.fontSize)
fontSize = MaterialTheme.typography.titleMedium.fontSize) }
}
} }
} else if (state != Ipn.State.NeedsLogin && user != null && !user.isEmpty()) { } else if (state != Ipn.State.NeedsLogin && user != null && !user.isEmpty()) {
Icon( Icon(
@ -356,7 +356,8 @@ fun PeerList(
) { ) {
val peerList = viewModel.peers.collectAsState(initial = emptyList<PeerSet>()) val peerList = viewModel.peers.collectAsState(initial = emptyList<PeerSet>())
val searchTermStr by viewModel.searchTerm.collectAsState(initial = "") val searchTermStr by viewModel.searchTerm.collectAsState(initial = "")
val showNoResults = remember { derivedStateOf { searchTermStr.isNotEmpty() && peerList.value.isEmpty() } }.value val showNoResults =
remember { derivedStateOf { searchTermStr.isNotEmpty() && peerList.value.isEmpty() } }.value
val netmap = viewModel.netmap.collectAsState() val netmap = viewModel.netmap.collectAsState()
val focusManager = LocalFocusManager.current val focusManager = LocalFocusManager.current

Loading…
Cancel
Save