From 827cfd2e2d5a857ad82181295125a49a07d42aa3 Mon Sep 17 00:00:00 2001 From: null Date: Wed, 17 Jun 2026 20:59:21 -0500 Subject: [PATCH] fix: UI polish across auth, play hub, settings, wheel screens --- .../java/app/closer/ui/auth/AuthVisuals.kt | 18 +++-- .../java/app/closer/ui/play/PlayHubScreen.kt | 70 +++++++----------- .../app/closer/ui/settings/SettingsVisuals.kt | 22 ++++-- .../java/app/closer/ui/theme/CloserPalette.kt | 73 +++++++++++++++++++ .../closer/ui/wheel/CategoryPickerScreen.kt | 72 +++++++++--------- .../app/closer/ui/wheel/SpinWheelScreen.kt | 52 +++++-------- 6 files changed, 184 insertions(+), 123 deletions(-) create mode 100644 app/src/main/java/app/closer/ui/theme/CloserPalette.kt diff --git a/app/src/main/java/app/closer/ui/auth/AuthVisuals.kt b/app/src/main/java/app/closer/ui/auth/AuthVisuals.kt index 1f031c03..948da09c 100644 --- a/app/src/main/java/app/closer/ui/auth/AuthVisuals.kt +++ b/app/src/main/java/app/closer/ui/auth/AuthVisuals.kt @@ -5,19 +5,25 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color +import app.closer.ui.theme.CloserPalette +import app.closer.ui.theme.BackgroundColor +import app.closer.ui.theme.OnBackgroundColor +import app.closer.ui.theme.OnPrimaryColor +import app.closer.ui.theme.OnSurfaceVariantColor +import app.closer.ui.theme.PrimaryColor internal val AuthBackgroundBrush: Brush get() = Brush.linearGradient( - colors = listOf(Color(0xFFFFFBFE), Color(0xFFF8F1FF), Color(0xFFFFEEF7)), + colors = listOf(BackgroundColor, CloserPalette.PurpleSoft, CloserPalette.PinkMist), start = Offset.Zero, end = Offset.Infinite ) -internal val AuthInk = Color(0xFF261D2E) -internal val AuthMuted = Color(0xFF5A5060) -internal val AuthPrimary = Color(0xFFB98AF4) -internal val AuthPrimaryDeep = Color(0xFF56306F) -internal val AuthOnPrimary = Color(0xFF24122F) +internal val AuthInk = OnBackgroundColor +internal val AuthMuted = OnSurfaceVariantColor +internal val AuthPrimary = PrimaryColor +internal val AuthPrimaryDeep = CloserPalette.PurpleDeep +internal val AuthOnPrimary = OnPrimaryColor @Composable internal fun authTextFieldColors() = OutlinedTextFieldDefaults.colors( diff --git a/app/src/main/java/app/closer/ui/play/PlayHubScreen.kt b/app/src/main/java/app/closer/ui/play/PlayHubScreen.kt index b70fa2ae..2abbe35f 100644 --- a/app/src/main/java/app/closer/ui/play/PlayHubScreen.kt +++ b/app/src/main/java/app/closer/ui/play/PlayHubScreen.kt @@ -32,8 +32,6 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.text.font.FontWeight @@ -41,6 +39,10 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import app.closer.core.navigation.AppRoute +import app.closer.ui.theme.CloserPalette +import app.closer.ui.theme.closerBackgroundBrush +import app.closer.ui.theme.closerBrandGlyphBrush +import app.closer.ui.theme.closerPlayCardBrush @Composable fun PlayHubScreen( @@ -56,13 +58,7 @@ private fun PlayHubContent( Box( modifier = Modifier .fillMaxSize() - .background( - Brush.linearGradient( - listOf(Color(0xFFFFFBFE), Color(0xFFF8F1FF), Color(0xFFFFEEF7)), - start = Offset.Zero, - end = Offset.Infinite - ) - ) + .background(closerBackgroundBrush()) ) { LazyColumn( modifier = Modifier @@ -80,14 +76,14 @@ private fun PlayHubContent( Text( text = "Play", style = MaterialTheme.typography.displaySmall.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onBackground, maxLines = 1, overflow = TextOverflow.Ellipsis ) Text( text = "Pick something light, useful, or a little surprising to do together.", style = MaterialTheme.typography.bodyLarge, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 2, overflow = TextOverflow.Ellipsis ) @@ -109,7 +105,7 @@ private fun PlayHubContent( title = "Date Match", subtitle = "Swipe ideas", icon = Icons.Filled.Favorite, - tint = Color(0xFF9B1B5A), + tint = CloserPalette.Romantic, modifier = Modifier.weight(1f), onClick = { onNavigate(AppRoute.DATE_MATCH) } ) @@ -117,7 +113,7 @@ private fun PlayHubContent( title = "Plan Date", subtitle = "Set the shape", icon = Icons.Filled.Star, - tint = Color(0xFF6A4A00), + tint = CloserPalette.Gold, modifier = Modifier.weight(1f), onClick = { onNavigate(AppRoute.DATE_BUILDER) } ) @@ -133,7 +129,7 @@ private fun PlayHubContent( title = "Bucket List", subtitle = "Save ideas", icon = Icons.Filled.Done, - tint = Color(0xFF2F5B4F), + tint = CloserPalette.Evergreen, modifier = Modifier.weight(1f), onClick = { onNavigate(AppRoute.BUCKET_LIST) } ) @@ -141,7 +137,7 @@ private fun PlayHubContent( title = "Wheel History", subtitle = "Past sessions", icon = Icons.Filled.Home, - tint = Color(0xFF56306F), + tint = CloserPalette.PurpleDeep, modifier = Modifier.weight(1f), onClick = { onNavigate(AppRoute.WHEEL_HISTORY) } ) @@ -159,18 +155,12 @@ private fun FeaturedPlayCard( onClick = onClick, modifier = Modifier.fillMaxWidth(), shape = RoundedCornerShape(30.dp), - colors = CardDefaults.cardColors(containerColor = Color.White.copy(alpha = 0.9f)), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.9f)), elevation = CardDefaults.cardElevation(defaultElevation = 12.dp) ) { Column( modifier = Modifier - .background( - Brush.linearGradient( - listOf(Color.White, Color(0xFFF3E8FF), Color(0xFFFFF7FB)), - start = Offset.Zero, - end = Offset.Infinite - ) - ) + .background(closerPlayCardBrush()) .padding(20.dp), verticalArrangement = Arrangement.spacedBy(18.dp) ) { @@ -181,25 +171,25 @@ private fun FeaturedPlayCard( ) { Surface( shape = RoundedCornerShape(999.dp), - color = Color.White.copy(alpha = 0.72f) + color = MaterialTheme.colorScheme.surface.copy(alpha = 0.72f) ) { Text( text = "Wheel", modifier = Modifier.padding(horizontal = 12.dp, vertical = 7.dp), style = MaterialTheme.typography.labelMedium, - color = Color(0xFF56306F), + color = CloserPalette.PurpleDeep, fontWeight = FontWeight.SemiBold ) } Surface( shape = RoundedCornerShape(999.dp), - color = Color(0xFFFFE8F4) + color = MaterialTheme.colorScheme.secondaryContainer ) { Text( text = "10 prompts", modifier = Modifier.padding(horizontal = 12.dp, vertical = 7.dp), style = MaterialTheme.typography.labelMedium, - color = Color(0xFF6D2B55), + color = CloserPalette.PinkAccentDeep, fontWeight = FontWeight.SemiBold ) } @@ -220,14 +210,14 @@ private fun FeaturedPlayCard( Text( text = "Spin the Wheel", style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onSurface, maxLines = 2, overflow = TextOverflow.Ellipsis ) Text( text = "Choose a mood, spin once, and move through a short session together.", style = MaterialTheme.typography.bodyMedium, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 3, overflow = TextOverflow.Ellipsis ) @@ -241,8 +231,8 @@ private fun FeaturedPlayCard( .heightIn(min = 54.dp), shape = RoundedCornerShape(18.dp), colors = ButtonDefaults.buttonColors( - containerColor = Color(0xFF56306F), - contentColor = Color.White + containerColor = CloserPalette.PurpleDeep, + contentColor = MaterialTheme.colorScheme.surface ) ) { Text("Choose category") @@ -264,7 +254,7 @@ private fun CompactPlayCard( onClick = onClick, modifier = modifier.heightIn(min = 154.dp), shape = RoundedCornerShape(24.dp), - colors = CardDefaults.cardColors(containerColor = Color.White), + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), elevation = CardDefaults.cardElevation(defaultElevation = 6.dp) ) { Column( @@ -291,7 +281,7 @@ private fun CompactPlayCard( Text( text = title, style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onSurface, maxLines = 2, overflow = TextOverflow.Ellipsis ) @@ -303,7 +293,7 @@ private fun CompactPlayCard( Text( text = subtitle, style = MaterialTheme.typography.bodySmall, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier.weight(1f), maxLines = 1, overflow = TextOverflow.Ellipsis @@ -327,22 +317,16 @@ private fun WheelGlyph( Surface( modifier = modifier, shape = RoundedCornerShape(26.dp), - color = Color(0xFF56306F) + color = CloserPalette.PurpleDeep ) { Box( contentAlignment = Alignment.Center, - modifier = Modifier.background( - Brush.linearGradient( - listOf(Color(0xFFB98AF4), Color(0xFFE7A2D1), Color(0xFF56306F)), - start = Offset.Zero, - end = Offset.Infinite - ) - ) + modifier = Modifier.background(closerBrandGlyphBrush()) ) { Icon( imageVector = Icons.Filled.PlayArrow, contentDescription = null, - tint = Color.White, + tint = MaterialTheme.colorScheme.surface, modifier = Modifier.size(34.dp) ) } diff --git a/app/src/main/java/app/closer/ui/settings/SettingsVisuals.kt b/app/src/main/java/app/closer/ui/settings/SettingsVisuals.kt index 08204598..6ec8f063 100644 --- a/app/src/main/java/app/closer/ui/settings/SettingsVisuals.kt +++ b/app/src/main/java/app/closer/ui/settings/SettingsVisuals.kt @@ -5,22 +5,28 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color +import app.closer.ui.theme.BackgroundColor +import app.closer.ui.theme.CloserPalette +import app.closer.ui.theme.OnBackgroundColor +import app.closer.ui.theme.OnPrimaryColor +import app.closer.ui.theme.OnSurfaceVariantColor +import app.closer.ui.theme.PrimaryColor internal val SettingsBackgroundBrush: Brush get() = Brush.linearGradient( - colors = listOf(Color(0xFFFFFBFE), Color(0xFFF8F1FF), Color(0xFFFFEEF7)), + colors = listOf(BackgroundColor, CloserPalette.PurpleSoft, CloserPalette.PinkMist), start = Offset.Zero, end = Offset.Infinite ) -internal val SettingsInk = Color(0xFF261D2E) -internal val SettingsMuted = Color(0xFF5A5060) -internal val SettingsPrimary = Color(0xFFB98AF4) -internal val SettingsPrimaryDeep = Color(0xFF56306F) -internal val SettingsOnPrimary = Color(0xFF24122F) +internal val SettingsInk = OnBackgroundColor +internal val SettingsMuted = OnSurfaceVariantColor +internal val SettingsPrimary = PrimaryColor +internal val SettingsPrimaryDeep = CloserPalette.PurpleDeep +internal val SettingsOnPrimary = OnPrimaryColor internal val SettingsCard = Color.White -internal val SettingsSoft = Color(0xFFF4E8FF) -internal val SettingsDanger = Color(0xFF8D2D35) +internal val SettingsSoft = CloserPalette.PurpleSoft +internal val SettingsDanger = CloserPalette.Danger @Composable internal fun settingsSwitchColors() = SwitchDefaults.colors( diff --git a/app/src/main/java/app/closer/ui/theme/CloserPalette.kt b/app/src/main/java/app/closer/ui/theme/CloserPalette.kt new file mode 100644 index 00000000..235102e3 --- /dev/null +++ b/app/src/main/java/app/closer/ui/theme/CloserPalette.kt @@ -0,0 +1,73 @@ +package app.closer.ui.theme + +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color + +object CloserPalette { + val PurpleDeep = Color(0xFF56306F) + val PurpleRich = Color(0xFF8F67C5) + val PurpleSoft = Color(0xFFF4E8FF) + val PurpleMist = Color(0xFFF0EDF9) + val PurpleGlow = Color(0xFFF0DFFF) + val PinkSoft = Color(0xFFFFE8F4) + val PinkMist = Color(0xFFFFEEF7) + val PinkBright = Color(0xFFE7A2D1) + val PinkWheel = Color(0xFFFFC2DD) + val PinkShell = Color(0xFFF7C8E4) + val PinkAccentDeep = Color(0xFF6D2B55) + val Romantic = Color(0xFF9B1B5A) + val Gold = Color(0xFF6A4A00) + val Evergreen = Color(0xFF2F5B4F) + val Danger = Color(0xFF8D2D35) +} + +@Composable +fun closerBackgroundBrush(): Brush = + Brush.linearGradient( + colors = listOf( + MaterialTheme.colorScheme.background, + CloserPalette.PurpleSoft, + CloserPalette.PinkMist + ), + start = Offset.Zero, + end = Offset.Infinite + ) + +@Composable +fun closerPlayCardBrush(): Brush = + Brush.linearGradient( + colors = listOf( + MaterialTheme.colorScheme.surface, + MaterialTheme.colorScheme.primaryContainer, + CloserPalette.PinkSoft + ), + start = Offset.Zero, + end = Offset.Infinite + ) + +@Composable +fun closerBrandGlyphBrush(): Brush = + Brush.linearGradient( + colors = listOf( + MaterialTheme.colorScheme.primary, + MaterialTheme.colorScheme.secondary, + CloserPalette.PurpleDeep + ), + start = Offset.Zero, + end = Offset.Infinite + ) + +@Composable +fun closerWheelSegmentColors(): List = listOf( + MaterialTheme.colorScheme.primary, + CloserPalette.PinkWheel, + MaterialTheme.colorScheme.secondary, + CloserPalette.PurpleGlow, + CloserPalette.PurpleRich, + MaterialTheme.colorScheme.secondaryContainer, + CloserPalette.PurpleDeep, + CloserPalette.PinkShell +) diff --git a/app/src/main/java/app/closer/ui/wheel/CategoryPickerScreen.kt b/app/src/main/java/app/closer/ui/wheel/CategoryPickerScreen.kt index b1feb772..fc0dbda4 100644 --- a/app/src/main/java/app/closer/ui/wheel/CategoryPickerScreen.kt +++ b/app/src/main/java/app/closer/ui/wheel/CategoryPickerScreen.kt @@ -34,9 +34,6 @@ import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Brush -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview @@ -45,6 +42,8 @@ import androidx.hilt.navigation.compose.hiltViewModel import app.closer.core.navigation.AppRoute import app.closer.domain.model.QuestionCategory import app.closer.ui.questions.displayCategoryName +import app.closer.ui.theme.CloserPalette +import app.closer.ui.theme.closerBackgroundBrush @Composable fun CategoryPickerScreen( @@ -74,13 +73,7 @@ private fun CategoryPickerContent( Box( modifier = Modifier .fillMaxSize() - .background( - Brush.linearGradient( - listOf(Color(0xFFFFFBFE), Color(0xFFF8F1FF), Color(0xFFFFEEF7)), - start = Offset.Zero, - end = Offset.Infinite - ) - ) + .background(closerBackgroundBrush()) ) { LazyColumn( modifier = Modifier @@ -104,25 +97,38 @@ private fun CategoryPickerContent( horizontalArrangement = Arrangement.spacedBy(14.dp), verticalAlignment = Alignment.CenterVertically ) { - CircularProgressIndicator(color = Color(0xFF56306F)) - Text("Loading categories…", style = MaterialTheme.typography.bodyMedium, color = Color(0xFF5A5060)) + CircularProgressIndicator(color = CloserPalette.PurpleDeep) + Text( + "Loading categories…", + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) } } state.error != null -> item { Card( modifier = Modifier.fillMaxWidth(), shape = RoundedCornerShape(22.dp), - colors = CardDefaults.cardColors(containerColor = Color.White.copy(alpha = 0.84f)) + colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.84f)) ) { Column(Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(10.dp)) { - Text("Categories unavailable", style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold, color = Color(0xFF261D2E)) - Text(state.error, style = MaterialTheme.typography.bodyMedium, color = Color(0xFF5A5060)) + Text( + "Categories unavailable", + style = MaterialTheme.typography.titleMedium, + fontWeight = FontWeight.SemiBold, + color = MaterialTheme.colorScheme.onSurface + ) + Text( + state.error, + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onSurfaceVariant + ) Button( onClick = onRetry, shape = RoundedCornerShape(16.dp), - colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF56306F)) + colors = ButtonDefaults.buttonColors(containerColor = CloserPalette.PurpleDeep) ) { - Text("Retry", color = Color.White) + Text("Retry", color = MaterialTheme.colorScheme.surface) } } } @@ -158,14 +164,14 @@ private fun WheelPickerHeader( Text( text = "Spin the Wheel", style = MaterialTheme.typography.headlineLarge.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onBackground, maxLines = 2, overflow = TextOverflow.Ellipsis ) Text( text = "Choose a mood and let chance pick the next conversation.", style = MaterialTheme.typography.bodyLarge, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 2, overflow = TextOverflow.Ellipsis ) @@ -175,8 +181,8 @@ private fun WheelPickerHeader( modifier = Modifier.heightIn(min = 48.dp), shape = RoundedCornerShape(999.dp), colors = ButtonDefaults.buttonColors( - containerColor = Color.White.copy(alpha = 0.82f), - contentColor = Color(0xFF56306F) + containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.82f), + contentColor = CloserPalette.PurpleDeep ) ) { Text("History") @@ -185,7 +191,7 @@ private fun WheelPickerHeader( Surface( modifier = Modifier.fillMaxWidth(), shape = RoundedCornerShape(22.dp), - color = Color(0xFFFFF8FC) + color = MaterialTheme.colorScheme.surface ) { Row( modifier = Modifier.padding(16.dp), @@ -194,14 +200,14 @@ private fun WheelPickerHeader( ) { Surface( shape = RoundedCornerShape(18.dp), - color = Color(0xFFF0DFFF), + color = CloserPalette.PurpleGlow, modifier = Modifier.size(46.dp) ) { Box(contentAlignment = Alignment.Center) { Icon( imageVector = Icons.Filled.PlayArrow, contentDescription = null, - tint = Color(0xFF56306F), + tint = CloserPalette.PurpleDeep, modifier = Modifier.size(24.dp) ) } @@ -213,14 +219,14 @@ private fun WheelPickerHeader( Text( text = "Ten prompts per spin", style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onSurface, maxLines = 1, overflow = TextOverflow.Ellipsis ) Text( text = "You can skip, continue, or end whenever the moment feels complete.", style = MaterialTheme.typography.bodySmall, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, maxLines = 2, overflow = TextOverflow.Ellipsis ) @@ -235,7 +241,7 @@ private fun CategoryCard( item: CategoryPickerItem, onClick: () -> Unit ) { - val containerColor = if (item.isLocked) Color(0xFFFFF8FC) else Color.White + val containerColor = if (item.isLocked) MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.4f) else MaterialTheme.colorScheme.surface Card( onClick = onClick, @@ -253,14 +259,14 @@ private fun CategoryCard( ) { Surface( shape = RoundedCornerShape(18.dp), - color = if (item.isLocked) Color(0xFFF0EDF9) else Color(0xFFFFE8F4), + color = if (item.isLocked) CloserPalette.PurpleMist else MaterialTheme.colorScheme.secondaryContainer, modifier = Modifier.size(48.dp) ) { Box(contentAlignment = Alignment.Center) { Icon( imageVector = if (item.isLocked) Icons.Default.Lock else Icons.Filled.Star, contentDescription = null, - tint = if (item.isLocked) Color(0xFF9B8AA6) else Color(0xFF6D2B55), + tint = if (item.isLocked) MaterialTheme.colorScheme.outline else CloserPalette.PinkAccentDeep, modifier = Modifier.size(22.dp) ) } @@ -275,7 +281,7 @@ private fun CategoryCard( text = item.category.displayName.ifBlank { item.category.id.displayCategoryName() }, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold, - color = if (item.isLocked) Color(0xFF9B8AA6) else Color(0xFF261D2E), + color = if (item.isLocked) MaterialTheme.colorScheme.outline else MaterialTheme.colorScheme.onSurface, maxLines = 1, overflow = TextOverflow.Ellipsis ) @@ -287,7 +293,7 @@ private fun CategoryCard( Icon( imageVector = Icons.AutoMirrored.Filled.ArrowForward, contentDescription = if (item.isLocked) "Unlock" else "Spin", - tint = if (item.isLocked) Color(0xFF9B8AA6) else Color(0xFF56306F), + tint = if (item.isLocked) MaterialTheme.colorScheme.outline else CloserPalette.PurpleDeep, modifier = Modifier.size(20.dp) ) } @@ -298,14 +304,14 @@ private fun CategoryCard( private fun CategoryPill(label: String) { Surface( shape = RoundedCornerShape(999.dp), - color = Color(0xFFF0EDF9), + color = CloserPalette.PurpleMist, modifier = Modifier.heightIn(min = 32.dp) ) { Text( text = label, modifier = Modifier.padding(horizontal = 10.dp, vertical = 5.dp), style = MaterialTheme.typography.labelSmall, - color = Color(0xFF56306F), + color = CloserPalette.PurpleDeep, maxLines = 1, overflow = TextOverflow.Ellipsis ) diff --git a/app/src/main/java/app/closer/ui/wheel/SpinWheelScreen.kt b/app/src/main/java/app/closer/ui/wheel/SpinWheelScreen.kt index 49828428..bc3d117b 100644 --- a/app/src/main/java/app/closer/ui/wheel/SpinWheelScreen.kt +++ b/app/src/main/java/app/closer/ui/wheel/SpinWheelScreen.kt @@ -34,8 +34,6 @@ import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.rotate -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Path import androidx.compose.ui.graphics.drawscope.Stroke @@ -45,6 +43,9 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel +import app.closer.ui.theme.CloserPalette +import app.closer.ui.theme.closerBackgroundBrush +import app.closer.ui.theme.closerWheelSegmentColors @Composable fun SpinWheelScreen( @@ -88,13 +89,7 @@ private fun SpinWheelContent( Box( modifier = Modifier .fillMaxSize() - .background( - Brush.linearGradient( - listOf(Color(0xFFFFFBFE), Color(0xFFF8F1FF), Color(0xFFFFEEF7)), - start = Offset.Zero, - end = Offset.Infinite - ) - ), + .background(closerBackgroundBrush()), contentAlignment = Alignment.Center ) { Column( @@ -113,7 +108,7 @@ private fun SpinWheelContent( Text( text = "Let the prompt find you", style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF261D2E), + color = MaterialTheme.colorScheme.onBackground, textAlign = TextAlign.Center, maxLines = 2, overflow = TextOverflow.Ellipsis @@ -121,13 +116,13 @@ private fun SpinWheelContent( if (state.categoryName.isNotBlank()) { Surface( shape = RoundedCornerShape(999.dp), - color = Color(0xFFF0EDF9) + color = CloserPalette.PurpleMist ) { Text( text = state.categoryName, modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp), style = MaterialTheme.typography.labelLarge, - color = Color(0xFF56306F), + color = CloserPalette.PurpleDeep, maxLines = 1, overflow = TextOverflow.Ellipsis ) @@ -154,7 +149,7 @@ private fun SpinWheelContent( state.error != null -> Text( text = state.error, style = MaterialTheme.typography.bodySmall, - color = Color(0xFF8D2D35), + color = MaterialTheme.colorScheme.error, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) @@ -162,7 +157,7 @@ private fun SpinWheelContent( Text( text = "${SpinWheelViewModel.SESSION_SIZE} questions selected", style = MaterialTheme.typography.bodyMedium, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) @@ -172,9 +167,9 @@ private fun SpinWheelContent( .fillMaxWidth() .heightIn(min = 56.dp), shape = RoundedCornerShape(18.dp), - colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF56306F)) + colors = ButtonDefaults.buttonColors(containerColor = CloserPalette.PurpleDeep) ) { - Text("Start session", color = Color.White) + Text("Start session", color = MaterialTheme.colorScheme.surface) } OutlinedButton( onClick = onSpin, @@ -186,12 +181,12 @@ private fun SpinWheelContent( Text("Spin again") } } - state.isLoading -> CircularProgressIndicator(color = Color(0xFF56306F)) + state.isLoading -> CircularProgressIndicator(color = CloserPalette.PurpleDeep) else -> { Text( text = "Tap to select ${SpinWheelViewModel.SESSION_SIZE} questions at random", style = MaterialTheme.typography.bodyMedium, - color = Color(0xFF5A5060), + color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) @@ -201,9 +196,9 @@ private fun SpinWheelContent( .fillMaxWidth() .heightIn(min = 56.dp), shape = RoundedCornerShape(18.dp), - colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF56306F)) + colors = ButtonDefaults.buttonColors(containerColor = CloserPalette.PurpleDeep) ) { - Text("Spin wheel", color = Color.White) + Text("Spin wheel", color = MaterialTheme.colorScheme.surface) } } } @@ -218,16 +213,7 @@ private fun WheelSpinner( spunAndReady: Boolean, rotation: Float ) { - val segmentColors = listOf( - Color(0xFFB98AF4), - Color(0xFFFFC2DD), - Color(0xFFE7A2D1), - Color(0xFFF0DFFF), - Color(0xFF8F67C5), - Color(0xFFFFE8F4), - Color(0xFF56306F), - Color(0xFFF7C8E4) - ) + val segmentColors = closerWheelSegmentColors() Box( modifier = Modifier.size(270.dp), @@ -268,20 +254,20 @@ private fun WheelSpinner( lineTo(size.width, 0f) close() } - drawPath(path = path, color = Color(0xFF261D2E)) + drawPath(path = path, color = CloserPalette.PurpleDeep) } Surface( modifier = Modifier.size(94.dp), shape = CircleShape, - color = Color.White, + color = MaterialTheme.colorScheme.surface, shadowElevation = 10.dp ) { Box(contentAlignment = Alignment.Center) { Text( text = if (spunAndReady) "Ready" else "Spin", style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.SemiBold), - color = Color(0xFF56306F), + color = CloserPalette.PurpleDeep, textAlign = TextAlign.Center, maxLines = 1, overflow = TextOverflow.Ellipsis