From e2204b109bf8ce75669b3137ad7d296b149d0af4 Mon Sep 17 00:00:00 2001 From: Hai Nguyen <3423575+haiphucnguyen@users.noreply.github.com> Date: Mon, 3 Aug 2026 21:39:09 -0700 Subject: [PATCH] style(ui): Refine theming and styling across various UI components - Adjust icon and card tints for consistency in DiscoverView - Simplify parameters in StatCard definitions - Improve readability and add dynamic coloring to NavigationSidebar - Apply primary container colors in ExportSessionDialog --- .../io/askimo/ui/discover/DiscoverView.kt | 14 ++++---- .../askimo/ui/session/ExportSessionDialog.kt | 4 +-- .../io/askimo/ui/shell/NavigationSidebar.kt | 34 ++++++++++++++++--- 3 files changed, 37 insertions(+), 15 deletions(-) diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/discover/DiscoverView.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/discover/DiscoverView.kt index 756945d0..5cfb2c04 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/discover/DiscoverView.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/discover/DiscoverView.kt @@ -275,7 +275,7 @@ private fun statCardsSection( statCard( label = stringResource("discover.stat.chats"), value = totalChats?.let { LocalizationManager.formatNumber(it) } ?: "—", - icon = { Icon(Icons.Default.ChatBubbleOutline, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSecondaryContainer) }, + icon = { Icon(Icons.Default.ChatBubbleOutline, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant) }, onClick = onNavigateToSessions, modifier = Modifier.weight(1f), ) @@ -284,7 +284,7 @@ private fun statCardsSection( statCard( label = stringResource("discover.stat.projects"), value = totalProjects?.let { LocalizationManager.formatNumber(it) } ?: "—", - icon = { Icon(Icons.Default.FolderOpen, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSecondaryContainer) }, + icon = { Icon(Icons.Default.FolderOpen, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant) }, onClick = onNavigateToProjects, modifier = Modifier.weight(1f), ) @@ -294,7 +294,7 @@ private fun statCardsSection( statCard( label = stringResource("discover.stat.mcp"), value = LocalizationManager.formatNumber(totalMcpServers), - icon = { Icon(Icons.Default.Settings, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSecondaryContainer) }, + icon = { Icon(Icons.Default.Settings, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant) }, onClick = onNavigateToMcpSettings, modifier = Modifier.weight(1f), ) @@ -304,7 +304,7 @@ private fun statCardsSection( statCard( label = stringResource("discover.stat.plans"), value = totalPlans?.let { LocalizationManager.formatNumber(it) } ?: "—", - icon = { Icon(Icons.Default.PlayCircle, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSecondaryContainer) }, + icon = { Icon(Icons.Default.PlayCircle, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant) }, onClick = onNavigateToPlans, modifier = Modifier.weight(1f), ) @@ -314,7 +314,7 @@ private fun statCardsSection( statCard( label = stringResource("discover.stat.skills"), value = totalSkills?.let { LocalizationManager.formatNumber(it) } ?: "—", - icon = { Icon(Icons.Default.Extension, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSecondaryContainer) }, + icon = { Icon(Icons.Default.Extension, contentDescription = null, modifier = Modifier.size(24.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant) }, onClick = onNavigateToSkills, modifier = Modifier.weight(1f), ) @@ -330,7 +330,7 @@ private fun statCard( modifier: Modifier = Modifier, onClick: (() -> Unit)? = null, ) { - clickableCard(onClick = onClick, modifier = modifier, colors = AppComponents.secondaryCardColors()) { + clickableCard(onClick = onClick, modifier = modifier) { Column( modifier = Modifier.fillMaxWidth().padding(Spacing.large), verticalArrangement = Arrangement.spacedBy(Spacing.medium), @@ -339,12 +339,10 @@ private fun statCard( Text( text = value, style = AppTextStyles.pageTitle, - color = MaterialTheme.colorScheme.onSecondaryContainer, ) Text( text = label, style = AppTextStyles.body, - color = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.82f), ) } } diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/session/ExportSessionDialog.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/session/ExportSessionDialog.kt index 1ae85f13..428b0034 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/session/ExportSessionDialog.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/session/ExportSessionDialog.kt @@ -264,7 +264,7 @@ private fun formatCard( imageVector = icon, contentDescription = null, tint = if (isSelected) { - MaterialTheme.colorScheme.onSurface + MaterialTheme.colorScheme.onPrimaryContainer } else { MaterialTheme.colorScheme.onSurfaceVariant }, @@ -308,7 +308,7 @@ private fun formatCard( Icon( imageVector = Icons.Default.CheckCircle, contentDescription = "Selected", - tint = AppTextStyles.primaryContent, + tint = MaterialTheme.colorScheme.onPrimaryContainer, modifier = Modifier.size(24.dp), ) } diff --git a/desktop-shared/src/main/kotlin/io/askimo/ui/shell/NavigationSidebar.kt b/desktop-shared/src/main/kotlin/io/askimo/ui/shell/NavigationSidebar.kt index f3110cdf..88436394 100644 --- a/desktop-shared/src/main/kotlin/io/askimo/ui/shell/NavigationSidebar.kt +++ b/desktop-shared/src/main/kotlin/io/askimo/ui/shell/NavigationSidebar.kt @@ -346,7 +346,13 @@ private fun expandedNavigationSidebar( ) { NavigationDrawerItem( icon = { Icon(Icons.Default.FolderOpen, contentDescription = null) }, - label = { Text(stringResource("project.title"), style = AppTextStyles.groupTitle) }, + label = { + Text( + stringResource("project.title"), + style = AppTextStyles.groupTitle, + color = if (isProjectsSelected) MaterialTheme.colorScheme.onPrimaryContainer else AppTextStyles.primaryContent, + ) + }, selected = isProjectsSelected, onClick = onNavigateToProjects, badge = { @@ -361,7 +367,7 @@ private fun expandedNavigationSidebar( Icon( Icons.Default.Add, contentDescription = stringResource("project.new.dialog.title"), - tint = AppTextStyles.secondaryContent, + tint = if (isProjectsSelected) MaterialTheme.colorScheme.onPrimaryContainer else AppTextStyles.secondaryContent, modifier = Modifier.size((18 * fontScale).dp), ) } @@ -379,7 +385,13 @@ private fun expandedNavigationSidebar( if (showPlansInSidebar) { NavigationDrawerItem( icon = { Icon(Icons.Default.PlayCircle, contentDescription = null) }, - label = { Text(stringResource("plans.nav.title"), style = AppTextStyles.groupTitle) }, + label = { + Text( + stringResource("plans.nav.title"), + style = AppTextStyles.groupTitle, + color = if (isPlansSelected) MaterialTheme.colorScheme.onPrimaryContainer else AppTextStyles.primaryContent, + ) + }, selected = isPlansSelected, onClick = onNavigateToPlans, modifier = Modifier @@ -394,7 +406,13 @@ private fun expandedNavigationSidebar( if (showSkillsInSidebar) { NavigationDrawerItem( icon = { Icon(Icons.Default.Extension, contentDescription = null) }, - label = { Text(stringResource("skills.nav.title"), style = AppTextStyles.groupTitle) }, + label = { + Text( + stringResource("skills.nav.title"), + style = AppTextStyles.groupTitle, + color = if (isSkillsSelected) MaterialTheme.colorScheme.onPrimaryContainer else AppTextStyles.primaryContent, + ) + }, selected = isSkillsSelected, onClick = onNavigateToSkills, modifier = Modifier @@ -426,7 +444,13 @@ private fun expandedNavigationSidebar( // Sessions header (collapsible) NavigationDrawerItem( icon = { Icon(Icons.Default.History, contentDescription = null) }, - label = { Text(stringResource("chat.sessions"), style = AppTextStyles.groupTitle) }, + label = { + Text( + stringResource("chat.sessions"), + style = AppTextStyles.groupTitle, + color = if (isSessionsSelected) MaterialTheme.colorScheme.onPrimaryContainer else AppTextStyles.primaryContent, + ) + }, selected = isSessionsSelected, onClick = onToggleSessions, badge = {