refactor: consolidate duplicated tokens and the monogram avatar

app/src/main/java/com/plainstudio/stackcasino/feature/assistant/AssistantConversationBody.kt

@@ -37,6 +37,7 @@ import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * Conversation state: the scrollable message list (LazyColumn so long

app/src/main/java/com/plainstudio/stackcasino/feature/assistant/AssistantScreen.kt

@@ -52,13 +52,16 @@ import com.plainstudio.stackcasino.R
 import com.plainstudio.stackcasino.ui.components.HairlineDivider
 import com.plainstudio.stackcasino.ui.components.PulsingDot
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
 import com.plainstudio.stackcasino.ui.theme.StackcasinoTheme
 import com.plainstudio.stackcasino.ui.theme.SurfaceBase
 import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
+import com.plainstudio.stackcasino.ui.theme.TabularNums
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * Nep assistant chat reproducing the cu-14 mockup
@@ -341,7 +344,7 @@ private fun InputBarFooter(charCount: Int) {
             color = TextLow,
             fontSize = FooterFontSize,
             letterSpacing = TrackedLetterSpacing,
-            style = TextStyle(fontFeatureSettings = "tnum"),
+            style = TabularNums,
         )
     }
 }
@@ -351,7 +354,6 @@ private fun InputBarFooter(charCount: Int) {
 // ---------------------------------------------------------------------------
 
 internal val ScreenHorizontalPadding = 16.dp
-internal val TrackedLetterSpacing = 1.2.sp
 internal val ConversationGap = 12.dp
 internal val NepBubbleAuthorFontSize = 10.sp
 internal val MessageBodyFontSize = 13.sp
@@ -378,7 +380,7 @@ private const val DISABLED_SEND_ALPHA = 0.40f
 private val SystemDotSize = 4.dp
 private val FooterFontSize = 9.sp
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 900)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 900)
 @Composable
 private fun AssistantContentWelcomePreview() {
     StackcasinoTheme {
@@ -391,7 +393,7 @@ private fun AssistantContentWelcomePreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 900)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 900)
 @Composable
 private fun AssistantContentConversationPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/assistant/AssistantWelcomeBody.kt

@@ -26,6 +26,7 @@ import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * Welcome state shown until the user sends the first message: Nep

app/src/main/java/com/plainstudio/stackcasino/feature/auth/LoginScreen.kt

@@ -46,10 +46,12 @@ import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.plainstudio.stackcasino.R
+import com.plainstudio.stackcasino.ui.components.MonogramAvatar
 import com.plainstudio.stackcasino.ui.components.PulsingDot
 import com.plainstudio.stackcasino.ui.components.gridBackground
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
 import com.plainstudio.stackcasino.ui.theme.AccentVioletSoft
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
 import com.plainstudio.stackcasino.ui.theme.StackcasinoTheme
@@ -59,6 +61,7 @@ import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 import com.plainstudio.stackcasino.util.initialsOf
 
 /**
@@ -421,23 +424,13 @@ private fun ContinueAsCard(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(12.dp),
         ) {
-            Box(
-                modifier = Modifier.background(AccentViolet).size(ContinueAsAvatarSize),
-                contentAlignment = Alignment.Center,
-            ) {
-                Text(
-                    text = initialsOf(state.displayName),
-                    color = Color.White,
-                    fontSize = 14.sp,
-                    fontWeight = FontWeight.Bold,
-                )
-            }
+            MonogramAvatar(initials = initialsOf(state.displayName), size = ContinueAsAvatarSize)
             Column(modifier = Modifier.weight(1f)) {
                 Text(
                     text = "CONTINUE AS",
                     color = AccentVioletSoft,
                     fontSize = 9.sp,
-                    letterSpacing = LetterSpacingTracked,
+                    letterSpacing = TrackedLetterSpacing,
                 )
                 Spacer(modifier = Modifier.height(2.dp))
                 Text(
@@ -468,7 +461,7 @@ private fun UseAnotherAccountLink(onClick: () -> Unit) {
         text = "USE ANOTHER ACCOUNT",
         color = TextMedium,
         fontSize = 10.sp,
-        letterSpacing = LetterSpacingTracked,
+        letterSpacing = TrackedLetterSpacing,
         textAlign = TextAlign.Center,
         modifier =
             Modifier
@@ -525,7 +518,7 @@ private fun ErrorBanner(
                     text = "SIGN-IN FAILED",
                     color = SemanticDanger,
                     fontSize = 10.sp,
-                    letterSpacing = LetterSpacingTracked,
+                    letterSpacing = TrackedLetterSpacing,
                     fontWeight = FontWeight.Bold,
                 )
                 Spacer(modifier = Modifier.height(4.dp))
@@ -612,7 +605,6 @@ private const val RETURNING_CARD_BORDER_ALPHA = 0.5f
 
 // Tracked letter-spacings (uppercase tracked text in the mockup).
 private val LetterSpacingMeta = 1.5.sp
-private val LetterSpacingTracked = 1.2.sp
 private val LetterSpacingTight = 1.sp
 private val LetterSpacingSubtitle = 3.sp
 private val LetterSpacingHero = 7.sp
@@ -622,7 +614,7 @@ private val LetterSpacingLegal = 0.5.sp
 // Previews
 // ---------------------------------------------------------------------------
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR)
 @Composable
 private fun LoginScreenIdlePreview() {
     StackcasinoTheme {
@@ -635,7 +627,7 @@ private fun LoginScreenIdlePreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR)
 @Composable
 private fun LoginScreenReturningPreview() {
     StackcasinoTheme {
@@ -653,7 +645,7 @@ private fun LoginScreenReturningPreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR)
 @Composable
 private fun LoginScreenLoadingPreview() {
     StackcasinoTheme {
@@ -666,7 +658,7 @@ private fun LoginScreenLoadingPreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR)
 @Composable
 private fun LoginScreenErrorPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/blackjack/BlackjackScreen.kt

@@ -40,6 +40,7 @@ import com.plainstudio.stackcasino.ui.components.StatCell
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
 import com.plainstudio.stackcasino.ui.theme.DISABLED_ALPHA
 import com.plainstudio.stackcasino.ui.theme.MetaFontSize
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.ScreenHorizontalPadding
 import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticInfo
@@ -462,7 +463,7 @@ private const val ACTION_FILL_ALPHA = 0.10f
 private const val ACTION_BORDER_ALPHA = 0.50f
 private const val CARD_BACK_ALPHA = 0.30f
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 800)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 800)
 @Composable
 private fun BlackjackScreenPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/coinflip/CoinflipScreen.kt

@@ -48,6 +48,7 @@ import com.plainstudio.stackcasino.ui.components.StatCell
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
 import com.plainstudio.stackcasino.ui.theme.AccentVioletSoft
 import com.plainstudio.stackcasino.ui.theme.MetaFontSize
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.ScreenHorizontalPadding
 import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
@@ -382,7 +383,7 @@ private const val LABEL_ALPHA = 0.6f
 private const val SPIN_DURATION_MS = 750
 private const val CAMERA_DISTANCE = 12f
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 800)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 800)
 @Composable
 private fun CoinflipScreenPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/crash/CrashScreen.kt

@@ -46,6 +46,7 @@ import com.plainstudio.stackcasino.ui.components.StatCell
 import com.plainstudio.stackcasino.ui.components.gridBackground
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
 import com.plainstudio.stackcasino.ui.theme.MetaFontSize
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.ScreenHorizontalPadding
 import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
@@ -428,7 +429,7 @@ private const val CURVE_STEPS = 24
 private const val CURVE_EXPONENT = 2.2
 private const val CURVE_STROKE_ALPHA = 0.85f
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 800)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 800)
 @Composable
 private fun CrashScreenPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/history/HistoryScreen.kt

@@ -33,7 +33,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -52,15 +51,18 @@ import com.plainstudio.stackcasino.ui.components.VerticalHairline
 import com.plainstudio.stackcasino.ui.components.gridBackground
 import com.plainstudio.stackcasino.ui.iconRes
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
 import com.plainstudio.stackcasino.ui.theme.StackcasinoTheme
 import com.plainstudio.stackcasino.ui.theme.SurfaceBase
 import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
+import com.plainstudio.stackcasino.ui.theme.TabularNums
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * History screen reproducing the cu-10 mockup
@@ -256,7 +258,7 @@ private fun SummaryCell(
             color = valueColor,
             fontSize = SummaryValueFontSize,
             fontWeight = FontWeight.Bold,
-            style = TextStyle(fontFeatureSettings = "tnum"),
+            style = TabularNums,
         )
     }
 }
@@ -333,7 +335,7 @@ private fun RoundHeader(round: HistoryRound) {
                 text = round.timestampLabel,
                 color = TextLow,
                 fontSize = TimestampFontSize,
-                style = TextStyle(fontFeatureSettings = "tnum"),
+                style = TabularNums,
             )
         }
         Icon(
@@ -415,7 +417,7 @@ private fun MetricCell(
             color = valueColor,
             fontSize = MetricFontSize,
             fontWeight = FontWeight.SemiBold,
-            style = TextStyle(fontFeatureSettings = "tnum"),
+            style = TabularNums,
         )
     }
 }
@@ -490,7 +492,6 @@ private val SearchVerticalPadding = 16.dp
 private val FilterGroupGap = 12.dp
 private val MetaFontSize = 10.sp
 private val SmallMetaFontSize = 9.sp
-private val TrackedLetterSpacing = 1.2.sp
 
 private val SummaryCellPadding = 12.dp
 private val SummaryValueFontSize = 18.sp
@@ -504,7 +505,7 @@ private val TimestampFontSize = 11.sp
 private val MetricFontSize = 14.sp
 private val EmptyIconSize = 24.dp
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 1400)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 1400)
 @Composable
 private fun HistoryScreenPreview() {
     StackcasinoTheme {

app/src/main/java/com/plainstudio/stackcasino/feature/housewallet/HouseWalletActive.kt

@@ -49,9 +49,11 @@ import com.plainstudio.stackcasino.ui.theme.SemanticOk
 import com.plainstudio.stackcasino.ui.theme.SurfaceBase
 import com.plainstudio.stackcasino.ui.theme.SurfaceElevated
 import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
+import com.plainstudio.stackcasino.ui.theme.TabularNums
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 import com.plainstudio.stackcasino.util.truncateMiddle
 
 /** Configured-wallet state: balance, address, the key card, and admin actions. */

app/src/main/java/com/plainstudio/stackcasino/feature/housewallet/HouseWalletBiometricPrompt.kt

@@ -33,6 +33,7 @@ import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * Biometric prompt overlay shown while revealing the private key. The

app/src/main/java/com/plainstudio/stackcasino/feature/housewallet/HouseWalletScreen.kt

@@ -32,19 +32,20 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.plainstudio.stackcasino.ui.components.HairlineDivider
 import com.plainstudio.stackcasino.ui.theme.AccentViolet
+import com.plainstudio.stackcasino.ui.theme.PREVIEW_BACKGROUND_COLOR
 import com.plainstudio.stackcasino.ui.theme.StackcasinoTheme
 import com.plainstudio.stackcasino.ui.theme.SurfaceBase
 import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.SurfaceRaised
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 import kotlinx.coroutines.delay
 
 /**
@@ -220,10 +221,8 @@ internal fun SectionLabel(
 internal val ScreenHorizontalPadding = 16.dp
 internal val SectionGap = 12.dp
 internal val CardPadding = 16.dp
-internal val TrackedLetterSpacing = 1.2.sp
 internal val MetaFontSize = 10.sp
 internal val SmallMetaFontSize = 9.sp
-internal val TabularNums = TextStyle(fontFeatureSettings = "tnum")
 
 internal const val REVEAL_SECONDS = 10
 private const val COUNTDOWN_TICK_MILLIS = 1000L
@@ -234,25 +233,25 @@ private val HeaderButtonSize = 36.dp
 private val HeaderIconSize = 16.dp
 private val BadgeIconSize = 10.dp
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 1000)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 1000)
 @Composable
 private fun HouseWalletUnsetPreview() {
     StackcasinoTheme { HouseWalletPreview(HouseWalletUiState.Unset) }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 1400)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 1400)
 @Composable
 private fun HouseWalletActivePreview() {
     StackcasinoTheme { HouseWalletPreview(HouseWalletUiState.Wallet(keyRevealed = false)) }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 1400)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 1400)
 @Composable
 private fun HouseWalletKeyRevealedPreview() {
     StackcasinoTheme { HouseWalletPreview(HouseWalletUiState.Wallet(keyRevealed = true)) }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF0B0B12, heightDp = 600)
+@Preview(showBackground = true, backgroundColor = PREVIEW_BACKGROUND_COLOR, heightDp = 600)
 @Composable
 private fun HouseWalletNoBiometricPreview() {
     StackcasinoTheme { HouseWalletPreview(HouseWalletUiState.NoBiometric) }

app/src/main/java/com/plainstudio/stackcasino/feature/housewallet/HouseWalletUnset.kt

@@ -42,6 +42,7 @@ import com.plainstudio.stackcasino.ui.theme.SurfaceOutline
 import com.plainstudio.stackcasino.ui.theme.TextHigh
 import com.plainstudio.stackcasino.ui.theme.TextLow
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /** Setup state: the intro plus the generate / import choice cards. */
 @Composable

app/src/main/java/com/plainstudio/stackcasino/feature/kyc/KycBanners.kt

@@ -30,6 +30,7 @@ import com.plainstudio.stackcasino.ui.theme.SemanticDanger
 import com.plainstudio.stackcasino.ui.theme.SemanticOk
 import com.plainstudio.stackcasino.ui.theme.SemanticWarn
 import com.plainstudio.stackcasino.ui.theme.TextMedium
+import com.plainstudio.stackcasino.ui.theme.TrackedLetterSpacing
 
 /**
  * Review-outcome banners. Each collapses the KYC screen to a single