diff --git a/.claude/agents/DEVELOPMENT-PATTERNS.md b/.claude/agents/DEVELOPMENT-PATTERNS.md index 5d4a7fb157..ced10c48a5 100644 --- a/.claude/agents/DEVELOPMENT-PATTERNS.md +++ b/.claude/agents/DEVELOPMENT-PATTERNS.md @@ -78,6 +78,86 @@ component to our component: - ListEmptyState - ListEmptyState - tablelist-masternodekeys - TableListMasternodeKeyRow +## Dark Mode Compatibility + +Every new screen, dialog, and component must work in both light and dark mode. The app uses `Theme.AppCompat.DayNight` which activates `values-night/` resource qualifiers automatically. + +### Compose: The Golden Rule + +**One call to `LocalDashColors.current` per composable, at the top. Never use `MyTheme.Colors.*` directly.** + +```kotlin +@Composable +fun MyComponent(...) { + val colors = LocalDashColors.current // ← always this, nothing else + Column(modifier = Modifier.background(colors.backgroundPrimary)) { + Text("Hello", color = colors.textPrimary) + } +} +``` + +**Root entry point wrapping** — The topmost composable in a Fragment's `setContent { }` block must be wrapped in `DashWalletTheme`: + +```kotlin +composeView.setContent { + DashWalletTheme { // ← selects light or dark colors once + MyScreen(...) + } +} +``` + +**Rules:** +- `DashWalletTheme` wraps the root once. Child composables never call `isSystemInDarkTheme()`. +- `MyTheme.Colors` (light) and `MyTheme.DarkColors` (dark) are the source-of-truth instances; `LocalDashColors.current` resolves to the correct one automatically. +- Always wrap previews in `DashWalletTheme`. For dark previews add `uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES`: + +```kotlin +@Preview(name = "Dark", uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES) +@Composable +fun MyPreviewDark() { + DashWalletTheme { MyComponent(...) } +} +``` + +### ColorScheme Fields Reference + +Key fields from `MyTheme.ColorScheme` (use via `LocalDashColors.current`): + +| Field | Light | Dark | Use for | +|-------|-------|------|---------| +| `backgroundPrimary` | `#F5F6F7` | `#10151F` | Page background | +| `backgroundSecondary` | `#FFFFFF` | `#1D2532` | Cards, sheets, panels | +| `textPrimary` | `#191C1F` | `#FFFFFF` | Primary text | +| `textSecondary` | `#6E757C` | `#92929C` | Secondary / helper text | +| `textTertiary` | `#75808A` | `#75808A` | Tertiary / label text | +| `dashBlue` | `#008DE4` | `#008DE4` | Brand accent, links | +| `dividerColor` | `#EDF0F2` | `#2C3748` | Dividers, borders | +| `disabledButtonBg` | `#EEEEEE` | `#3C3C3C` | Disabled button background | +| `contentDisabled` | `#92929C` | `#92929C` | Disabled text / icon | + +### XML Layouts: Semantic Color Tokens + +Use semantic tokens from `values/colors.xml` — they have night overrides in `values-night/colors.xml`. Never use `@android:color/white` or literal hex values for surfaces or text. + +| Purpose | Token | +|---------|-------| +| Page background | `@color/background_primary` | +| Card / sheet surface | `@color/background_secondary` | +| Primary text | `@color/content_primary` | +| Dividers / borders | `@color/divider_color` | + +### XML Drawables: Adaptive Colors + +- **Shape drawables** (cards, panels): fill with `@color/background_secondary`, not `@android:color/white` +- **Vector icons**: set `android:tint="@color/content_primary"` on the `` element instead of a hardcoded fill +- **Color state lists** (``): the default (last) item must use `@color/content_primary`, not a hardcoded hex + +### DashButton Disabled State + +`DashButton` handles the disabled state automatically via `colors.disabledButtonBg` and `colors.contentDisabled`. Do not set `alpha` or override colors manually for disabled buttons — just pass `isEnabled = false`. + +--- + ## NavBar / TopNavBase (Figma: NavBar) The navigation bar lives in: @@ -329,7 +409,7 @@ ListItem( Icon( painter = painterResource(R.drawable.ic_dash_blue_filled), contentDescription = null, - tint = MyTheme.Colors.dashBlue, + tint = LocalDashColors.current.dashBlue, modifier = Modifier.size(32.dp) ) } @@ -370,7 +450,7 @@ ListItem( Icon( painter = painterResource(R.drawable.ic_menu_row_arrow), contentDescription = null, - tint = MyTheme.Colors.textTertiary, + tint = LocalDashColors.current.textTertiary, modifier = Modifier.size(16.dp) ) } @@ -408,7 +488,7 @@ ListEmptyState( Icon( painter = painterResource(R.drawable.ic_dash_blue_filled), contentDescription = null, - tint = MyTheme.Colors.dashBlue, + tint = LocalDashColors.current.dashBlue, modifier = Modifier.size(48.dp) ) }, @@ -561,7 +641,7 @@ FeatureItemNumber(number = "1") **Visual Specs**: - Size: 20dp circle -- Background: MyTheme.Colors.dashBlue +- Background: `colors.dashBlue` (via `LocalDashColors.current`) - Border radius: 8dp - Text: 12sp, white, centered @@ -846,18 +926,21 @@ When implementing designs from Figma, use the following typography mappings. All ### Usage Examples ```kotlin +// Always read colors at the top of the composable: +val colors = LocalDashColors.current + // Dialog title - Use Headline S Bold Text( text = stringResource(R.string.upgrade_pin_title), style = MyTheme.Typography.HeadlineSmallBold, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) // Dialog description - Use Body M (Regular) Text( text = stringResource(R.string.upgrade_pin_description), style = MyTheme.Typography.BodyMedium, - color = MyTheme.Colors.textSecondary + color = colors.textSecondary ) // List item title - Use Title M Semibold @@ -870,7 +953,7 @@ Text( Text( text = "2 hours ago", style = MyTheme.Typography.LabelMedium, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) // Button text - Use Label L Semibold (handled by DashButton) @@ -986,10 +1069,11 @@ private fun SettingsScreenContent( else -> stringResource(statusId) } + val colors = LocalDashColors.current Column( modifier = Modifier .fillMaxSize() - .background(MyTheme.Colors.backgroundPrimary) + .background(colors.backgroundPrimary) ) { // Top Navigation NavBarBack(onBackClick = onBackClick) diff --git a/.claude/agents/figma-to-compose.md b/.claude/agents/figma-to-compose.md index 0618f3f2d8..114f5cbb3a 100644 --- a/.claude/agents/figma-to-compose.md +++ b/.claude/agents/figma-to-compose.md @@ -87,18 +87,20 @@ See `development-patterns` for full `NavBarBack`/`NavBarBackTitle`/`TopIntro` us #### Color Mapping -| Figma Token | MyTheme Reference | Hex | -|-------------|-------------------|-----| -| `text/primary` | `MyTheme.Colors.textPrimary` | `#191C1F` | -| `text/secondary` | `MyTheme.Colors.textSecondary` | `#6E757C` | -| `text/tertiary` | `MyTheme.Colors.textTertiary` | `#75808A` | -| `background/primary` | `MyTheme.Colors.backgroundPrimary` | `#F5F6F7` | -| `background/secondary` | `MyTheme.Colors.backgroundSecondary` | `#FFFFFF` | -| `colors/dash-blue` | `MyTheme.Colors.dashBlue` | `#008DE4` | -| `colors/orange` | `MyTheme.Colors.orange` | `#FA9269` | -| `colors/red` | `MyTheme.Colors.red` | `#EA3943` | -| `colors/green` | `MyTheme.Colors.green` | `#3CB878` | -| `colors/gray` | `MyTheme.Colors.gray` | `#B0B6BC` | +**Important:** Never reference `MyTheme.Colors.*` directly in composables. Always read the current theme colors via `val colors = LocalDashColors.current` at the top of each composable, then use `colors.*`. This ensures correct values in both light and dark mode. + +| Figma Token | `colors.*` field | Light hex | Dark hex | +|-------------|-----------------|-----------|----------| +| `text/primary` | `colors.textPrimary` | `#191C1F` | `#FFFFFF` | +| `text/secondary` | `colors.textSecondary` | `#6E757C` | `#92929C` | +| `text/tertiary` | `colors.textTertiary` | `#75808A` | `#75808A` | +| `background/primary` | `colors.backgroundPrimary` | `#F5F6F7` | `#10151F` | +| `background/secondary` | `colors.backgroundSecondary` | `#FFFFFF` | `#1D2532` | +| `colors/dash-blue` | `colors.dashBlue` | `#008DE4` | `#008DE4` | +| `colors/orange` | `colors.orange` | `#FA9269` | `#FA9269` | +| `colors/red` | `colors.red` | `#EA3943` | `#EA3943` | +| `colors/green` | `colors.green` | `#3CB878` | `#3CB878` | +| `colors/gray` | `colors.gray` | `#B0B6BC` | `#B0B6BC` | ### 4. Handle Icons and Image Assets @@ -294,6 +296,79 @@ After implementation: 3. Verify all `R.string.*` references have entries in strings.xml 4. Confirm the nav graph `tools:layout` attribute is removed if the fragment uses ComposeView +## Dark Mode Compatibility + +Every new screen, dialog, and component must work correctly in both light and dark mode. Follow these rules without exception. + +### Compose: Theme Color Access + +**Root entry point** — The composable entry point called from a Fragment's `ComposeView.setContent { }` must be wrapped in `DashWalletTheme`: + +```kotlin +// In Fragment.onCreateView or onViewCreated: +composeView.setContent { + DashWalletTheme { + MyScreen(...) + } +} +``` + +**Inside every composable** — read current colors once at the top: + +```kotlin +@Composable +fun MyComponent(...) { + val colors = LocalDashColors.current + // Use colors.textPrimary, colors.backgroundSecondary, etc. + // NEVER use MyTheme.Colors.* directly here +} +``` + +**Rules:** +- Never call `isSystemInDarkTheme()` inside individual components or screens — `DashWalletTheme` handles this once at the root +- Never use `MyTheme.Colors.*` directly in a composable body — it always returns light-mode values +- `MyTheme.Colors` and `MyTheme.DarkColors` are the source-of-truth data class instances; `LocalDashColors.current` selects the right one automatically + +### Compose: Preview Dark Mode + +Always include both a light and dark preview for new components: + +```kotlin +@Composable +@Preview(name = "Light") +fun MyComponentPreviewLight() { + DashWalletTheme { MyComponent(...) } +} + +@Composable +@Preview(name = "Dark", uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES) +fun MyComponentPreviewDark() { + DashWalletTheme { MyComponent(...) } +} +``` + +### XML Layouts: Semantic Color Tokens + +Use semantic color names that have night-mode overrides in `values-night/colors.xml`. Never use raw `@android:color/white` or literal hex values for surfaces or text. + +| Purpose | Use this color token | +|---------|---------------------| +| Page background | `@color/background_primary` | +| Card / sheet surface | `@color/background_secondary` | +| Primary text | `@color/content_primary` | +| Secondary text | `@color/content_secondary` | +| Dividers / borders | `@color/divider_color` | + +### XML Drawables: Adaptive Colors + +- **Shape drawables** (cards, panels): fill with `@color/background_secondary`, not `@android:color/white` +- **Vector icons**: add `android:tint="@color/content_primary"` to the `` element instead of hardcoding a fill color +- **Color state lists** (selectors): default state should use `@color/content_primary`, not a hardcoded dark hex + +### DashButton Disabled State + +`DashButton` handles disabled appearance automatically through `colors.disabledButtonBg` and `colors.contentDisabled` from `LocalDashColors`. Do not override button colors manually for the disabled case. + ## Common Pitfalls ### Kotlin Overload Resolution with Trailing Lambdas diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/ButtonStyle.kt b/common/src/main/java/org/dash/wallet/common/ui/components/ButtonStyle.kt index bfe4182de4..8fab188d19 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/ButtonStyle.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/ButtonStyle.kt @@ -23,6 +23,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource import org.dash.wallet.common.R +@Deprecated(message = "use DashButton instead") object ButtonStyles { @Composable fun whiteWithBlueText() = ButtonDefaults.buttonColors( diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/DashButton.kt b/common/src/main/java/org/dash/wallet/common/ui/components/DashButton.kt index 850e988c63..241b576d6d 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/DashButton.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/DashButton.kt @@ -24,18 +24,14 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.res.colorResource -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import org.dash.wallet.common.R import org.dash.wallet.common.ui.components.MyTheme.OverlineSemibold -import org.dash.wallet.common.ui.components.MyTheme.SubtitleSemibold @Composable fun DashButton( @@ -50,43 +46,44 @@ fun DashButton( isLoading: Boolean = false, onClick: () -> Unit ) { + val colors = LocalDashColors.current + val backgroundColor = when { - !isEnabled -> Color(0xFF191C1F).copy(alpha = 0.05f) - style == Style.Filled -> MyTheme.Colors.dashBlue - style == Style.FilledBlue -> MyTheme.Colors.dashBlue - style == Style.FilledOrange -> MyTheme.Colors.orange - style == Style.FilledRed -> MyTheme.Colors.red - style == Style.TintedBlue -> MyTheme.Colors.dashBlue5 - style == Style.TintedGray -> Color(0x1AB0B6BC) - style == Style.TintedRed -> MyTheme.Colors.red5 - style == Style.FilledWhiteBlue -> MyTheme.Colors.backgroundPrimary + !isEnabled -> colors.disabledButtonBg + style == Style.Filled -> colors.dashBlue + style == Style.FilledBlue -> colors.dashBlue + style == Style.FilledOrange -> colors.orange + style == Style.FilledRed -> colors.red + style == Style.TintedBlue -> colors.dashBlue5 + style == Style.TintedGray -> colors.gray.copy(alpha = 0.10f) + style == Style.TintedRed -> colors.red5 + style == Style.FilledWhiteBlue -> colors.backgroundPrimary style == Style.TintedWhite -> Color(0x1AFFFFFF) - style == Style.PlainRed -> MyTheme.Colors.red5 + style == Style.PlainRed -> colors.red5 else -> Color.Transparent } val contentColor = when { - !isEnabled -> MyTheme.Colors.textPrimary.copy(alpha = 0.40f) + !isEnabled -> colors.contentDisabled style == Style.Filled -> Color.White style == Style.FilledBlue -> Color.White style == Style.FilledOrange -> Color.White style == Style.FilledRed -> Color.White - style == Style.TintedBlue -> MyTheme.Colors.dashBlue - style == Style.PlainBlue -> MyTheme.Colors.dashBlue - style == Style.PlainBlack -> MyTheme.Colors.textPrimary - style == Style.PlainRed -> MyTheme.Colors.red - style == Style.TintedRed -> MyTheme.Colors.red - style == Style.TintedGray -> MyTheme.Colors.textPrimary - style == Style.StrokeGray -> MyTheme.Colors.textPrimary - style == Style.FilledWhiteBlue -> MyTheme.Colors.dashBlue + style == Style.TintedBlue -> colors.dashBlue + style == Style.PlainBlue -> colors.dashBlue + style == Style.PlainBlack -> colors.textPrimary + style == Style.PlainRed -> colors.red + style == Style.TintedRed -> colors.red + style == Style.TintedGray -> colors.textPrimary + style == Style.StrokeGray -> colors.textPrimary + style == Style.FilledWhiteBlue -> colors.dashBlue style == Style.TintedWhite -> Color.White - - else -> MyTheme.Colors.textPrimary + else -> colors.textPrimary } val borderColor = when { !isEnabled -> Color.Transparent - style == Style.Outlined -> MyTheme.Colors.textTertiary.copy(alpha = 0.25f) + style == Style.Outlined -> colors.textTertiary.copy(alpha = 0.25f) style == Style.StrokeGray -> Color(0x4DB3BDC7) else -> Color.Transparent } @@ -189,17 +186,15 @@ enum class Size( ExtraSmall(12.sp, 16.sp,13.dp, 6.dp, 8.dp, 4.dp, 6.dp, 28.dp) } -val DashBlue = Color(0xFF008DE4) -val PrimaryText = Color(0xFF000000) -val TertiaryText = Color(0xFF888888) - @Composable @Preview fun DashButtonPreview() { + DashWalletTheme { + val colors = LocalDashColors.current Column( modifier = Modifier .fillMaxWidth() - .background(colorResource(R.color.white)) + .background(colors.backgroundPrimary) .padding(20.dp, 10.dp, 20.dp, 10.dp), verticalArrangement = Arrangement.spacedBy(10.dp), ) { @@ -351,4 +346,5 @@ fun DashButtonPreview() { onClick = { } ) } + } } \ No newline at end of file diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/DashCheckBox.kt b/common/src/main/java/org/dash/wallet/common/ui/components/DashCheckBox.kt index 768f53324b..72d0c46369 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/DashCheckBox.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/DashCheckBox.kt @@ -32,15 +32,16 @@ fun DashCheckbox( trailingHelpText: String? = null, ) { val interactionSource = remember { MutableInteractionSource() } - val textPrimary = MyTheme.Colors.textPrimary - val textSecondary = MyTheme.Colors.textSecondary + val colors = LocalDashColors.current + val textPrimary = colors.textPrimary + val textSecondary = colors.textSecondary Row( modifier = modifier .fillMaxWidth() .defaultMinSize(minHeight = 50.dp) //.clip(RoundedCornerShape(8.dp)) - .background(Color.White) + .background(colors.backgroundSecondary) .padding(horizontal = 10.dp, vertical = 8.dp) .clickable( interactionSource = interactionSource, @@ -89,7 +90,7 @@ fun DashCheckbox( subtitle?.let { Text( text = it, - color = MyTheme.Colors.darkGray, + color = colors.darkGray, style = MyTheme.OverlineCaptionMedium, textAlign = TextAlign.Start ) @@ -120,7 +121,7 @@ fun DashCheckbox( trailingHelpText?.let { Text( text = it, - color = MyTheme.Colors.darkGray, + color = colors.darkGray, style = MyTheme.OverlineCaptionMedium, textAlign = TextAlign.End ) @@ -135,11 +136,11 @@ fun DashCheckbox( .clip(RoundedCornerShape(6.dp)) .border( width = 1.5.dp, - color = if (checked) MyTheme.Colors.dashBlue else MyTheme.Colors.darkerGray50, + color = if (checked) colors.dashBlue else colors.darkerGray50, shape = RoundedCornerShape(6.dp) ) .background( - if (checked) MyTheme.Colors.dashBlue else Color.Transparent + if (checked) colors.dashBlue else Color.Transparent ), contentAlignment = Alignment.Center ) { diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/DashModelDialog.kt b/common/src/main/java/org/dash/wallet/common/ui/components/DashModelDialog.kt index 6020d90f8f..06fc0cfcee 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/DashModelDialog.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/DashModelDialog.kt @@ -61,166 +61,169 @@ fun ModalDialog( horizontalPadding: androidx.compose.ui.unit.Dp = 15.dp ) { if (showDialog) { - Dialog( - onDismissRequest = onDismissRequest, - properties = DialogProperties( - dismissOnBackPress = true, - dismissOnClickOutside = true - ), - ) { - Card( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = horizontalPadding), - shape = RoundedCornerShape(16.dp), - colors = CardDefaults.cardColors( - containerColor = Color.White - ) + DashWalletTheme { + Dialog( + onDismissRequest = onDismissRequest, + properties = DialogProperties( + dismissOnBackPress = true, + dismissOnClickOutside = true + ), ) { - Column( + Card( modifier = Modifier .fillMaxWidth() - .padding(start = 20.dp, end = 20.dp, top = 32.dp, bottom = 20.dp), - horizontalAlignment = Alignment.CenterHorizontally + .padding(horizontal = horizontalPadding), + shape = RoundedCornerShape(16.dp), + colors = CardDefaults.cardColors( + containerColor = Color.White + ) ) { - // Info icon if provided - icon?.let { - Box( - modifier = Modifier - .size(46.dp), + val colors = LocalDashColors.current + Column( + modifier = Modifier + .fillMaxWidth() + .padding(start = 20.dp, end = 20.dp, top = 32.dp, bottom = 20.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + // Info icon if provided + icon?.let { + Box( + modifier = Modifier + .size(46.dp), //.background(iconBackgroundColor, CircleShape), - contentAlignment = Alignment.Center - ) { - Icon( - imageVector = icon, - contentDescription = null, - tint = Color.Unspecified, - modifier = Modifier.size(46.dp) - ) + contentAlignment = Alignment.Center + ) { + Icon( + imageVector = icon, + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier.size(46.dp) + ) + } + Spacer(modifier = Modifier.height(20.dp)) } - Spacer(modifier = Modifier.height(20.dp)) - } - // Content wrapper - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(6.dp) - ) { - // Heading and text blocks + // Content wrapper Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(2.dp) + verticalArrangement = Arrangement.spacedBy(6.dp) ) { - Text( - text = heading, - style = MyTheme.SubtitleSemibold, - textAlign = textAlign, - color = Color(0xFF191C1F) - ) - - // First part of text blocks (before limitation items) - val textBlocksPart1 = if (limitationItems.isEmpty()) textBlocks else textBlocks.take(2) - textBlocksPart1.forEach { textBlock -> + // Heading and text blocks + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(2.dp) + ) { Text( - text = textBlock, - style = MyTheme.Body2Regular, + text = heading, + style = MyTheme.SubtitleSemibold, textAlign = textAlign, - color = Color(0xFF525C66) + color = colors.textPrimary ) + + // First part of text blocks (before limitation items) + val textBlocksPart1 = if (limitationItems.isEmpty()) textBlocks else textBlocks.take(2) + textBlocksPart1.forEach { textBlock -> + Text( + text = textBlock, + style = MyTheme.Body2Regular, + textAlign = textAlign, + color = colors.extraDarkGray //Color(0xFF525C66) + ) + } + Spacer(modifier = Modifier.height(20.dp)) } - Spacer(modifier = Modifier.height(20.dp)) - } - // Limitation items if provided - if (limitationItems.isNotEmpty()) { - Row( - modifier = Modifier - .fillMaxWidth(), + // Limitation items if provided + if (limitationItems.isNotEmpty()) { + Row( + modifier = Modifier + .fillMaxWidth(), //.padding(vertical = 10.dp), - horizontalArrangement = Arrangement.SpaceBetween - ) { - limitationItems.forEach { item -> - Column( - modifier = Modifier.weight(1f), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(2.dp) + horizontalArrangement = Arrangement.SpaceBetween + ) { + limitationItems.forEach { item -> + Column( + modifier = Modifier.weight(1f), + horizontalAlignment = Alignment.CenterHorizontally ) { - Text( - text = item.value, - style = MyTheme.OverlineCaptionMedium, - color = Color(0xFF191C1F) - ) - if (item.showDashIcon) { - Icon( - imageVector = ImageVector.vectorResource(id = R.drawable.ic_dash_d_black), - contentDescription = null, - tint = Color(0xFF191C1F), - modifier = Modifier.size(12.dp) + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(2.dp) + ) { + Text( + text = item.value, + style = MyTheme.OverlineCaptionMedium, + color = colors.textPrimary //Color(0xFF191C1F) ) + if (item.showDashIcon) { + Icon( + imageVector = ImageVector.vectorResource(id = R.drawable.ic_dash_d_black), + contentDescription = null, + tint = colors.textPrimary, //Color(0xFF191C1F), + modifier = Modifier.size(12.dp) + ) + } } + Text( + text = item.label, + fontSize = 12.sp, + fontWeight = FontWeight.Normal, + lineHeight = 16.sp, + color = colors.extraDarkGray //Color(0xFF525C66) + ) } + } + } + + // Remaining text blocks after limitation items + if (textBlocks.size > 2) { + textBlocks.drop(2).forEach { textBlock -> Text( - text = item.label, - fontSize = 12.sp, - fontWeight = FontWeight.Normal, - lineHeight = 16.sp, - color = Color(0xFF525C66) + text = textBlock, + style = MyTheme.Body2Regular, + textAlign = textAlign, + color = colors.extraDarkGray //Color(0xFF525C66) ) } } } - // Remaining text blocks after limitation items - if (textBlocks.size > 2) { - textBlocks.drop(2).forEach { textBlock -> - Text( - text = textBlock, - style = MyTheme.Body2Regular, - textAlign = textAlign, - color = Color(0xFF525C66) - ) - } - } + // Custom content (if provided) + content?.invoke() } - // Custom content (if provided) - content?.invoke() - } - - // Learn More Button - moreInfoButton?.let { - DashButton( - text = moreInfoButton.label, - style = Style.PlainBlue, - size = Size.Small, - onClick = moreInfoButton.onClick, - ) - } - - Spacer(modifier = Modifier.height(32.dp)) - - // Bottom buttons group - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(10.dp) - ) { - buttons.forEach { buttonData -> + // Learn More Button + moreInfoButton?.let { DashButton( - text = buttonData.label, - onClick = buttonData.onClick, - modifier = Modifier.fillMaxWidth(), - size = Size.Medium, - style = buttonData.style, - isEnabled = buttonData.enabled, - isLoading = buttonData.progress + text = moreInfoButton.label, + style = Style.PlainBlue, + size = Size.Small, + onClick = moreInfoButton.onClick, ) } + + Spacer(modifier = Modifier.height(32.dp)) + + // Bottom buttons group + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(10.dp) + ) { + buttons.forEach { buttonData -> + DashButton( + text = buttonData.label, + onClick = buttonData.onClick, + modifier = Modifier.fillMaxWidth(), + size = Size.Medium, + style = buttonData.style, + isEnabled = buttonData.enabled, + isLoading = buttonData.progress + ) + } + } } } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/DashRadioButton.kt b/common/src/main/java/org/dash/wallet/common/ui/components/DashRadioButton.kt index e335417dd1..0d086d8017 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/DashRadioButton.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/DashRadioButton.kt @@ -44,10 +44,11 @@ fun DashRadioButton( enabled: Boolean = true, onlyOption: Boolean = false ) { - val primaryTextColor = MyTheme.Colors.textPrimary - val secondaryTextColor = MyTheme.Colors.textSecondary - val radioButtonColor = MyTheme.Colors.dashBlue - val borderColor = if (selected) radioButtonColor else Color(0xFFCED2D5) // #CED2D5 from Figma + val colors = LocalDashColors.current + val primaryTextColor = colors.textPrimary + val secondaryTextColor = colors.textSecondary + val radioButtonColor = colors.dashBlue + val borderColor = if (selected) radioButtonColor else colors.lightGray //Color(0xFFCED2D5) // #CED2D5 from Figma val contentAlpha = if (enabled) 1f else 0.6f diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/FeatureList.kt b/common/src/main/java/org/dash/wallet/common/ui/components/FeatureList.kt index 865df84e51..8b7c9eaf5d 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/FeatureList.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/FeatureList.kt @@ -51,11 +51,12 @@ fun FeatureItemNumber( number: String, modifier: Modifier = Modifier ) { + val colors = LocalDashColors.current Box( modifier = modifier .size(24.dp) .background( - color = MyTheme.Colors.dashBlue, + color = colors.dashBlue, shape = RoundedCornerShape(8.dp) ), contentAlignment = Alignment.Center @@ -63,7 +64,7 @@ fun FeatureItemNumber( Text( text = number, fontSize = 14.sp, - color = Color.White, + color = colors.textPrimary, textAlign = TextAlign.Center ) } @@ -77,6 +78,7 @@ fun FeatureSingleItem( icon: ImageVector? = null, number: String? = null ) { + val colors = LocalDashColors.current Row( modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(12.dp), @@ -97,7 +99,7 @@ fun FeatureSingleItem( imageVector = icon, contentDescription = null, modifier = Modifier.size(20.dp), - tint = MyTheme.Colors.gray300 + tint = colors.gray300 ) } else -> { @@ -106,7 +108,7 @@ fun FeatureSingleItem( .size(20.dp) .border( width = 2.5.dp, - color = MyTheme.Colors.gray300, + color = colors.gray300, shape = RoundedCornerShape(5.dp) ) ) @@ -123,13 +125,13 @@ fun FeatureSingleItem( Text( text = heading, style = MyTheme.Typography.TitleSmallMedium, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) if (text != null) { Text( text = text, style = MyTheme.Typography.BodyMedium, - color = MyTheme.Colors.textSecondary + color = colors.textSecondary ) } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/FeatureTopText.kt b/common/src/main/java/org/dash/wallet/common/ui/components/FeatureTopText.kt index d5842c220d..f325668599 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/FeatureTopText.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/FeatureTopText.kt @@ -51,6 +51,7 @@ fun FeatureTopText( buttonTrailingIcon: ImageVector? = null, onButtonClick: (() -> Unit)? = null ) { + val colors = LocalDashColors.current Column( modifier = modifier .fillMaxWidth() @@ -61,7 +62,7 @@ fun FeatureTopText( Text( text = heading, style = textStyle, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) @@ -70,7 +71,7 @@ fun FeatureTopText( Text( text = text, style = MyTheme.Typography.BodyMedium, - color = MyTheme.Colors.textSecondary, + color = colors.textSecondary, textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) @@ -91,7 +92,7 @@ fun FeatureTopText( imageVector = buttonLeadingIcon, contentDescription = null, modifier = Modifier.size(13.dp), - tint = MyTheme.Colors.dashBlue + tint = colors.dashBlue ) } @@ -99,7 +100,7 @@ fun FeatureTopText( text = buttonLabel, fontSize = 13.sp, lineHeight = 18.sp, - color = MyTheme.Colors.dashBlue, + color = colors.dashBlue, textAlign = TextAlign.Center ) @@ -108,7 +109,7 @@ fun FeatureTopText( imageVector = buttonTrailingIcon, contentDescription = null, modifier = Modifier.size(13.dp), - tint = MyTheme.Colors.dashBlue + tint = colors.dashBlue ) } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/InfoPanel.kt b/common/src/main/java/org/dash/wallet/common/ui/components/InfoPanel.kt index 303a38a6cc..5efb067500 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/InfoPanel.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/InfoPanel.kt @@ -49,10 +49,11 @@ fun InfoPanel( @DrawableRes actionIconRes: Int? = null, onAction: (() -> Unit)? = null ) { + val colors = LocalDashColors.current Box( modifier = modifier .fillMaxWidth() - .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(16.dp)) + .background(colors.backgroundSecondary, RoundedCornerShape(16.dp)) .shadow(elevation = 20.dp, spotColor = Color(0x1AB8C1CC), ambientColor = Color(0x1AB8C1CC)), ) { Row( @@ -88,7 +89,7 @@ fun InfoPanel( Text( text = description, style = MyTheme.Caption, - color = MyTheme.Colors.textSecondary + color = colors.textSecondary ) } @@ -102,7 +103,7 @@ fun InfoPanel( Icon( painter = painterResource(id = actionIconRes), contentDescription = "Close", - tint = MyTheme.Colors.gray + tint = colors.gray ) } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/Label.kt b/common/src/main/java/org/dash/wallet/common/ui/components/Label.kt index b11246d79b..d227db66e2 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/Label.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/Label.kt @@ -33,6 +33,7 @@ fun Label( text: String = "Label", modifier: Modifier = Modifier ) { + val colors = LocalDashColors.current Box( modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center @@ -42,7 +43,7 @@ fun Label( style = MyTheme.Subtitle2Semibold.copy( textAlign = TextAlign.Center ), - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, maxLines = 1, overflow = TextOverflow.Ellipsis ) diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/ListItem.kt b/common/src/main/java/org/dash/wallet/common/ui/components/ListItem.kt index fb18f28d7f..9d8098eb9b 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/ListItem.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/ListItem.kt @@ -137,7 +137,7 @@ fun ListItem( !trailingTextLines.isNullOrEmpty() || trailingHelpText != null || trailingActionText != null || trailingLabel != null || trailingLeadingIcon != null || trailingTrailingIcon != null - + val colors = LocalDashColors.current Column( modifier = modifier .fillMaxWidth() @@ -147,7 +147,7 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary, + color = colors.textTertiary, modifier = Modifier.padding(start = 10.dp, end = 10.dp, top = 4.dp) ) } @@ -172,7 +172,7 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) } title?.let { titleText -> @@ -183,13 +183,13 @@ fun ListItem( Text( text = titleText, style = MyTheme.Typography.LabelLarge, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) if (showInfoIcon) { Icon( painter = painterResource(android.R.drawable.ic_dialog_info), contentDescription = null, - tint = MyTheme.Colors.textTertiary, + tint = colors.textTertiary, modifier = Modifier.size(14.dp) ) } @@ -199,14 +199,14 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) } bottomHelpText?.let { Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) } } @@ -219,13 +219,13 @@ fun ListItem( Text( text = label, style = MyTheme.Typography.LabelLarge, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) if (showInfoIcon) { Icon( painter = painterResource(android.R.drawable.ic_dialog_info), contentDescription = null, - tint = MyTheme.Colors.textTertiary, + tint = colors.textTertiary, modifier = Modifier.size(14.dp) ) } @@ -256,7 +256,7 @@ fun ListItem( Text( text = line, style = MyTheme.Body2Regular, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) } } @@ -265,7 +265,7 @@ fun ListItem( Text( text = it, style = MyTheme.Body2Regular, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) } } @@ -283,14 +283,14 @@ fun ListItem( Icon( painter = painterResource(iconRes), contentDescription = null, - tint = MyTheme.Colors.textTertiary, + tint = colors.textTertiary, modifier = Modifier.size(12.dp) ) } Text( text = helpText, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) } } @@ -300,7 +300,7 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.LabelLarge, - color = MyTheme.Colors.dashBlue, + color = colors.dashBlue, modifier = if (onTrailingActionClick != null) { Modifier.clickable { onTrailingActionClick() } } else { @@ -314,11 +314,11 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier .border( width = 1.dp, - color = MyTheme.Colors.textTertiary.copy(alpha = 0.4f), + color = colors.textTertiary.copy(alpha = 0.4f), shape = RoundedCornerShape(6.dp) ) .padding(horizontal = 6.dp, vertical = 4.dp) @@ -333,7 +333,7 @@ fun ListItem( Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary, + color = colors.textTertiary, modifier = Modifier.padding(start = 10.dp, end = 10.dp, bottom = 4.dp) ) } @@ -355,6 +355,7 @@ fun ListEmptyState( body: String? = null, actions: (@Composable RowScope.() -> Unit)? = null ) { + val colors = LocalDashColors.current Column( modifier = modifier .fillMaxWidth() @@ -363,12 +364,12 @@ fun ListEmptyState( verticalArrangement = Arrangement.spacedBy(8.dp) ) { icon() - Text(heading, style = MyTheme.Typography.LabelLarge, color = MyTheme.Colors.textPrimary) + Text(heading, style = MyTheme.Typography.LabelLarge, color = colors.textPrimary) body?.let { Text( text = it, style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textTertiary + color = colors.textTertiary ) } actions?.let { @@ -384,10 +385,10 @@ fun ListEmptyState( private fun ListItemPreview() { var checked1 by remember { mutableStateOf(false) } var checked2 by remember { mutableStateOf(true) } - + val colors = LocalDashColors.current Column( modifier = Modifier - .background(MyTheme.Colors.backgroundSecondary) + .background(colors.backgroundSecondary) .padding(vertical = 8.dp), verticalArrangement = Arrangement.spacedBy(0.dp) ) { @@ -487,7 +488,7 @@ private fun ListItemPreview() { Icon( painter = painterResource(R.drawable.ic_dash_blue_filled), contentDescription = null, - tint = MyTheme.Colors.dashBlue, + tint = colors.dashBlue, modifier = Modifier.size(32.dp) ) } @@ -517,8 +518,8 @@ private fun ListItemPreview() { ) { CheckboxIcon(checked = true, onToggle = {}) Column { - Text("text", style = MyTheme.Body2Regular, color = MyTheme.Colors.textPrimary) - Text("help text", style = MyTheme.Typography.BodySmall, color = MyTheme.Colors.textTertiary) + Text("text", style = MyTheme.Body2Regular, color = colors.textPrimary) + Text("help text", style = MyTheme.Typography.BodySmall, color = colors.textTertiary) } } } @@ -529,13 +530,14 @@ private fun ListItemPreview() { @Preview(showBackground = true) @Composable private fun ListEmptyStatePreview() { + val colors = LocalDashColors.current ListEmptyState( - modifier = Modifier.background(MyTheme.Colors.backgroundSecondary), + modifier = Modifier.background(colors.backgroundSecondary), icon = { Icon( painter = painterResource(R.drawable.ic_dash_blue_filled), contentDescription = null, - tint = MyTheme.Colors.dashBlue, + tint = colors.dashBlue, modifier = Modifier.size(48.dp) ) }, @@ -545,18 +547,18 @@ private fun ListEmptyStatePreview() { Text( text = "Label", style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.dashBlue, + color = colors.dashBlue, modifier = Modifier - .border(1.dp, MyTheme.Colors.dashBlue, RoundedCornerShape(6.dp)) + .border(1.dp, colors.dashBlue, RoundedCornerShape(6.dp)) .padding(horizontal = 6.dp, vertical = 4.dp) ) Spacer(Modifier.width(4.dp)) Text( text = "Label", style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.dashBlue, + color = colors.dashBlue, modifier = Modifier - .border(1.dp, MyTheme.Colors.dashBlue, RoundedCornerShape(6.dp)) + .border(1.dp, colors.dashBlue, RoundedCornerShape(6.dp)) .padding(horizontal = 6.dp, vertical = 4.dp) ) } @@ -572,16 +574,17 @@ private fun ListEmptyStatePreview() { */ @Composable private fun CheckboxIcon(checked: Boolean, onToggle: (Boolean) -> Unit) { + val colors = LocalDashColors.current Box( modifier = Modifier .size(22.dp) .clip(RoundedCornerShape(6.dp)) .border( width = 1.5.dp, - color = if (checked) MyTheme.Colors.dashBlue else MyTheme.Colors.darkerGray50, + color = if (checked) colors.dashBlue else colors.darkerGray50, shape = RoundedCornerShape(6.dp) ) - .background(if (checked) MyTheme.Colors.dashBlue else Color.Transparent) + .background(if (checked) colors.dashBlue else Color.Transparent) .clickable { onToggle(!checked) }, contentAlignment = Alignment.Center ) { diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/Menu.kt b/common/src/main/java/org/dash/wallet/common/ui/components/Menu.kt index c8ae9d4e1c..89b1644a4f 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/Menu.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/Menu.kt @@ -19,15 +19,16 @@ import org.dash.wallet.common.R fun Menu( menuItems: @Composable () -> Unit ) { + val colors = LocalDashColors.current Box( modifier = Modifier.fillMaxWidth() .padding(horizontal = 20.dp) - .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(12.dp)), + .background(colors.backgroundSecondary, RoundedCornerShape(12.dp)), ) { Column( modifier = Modifier.fillMaxWidth() .padding(6.dp) - .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(12.dp)), + .background(colors.backgroundSecondary, RoundedCornerShape(12.dp)), verticalArrangement = Arrangement.spacedBy(8.dp) ) { menuItems.invoke() @@ -38,27 +39,32 @@ fun Menu( @Composable @Preview fun MenuPreview() { - Column(Modifier.fillMaxWidth() - .background(MyTheme.Colors.backgroundPrimary)) { - Spacer(Modifier.fillMaxWidth().height(20.dp)) - Menu { - // With balance display - MenuItem( - title = "Wallet Balance", - subtitle = "Available balance", - icon = R.drawable.ic_dash_blue_filled, - dashAmount = "0.00", - fiatAmount = "0.00 US$" - ) + DashWalletTheme { + val colors = LocalDashColors.current + Column( + Modifier.fillMaxWidth() + .background(colors.backgroundPrimary) + ) { + Spacer(Modifier.fillMaxWidth().height(20.dp)) + Menu { + // With balance display + MenuItem( + title = "Wallet Balance", + subtitle = "Available balance", + icon = R.drawable.ic_dash_blue_filled, + dashAmount = "0.00", + fiatAmount = "0.00 US$" + ) - // With trailing button - MenuItem( - title = "More Action Item", - icon = R.drawable.ic_dash_blue_filled, - onTrailingButtonClick = { }, - showChevron = true - ) + // With trailing button + MenuItem( + title = "More Action Item", + icon = R.drawable.ic_dash_blue_filled, + onTrailingButtonClick = { }, + showChevron = true + ) + } + Spacer(Modifier.fillMaxWidth().height(20.dp)) } - Spacer(Modifier.fillMaxWidth().height(20.dp)) } } \ No newline at end of file diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/MenuItem.kt b/common/src/main/java/org/dash/wallet/common/ui/components/MenuItem.kt index 4681101294..2d1288c35a 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/MenuItem.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/MenuItem.kt @@ -69,6 +69,7 @@ fun MenuItem( ) { var internalChecked by remember(checked) { mutableStateOf(checked ?: isToggled?.invoke() ?: false) } val effectiveChecked = checked ?: internalChecked + val colors = LocalDashColors.current Row( modifier = Modifier .fillMaxWidth() @@ -95,7 +96,7 @@ fun MenuItem( Box( modifier = Modifier .size(19.dp) - .background(MyTheme.Colors.backgroundSecondary, RoundedCornerShape(32.dp)) + .background(colors.backgroundSecondary, RoundedCornerShape(32.dp)) .align(Alignment.BottomEnd) .offset(x = 8.dp, y = 8.dp), contentAlignment = Alignment.Center @@ -107,7 +108,7 @@ fun MenuItem( .background(Color.Transparent, RoundedCornerShape(7.dp)) .border( width = 2.dp, - color = MyTheme.Colors.gray300, + color = colors.gray300, shape = RoundedCornerShape(7.dp) ) ) @@ -125,7 +126,7 @@ fun MenuItem( Text( text = it, style = MyTheme.OverlineMedium, - color = MyTheme.Colors.textTertiary, + color = colors.textTertiary, modifier = Modifier.fillMaxWidth() ) } @@ -138,14 +139,14 @@ fun MenuItem( Text( text = title, style = MyTheme.Body2Medium,//.copy(fontWeight = W600), - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) if (showInfo) { Icon( painter = painterResource(id = android.R.drawable.ic_dialog_info), contentDescription = "Info", - tint = MyTheme.Colors.textTertiary, + tint = colors.textTertiary, modifier = Modifier .size(15.dp) .then( @@ -161,7 +162,7 @@ fun MenuItem( Text( text = it, style = MyTheme.OverlineCaptionRegular, - color = MyTheme.Colors.textTertiary, + color = colors.textTertiary, modifier = Modifier.fillMaxWidth() ) } @@ -171,7 +172,7 @@ fun MenuItem( Text( text = it, style = MyTheme.OverlineCaptionRegular, - color = MyTheme.Colors.textTertiary, + color = colors.textTertiary, modifier = Modifier.fillMaxWidth() ) } @@ -184,7 +185,9 @@ fun MenuItem( onCheckedChange = { newState -> if (checked == null) internalChecked = newState (onCheckedChange ?: onToggleChanged)?.invoke(newState) - } + }, + modifier = Modifier + .minimumInteractiveComponentSize() // ensures at least 48 dp touch target ) } @@ -202,7 +205,7 @@ fun MenuItem( Text( text = dashAmount, style = MyTheme.CaptionMedium, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) // Dash logo dashIcon?.let { dashIcon -> @@ -220,7 +223,7 @@ fun MenuItem( Text( text = it, style = MyTheme.OverlineCaptionRegular, - color = MyTheme.Colors.textSecondary + color = colors.textSecondary ) } } @@ -252,7 +255,7 @@ fun MenuItem( Icon( painter = painterResource(id = R.drawable.ic_menu_row_arrow), contentDescription = "Chevron", - tint = MyTheme.Colors.textTertiary, + tint = colors.textTertiary, modifier = Modifier.size(16.dp) ) } @@ -262,31 +265,33 @@ fun MenuItem( @Preview(showBackground = true) @Composable fun PreviewMenuItem() { - Column( - modifier = Modifier - .padding(16.dp) - .background(MyTheme.Colors.backgroundPrimary), - verticalArrangement = Arrangement.spacedBy(16.dp) - ) { - // Basic with help text above - MenuItem( - helpTextAbove = "help text 1", - title = "title", - subtitle = "help text 2", - subtitle2 = "help text 3", - icon = R.drawable.ic_dash_blue_filled, - showInfo = true, - showDirectionIndicator = true - ) + DashWalletTheme { + val colors = LocalDashColors.current + Column( + modifier = Modifier + .padding(16.dp) + .background(colors.backgroundPrimary), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + // Basic with help text above + MenuItem( + helpTextAbove = "help text 1", + title = "title", + subtitle = "help text 2", + subtitle2 = "help text 3", + icon = R.drawable.ic_dash_blue_filled, + showInfo = true, + showDirectionIndicator = true + ) // With toggle ON - MenuItem( + MenuItem( title = "Toggle Setting ON", - subtitle = "Enable this feature", - icon = R.drawable.ic_dash_blue_filled, - isToggled = { true }, - onToggleChanged = { } - ) + subtitle = "Enable this feature", + icon = R.drawable.ic_dash_blue_filled, + isToggled = { true }, + onToggleChanged = { } + ) // With toggle OFF MenuItem( @@ -297,31 +302,31 @@ fun PreviewMenuItem() { onToggleChanged = { } ) - // With balance display - MenuItem( - title = "Wallet Balance", - subtitle = "Available balance", - icon = R.drawable.ic_dash_blue_filled, - dashAmount = "0.00", - fiatAmount = "0.00 US$" - ) + // With balance display + MenuItem( + title = "Wallet Balance", + subtitle = "Available balance", + icon = R.drawable.ic_dash_blue_filled, + dashAmount = "0.00", + fiatAmount = "0.00 US$" + ) - // With trailing button - MenuItem( - title = "Action Item w/ Chevron", - icon = R.drawable.ic_dash_blue_filled, - onTrailingButtonClick = { }, - showChevron = true - ) + // With trailing button + MenuItem( + title = "Action Item w/ Chevron", + icon = R.drawable.ic_dash_blue_filled, + onTrailingButtonClick = { }, + showChevron = true + ) - // With trailing button - MenuItem( - title = "Action Item", - subtitle = "Tap button to proceed", - icon = R.drawable.ic_dash_blue_filled, - trailingButtonText = "Label", - onTrailingButtonClick = { } - ) + // With trailing button + MenuItem( + title = "Action Item", + subtitle = "Tap button to proceed", + icon = R.drawable.ic_dash_blue_filled, + trailingButtonText = "Label", + onTrailingButtonClick = { } + ) // Complex example matching Figma MenuItem( @@ -340,13 +345,14 @@ fun PreviewMenuItem() { onTrailingButtonClick = { } ) - // Complex example matching Figma - MenuItem( - title = "CoinJoin", - subtitle = "Mixing", - icon = R.drawable.ic_dash_blue_filled, - dashAmount = "0.0011 of 1.0000", - //fiatAmount = "0.0011 of 1.0000" - ) + // Complex example matching Figma + MenuItem( + title = "CoinJoin", + subtitle = "Mixing", + icon = R.drawable.ic_dash_blue_filled, + dashAmount = "0.0011 of 1.0000", + //fiatAmount = "0.0011 of 1.0000" + ) + } } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/MyTheme.kt b/common/src/main/java/org/dash/wallet/common/ui/components/MyTheme.kt index fd0665bcdd..ffd82ad1ea 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/MyTheme.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/MyTheme.kt @@ -17,6 +17,10 @@ package org.dash.wallet.common.ui.components +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font @@ -548,29 +552,197 @@ object MyTheme { val HeadlineSBold = HeadlineSmallBold } - object Colors { - val backgroundPrimary = Color(0xFFF5F6F7) - val textPrimary = Color(0xFF191C1F) - val backgroundSecondary = Color(0xFFFFFFFF) - val textSecondary = Color(0xFF6E757C) - val textTertiary = Color(0xff75808A) - val divider = Color(0x1A191C1F) - val primary4 = Color(0x14191C1F) - val primary8 = Color(0x14191C1F) - val primary5 = Color(0x0D191C1F) - val primary40 = Color(0x66191C1F) - val dashBlue = Color(0xFF008DE4) - val dashBlue5 = Color(0x0D008DE4) - val orange = Color(0xFFFA9269) - val yellow = Color(0xFFFFC043) - val green = Color(0xFF3CB878) - val gray = Color(0xFFB0B6BC) - val gray300 = Color(0xFFB0B6BC) - val gray400 = Color(0xFF75808A) - val red = Color(0xFFEA3943) - val red5 = Color(0x0DEA3943) - val extraLightGray = Color(0xFFEBEDEE) - val darkGray = Color(0xFF75808A) - val darkerGray50 = Color(0x80B0B6BC) - } + data class ColorScheme( + // Backgrounds + val backgroundPrimary: Color, + val backgroundSecondary: Color, + val backgroundTertiary: Color, + val overlayPrimary: Color, + // Text / content + val textPrimary: Color, + val textSecondary: Color, + val textTertiary: Color, + val contentDisabled: Color, + val contentWarning: Color, + // Brand + val dashBlue: Color, + val dashBlue5: Color, + // Palette + val orange: Color, + val yellow: Color, + val green: Color, + val systemRed: Color, + val systemTeal: Color, + val purple: Color, + val red: Color, + val red5: Color, + val gray: Color, + val gray300: Color, + val gray400: Color, + val extraLightGray: Color, + val lightGray: Color, + val extraDarkGray: Color, + val ultraDarkGray: Color, + val ultraLightGray: Color, + val darkGray: Color, + val darkerGray50: Color, + // Gray scale (design system) + val gray40: Color, + val gray100: Color, + val gray200: Color, + val gray600: Color, + // Utility + val blue50: Color, + // Dividers / strokes + val divider: Color, + val inputFocusedStroke: Color, + val inputErrorStroke: Color, + // Inputs / buttons + val inputBackground: Color, + val inputErrorBackground: Color, + val disabledButtonBg: Color, + val buttonRipple: Color, + val warningYellow: Color, + // Transaction row backgrounds + val txSentBackground: Color, + val txReceivedBackground: Color, + val txOrangeBackground: Color, + // Legacy alpha tokens (kept for existing callers) + val primary4: Color, + val primary5: Color, + val primary8: Color, + val primary40: Color, + ) + + val Colors = ColorScheme( + // Backgrounds + backgroundPrimary = Color(0xFFF5F6F7), + backgroundSecondary = Color(0xFFFFFFFF), + backgroundTertiary = Color(0xFFF2F2F2), + overlayPrimary = Color(0xB3000000), + // Text / content + textPrimary = Color(0xFF191C1F), + textSecondary = Color(0xFF6E757C), + textTertiary = Color(0xFF75808A), + contentDisabled = Color(0xFF92929C), + contentWarning = Color(0xFFE85C4A), + // Brand + dashBlue = Color(0xFF008DE4), + dashBlue5 = Color(0x0D008DE4), + // Palette + orange = Color(0xFFFA9269), + yellow = Color(0xFFFFC043), + green = Color(0xFF3CB878), + systemRed = Color(0xFFE85C4A), + systemTeal = Color(0xFF78C4F5), + purple = Color(0xFF6273BD), + red = Color(0xFFEA3943), + red5 = Color(0x0DEA3943), + gray = Color(0xFFB0B6BC), + gray300 = Color(0xFFB0B6BC), + gray400 = Color(0xFF75808A), + extraLightGray = Color(0xFFEBEDEE), + lightGray = Color(0xFFCED2D5), + extraDarkGray = Color(0xFF525C66), + ultraDarkGray = Color(0xFF2D3033), + ultraLightGray = Color(0xFFF5F6F7), + darkGray = Color(0xFF75808A), + darkerGray50 = Color(0x80B0B6BC), + // Gray scale (design system) + gray40 = Color(0xFFF2F3F5), + gray100 = Color(0xFFE1E3E6), + gray200 = Color(0xFFC4C8CC), + gray600 = Color(0xFF5D5F61), + // Utility + blue50 = Color(0xFFF0F8FE), + // Dividers / strokes + divider = Color(0x1A191C1F), + inputFocusedStroke = Color(0x33008DE4), + inputErrorStroke = Color(0x33E85C4A), + // Inputs / buttons + inputBackground = Color(0xFFEBEDEE), + inputErrorBackground = Color(0x1AE85C4A), + disabledButtonBg = Color(0xFFEEEEEE), + buttonRipple = Color(0x1F000000), + warningYellow = Color(0xFFFFF9ED), + // Transaction row backgrounds + txSentBackground = Color(0xFFE7F4FB), + txReceivedBackground = Color(0xFFEDF8F2), + txOrangeBackground = Color(0xFFFDF5F1), + // Legacy alpha tokens + primary4 = Color(0x14191C1F), + primary5 = Color(0x0D191C1F), + primary8 = Color(0x14191C1F), + primary40 = Color(0x66191C1F), + ) + + val DarkColors = ColorScheme( + // Backgrounds + backgroundPrimary = Color(0xFF0A0B0D), + backgroundSecondary = Color(0xFF1E1F24), + backgroundTertiary = Color.Transparent, + overlayPrimary = Color(0xB3000000), + // Text / content + textPrimary = Color(0xFFFAFBFC), + textSecondary = Color(0xFFA4ABB2), + textTertiary = Color(0xFF8D9399), + contentDisabled = Color(0xFF92929C), + contentWarning = Color(0xFFE96453), + // Brand + dashBlue = Color(0xFF0094F0), + dashBlue5 = Color(0x0D0094F0), + // Palette + orange = Color(0xFFFA9B75), + yellow = Color(0xFFFFC043), + green = Color(0xFF3FC07D), + systemRed = Color(0xFFE96453), + systemTeal = Color(0xFF84C9F6), + purple = Color(0xFF6A7CCC), + red = Color(0xFFE96453), + red5 = Color(0x0DE96453), + gray = Color(0xFF45494D), + gray300 = Color(0xFF45494D), + gray400 = Color(0xFF757A80), + extraLightGray = Color(0xFFA4ABB2), + lightGray = Color(0xFF8D9399), + extraDarkGray = Color(0xFF45494D), + ultraDarkGray = Color(0xFF2D3033), + ultraLightGray = Color(0xFFF5F6F7), + darkGray = Color(0xFF757A80), + darkerGray50 = Color(0x8045494D), + // Gray scale (no night override — same as light) + gray40 = Color(0xFFF2F3F5), + gray100 = Color(0xFFE1E3E6), + gray200 = Color(0xFFC4C8CC), + gray600 = Color(0xFF5D5F61), + // Utility + blue50 = Color(0xFFF0F8FE), + // Dividers / strokes + divider = Color(0xFF45494D), + inputFocusedStroke = Color(0x33008DE4), + inputErrorStroke = Color(0x33E85C4A), + // Inputs / buttons + inputBackground = Color(0xFF45494D), + inputErrorBackground = Color(0x1AE85C4A), + disabledButtonBg = Color(0xFF3C3C3C), + buttonRipple = Color(0x30FFFFFF), + warningYellow = Color(0xFFFFF9ED), + // Transaction row backgrounds + txSentBackground = Color(0xFF20262E), + txReceivedBackground = Color(0xFF232826), + txOrangeBackground = Color(0xFF302D2D), + // Legacy alpha tokens + primary4 = Color(0x14FAFBFC), + primary5 = Color(0x0DFAFBFC), + primary8 = Color(0x14FAFBFC), + primary40 = Color(0x66FAFBFC), + ) +} + +val LocalDashColors = staticCompositionLocalOf { MyTheme.Colors } + +@Composable +fun DashWalletTheme(content: @Composable () -> Unit) { + val colors = if (isSystemInDarkTheme()) MyTheme.DarkColors else MyTheme.Colors + CompositionLocalProvider(LocalDashColors provides colors, content = content) } diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/Template.kt b/common/src/main/java/org/dash/wallet/common/ui/components/Template.kt index 8ff7916325..35d8d451ca 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/Template.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/Template.kt @@ -37,6 +37,7 @@ fun Template( icon: ImageVector? = null, contentDescription: String? = null ) { + val colors = LocalDashColors.current Box( modifier = modifier .size(34.dp) @@ -46,7 +47,7 @@ fun Template( ) .border( width = 1.5.dp, - color = MyTheme.Colors.gray300.copy(alpha = 0.30f), + color = colors.gray300.copy(alpha = 0.30f), shape = CircleShape ), contentAlignment = Alignment.Center @@ -56,14 +57,14 @@ fun Template( imageVector = icon, contentDescription = contentDescription, modifier = Modifier, - tint = MyTheme.Colors.textPrimary + tint = colors.textPrimary ) } else { Box( modifier = Modifier .size(5.dp) .background( - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, shape = CircleShape ) ) @@ -74,14 +75,18 @@ fun Template( @Composable @Preview private fun TemplatePreview() { - Box(Modifier - .size(44.dp) - .background(MyTheme.Colors.backgroundPrimary), - contentAlignment = Alignment.Center - ) { - Template( - Modifier, + DashWalletTheme { + val colors = LocalDashColors.current + Box( + Modifier + .size(44.dp) + .background(colors.backgroundPrimary), + contentAlignment = Alignment.Center + ) { + Template( + Modifier, MyImages.MenuChevron - ) + ) + } } } \ No newline at end of file diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/TopIntro.kt b/common/src/main/java/org/dash/wallet/common/ui/components/TopIntro.kt index 6175e3a0e6..333de32ba4 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/TopIntro.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/TopIntro.kt @@ -35,6 +35,7 @@ fun TopIntro( text: String? = null, modifier: Modifier = Modifier.padding(top = 10.dp, start = 20.dp, end = 20.dp, bottom = 20.dp) ) { + val colors = LocalDashColors.current Column( modifier = modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(2.dp), @@ -44,7 +45,7 @@ fun TopIntro( Text( text = heading, style = MyTheme.H5Bold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) @@ -53,7 +54,7 @@ fun TopIntro( Text( text = it, style = MyTheme.Body2Regular, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } @@ -63,26 +64,29 @@ fun TopIntro( @Composable @Preview fun TopIntroPreview() { - Column( - modifier = Modifier.padding(16.dp) - .background(MyTheme.Colors.backgroundPrimary), - verticalArrangement = Arrangement.spacedBy(24.dp) - ) { - // With heading and text - TopIntro( - heading = "Heading", - text = "Text" - ) - - // Heading only - TopIntro( - heading = "Heading Only" - ) - - // Longer examples - TopIntro( - heading = "Welcome to Dash", - text = "Your digital cash for everyday payments" - ) + DashWalletTheme { + val colors = LocalDashColors.current + Column( + modifier = Modifier.padding(16.dp) + .background(colors.backgroundPrimary), + verticalArrangement = Arrangement.spacedBy(24.dp) + ) { + // With heading and text + TopIntro( + heading = "Heading", + text = "Text" + ) + + // Heading only + TopIntro( + heading = "Heading Only" + ) + + // Longer examples + TopIntro( + heading = "Welcome to Dash", + text = "Your digital cash for everyday payments" + ) + } } } \ No newline at end of file diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/TopNavBase.kt b/common/src/main/java/org/dash/wallet/common/ui/components/TopNavBase.kt index bc669aa1cc..c1ef00413e 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/TopNavBase.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/TopNavBase.kt @@ -81,6 +81,7 @@ fun TopNavBase( centralPart: Boolean = true, title: String = "Label" ) { + val colors = LocalDashColors.current Box( modifier = modifier .fillMaxWidth() @@ -100,7 +101,7 @@ fun TopNavBase( Text( text = leadingText, style = MyTheme.CaptionMedium, - color = MyTheme.Colors.textPrimary + color = colors.textPrimary ) } } @@ -147,7 +148,7 @@ fun TopNavBase( Text( text = trailingText, style = MyTheme.CaptionMedium, - color = MyTheme.Colors.dashBlue + color = colors.dashBlue ) } } @@ -171,7 +172,7 @@ fun TopNavBase( Icon( imageVector = trailingIcon, contentDescription = trailingContentDescription, - tint = MyTheme.Colors.dashBlue, + tint = colors.dashBlue, modifier = Modifier .size(22.dp) .then(if (onTrailingClick != null) Modifier.clickable { onTrailingClick() } else Modifier) @@ -403,37 +404,40 @@ fun NavBarBackAction( @Preview(showBackground = true, widthDp = 393) @Composable private fun NavBarPreview() { - Column( - modifier = Modifier - .background(MyTheme.Colors.backgroundPrimary) - .padding(vertical = 8.dp), - verticalArrangement = Arrangement.spacedBy(4.dp) - ) { - NavBarBack(onBackClick = {}) - NavBarBackTitle(title = "Label", onBackClick = {}) - NavBarBackTitleInfo(title = "Label", onBackClick = {}, onInfoClick = {}) - NavBarTitleClose(title = "Label", onCloseClick = {}) - NavBarBackTitlePlus(title = "Label", onBackClick = {}, onPlusClick = {}) - NavBarBackPlus(onBackClick = {}, onPlusClick = {}) - NavBarTitle(title = "Label") - NavBarClose(onCloseClick = {}) - NavBarActionTitleAction( - title = "Label", - leadingActionText = "Cancel", - onLeadingActionClick = {}, - trailingActionText = "Apply", - onTrailingActionClick = {} - ) - NavBarBackTitleAction( - title = "Label", - onBackClick = {}, - actionText = "Quick voting", - onActionClick = {} - ) - NavBarBackAction( - onBackClick = {}, - actionText = "Quick voting", - onActionClick = {} - ) + DashWalletTheme { + val colors = LocalDashColors.current + Column( + modifier = Modifier + .background(colors.backgroundPrimary) + .padding(vertical = 8.dp), + verticalArrangement = Arrangement.spacedBy(4.dp) + ) { + NavBarBack(onBackClick = {}) + NavBarBackTitle(title = "Label", onBackClick = {}) + NavBarBackTitleInfo(title = "Label", onBackClick = {}, onInfoClick = {}) + NavBarTitleClose(title = "Label", onCloseClick = {}) + NavBarBackTitlePlus(title = "Label", onBackClick = {}, onPlusClick = {}) + NavBarBackPlus(onBackClick = {}, onPlusClick = {}) + NavBarTitle(title = "Label") + NavBarClose(onCloseClick = {}) + NavBarActionTitleAction( + title = "Label", + leadingActionText = "Cancel", + onLeadingActionClick = {}, + trailingActionText = "Apply", + onTrailingActionClick = {} + ) + NavBarBackTitleAction( + title = "Label", + onBackClick = {}, + actionText = "Quick voting", + onActionClick = {} + ) + NavBarBackAction( + onBackClick = {}, + actionText = "Quick voting", + onActionClick = {} + ) + } } } \ No newline at end of file diff --git a/common/src/main/java/org/dash/wallet/common/ui/components/TypographyPreview.kt b/common/src/main/java/org/dash/wallet/common/ui/components/TypographyPreview.kt index 38be506e7e..77b977edb5 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/components/TypographyPreview.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/components/TypographyPreview.kt @@ -33,10 +33,11 @@ import androidx.compose.ui.unit.dp @Preview(showBackground = true) @Composable fun TypographyPreview() { + val colors = LocalDashColors.current Column( modifier = Modifier .fillMaxSize() - .background(MyTheme.Colors.backgroundSecondary) + .background(colors.backgroundSecondary) .padding(20.dp) .verticalScroll(rememberScrollState()) ) { @@ -47,37 +48,37 @@ fun TypographyPreview() { Text( text = "Display large", style = MyTheme.Typography.DisplayLarge, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Display large", style = MyTheme.Typography.DisplayLargeBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Display medium", style = MyTheme.Typography.DisplayMedium, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Display medium", style = MyTheme.Typography.DisplayMediumBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Display small", style = MyTheme.Typography.DisplaySmall, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Display small", style = MyTheme.Typography.DisplaySmallBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } @@ -89,31 +90,31 @@ fun TypographyPreview() { Text( text = "Headline large", style = MyTheme.Typography.HeadlineLarge, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Headline large", style = MyTheme.Typography.HeadlineLargeBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Headline medium", style = MyTheme.Typography.HeadlineMedium, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Headline medium", style = MyTheme.Typography.HeadlineMediumBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Headline small", style = MyTheme.Typography.HeadlineSmallBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } @@ -125,37 +126,37 @@ fun TypographyPreview() { Text( text = "Title large", style = MyTheme.Typography.TitleLarge, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Title large", style = MyTheme.Typography.TitleLargeBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Title medium", style = MyTheme.Typography.TitleMedium, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Title medium", style = MyTheme.Typography.TitleMediumBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Title small", style = MyTheme.Typography.TitleSmall, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Title small", style = MyTheme.Typography.TitleSmallBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } @@ -167,37 +168,37 @@ fun TypographyPreview() { Text( text = "Label large", style = MyTheme.Typography.LabelLarge, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Label large", style = MyTheme.Typography.LabelLargeBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Label medium", style = MyTheme.Typography.LabelMedium, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Label medium", style = MyTheme.Typography.LabelMediumBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Label small", style = MyTheme.Typography.LabelSmall, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Label small", style = MyTheme.Typography.LabelSmallBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } @@ -209,37 +210,37 @@ fun TypographyPreview() { Text( text = "Body large", style = MyTheme.Typography.BodyLarge, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Body large", style = MyTheme.Typography.BodyLargeBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Body medium", style = MyTheme.Typography.BodyMedium, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Body medium", style = MyTheme.Typography.BodyMediumBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Body small", style = MyTheme.Typography.BodySmall, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) Text( text = "Body small", style = MyTheme.Typography.BodySmallBold, - color = MyTheme.Colors.textPrimary, + color = colors.textPrimary, modifier = Modifier.fillMaxWidth() ) } diff --git a/common/src/main/java/org/dash/wallet/common/ui/dialogs/OffsetDialogFragment.kt b/common/src/main/java/org/dash/wallet/common/ui/dialogs/OffsetDialogFragment.kt index 7de0beb8bf..76ca8e6a65 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/dialogs/OffsetDialogFragment.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/dialogs/OffsetDialogFragment.kt @@ -17,7 +17,6 @@ package org.dash.wallet.common.ui.dialogs -import android.graphics.Rect import android.os.Bundle import android.view.LayoutInflater import android.view.View @@ -25,6 +24,7 @@ import android.view.ViewGroup import android.widget.FrameLayout import androidx.annotation.LayoutRes import androidx.annotation.StyleRes +import androidx.appcompat.widget.AppCompatImageButton import androidx.coordinatorlayout.widget.CoordinatorLayout import androidx.core.content.res.ResourcesCompat import androidx.fragment.app.FragmentActivity @@ -108,8 +108,10 @@ open class OffsetDialogFragment(@LayoutRes private val layout: Int) : BottomShee } } - view.findViewById(R.id.collapse_button)?.apply { - setImageResource(R.drawable.ic_popup_close_circle) + view.findViewById(R.id.collapse_button)?.apply { + if (this is AppCompatImageButton) { + setImageResource(R.drawable.ic_popup_close_circle) + } setOnClickListener { dismiss() } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/enter_amount/EnterAmountFragment.kt b/common/src/main/java/org/dash/wallet/common/ui/enter_amount/EnterAmountFragment.kt index e6035cd7c5..1ff52ef319 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/enter_amount/EnterAmountFragment.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/enter_amount/EnterAmountFragment.kt @@ -43,6 +43,8 @@ import org.bitcoinj.utils.Fiat import org.dash.wallet.common.R import org.dash.wallet.common.databinding.FragmentEnterAmountBinding import org.dash.wallet.common.services.AuthenticationManager +import org.dash.wallet.common.ui.components.DashWalletTheme +import org.dash.wallet.common.ui.components.LocalDashColors import org.dash.wallet.common.ui.components.MyTheme import org.dash.wallet.common.ui.exchange_rates.ExchangeRatesDialog import org.dash.wallet.common.ui.segmented_picker.PickerDisplayMode @@ -218,22 +220,25 @@ class EnterAmountFragment : Fragment(R.layout.fragment_enter_amount) { ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) binding.currencyOptions.setContent { - SegmentedPicker( - currencyOptions, - modifier = Modifier - .height(48.dp) - .width(40.dp), - selectedIndex = pickedCurrencyOption, - style = SegmentedPickerStyle( - displayMode = PickerDisplayMode.Vertical, - cornerRadius = 8f, - backgroundColor = Color.Transparent, - thumbColor = MyTheme.Colors.primary5, - textStyle = MyTheme.Micro, - shadowElevation = 0 - ) - ) { currency, _ -> - binding.amountView.dashToFiat = currency.title == Constants.DASH_CURRENCY + DashWalletTheme { + val colors = LocalDashColors.current + SegmentedPicker( + currencyOptions, + modifier = Modifier + .height(48.dp) + .width(40.dp), + selectedIndex = pickedCurrencyOption, + style = SegmentedPickerStyle( + displayMode = PickerDisplayMode.Vertical, + cornerRadius = 8f, + backgroundColor = Color.Transparent, + thumbColor = colors.primary5, + textStyle = MyTheme.Micro, + shadowElevation = 0 + ) + ) { currency, _ -> + binding.amountView.dashToFiat = currency.title == Constants.DASH_CURRENCY + } } } diff --git a/common/src/main/java/org/dash/wallet/common/ui/segmented_picker/SegmentedPicker.kt b/common/src/main/java/org/dash/wallet/common/ui/segmented_picker/SegmentedPicker.kt index df28dd278c..dece15b3cb 100644 --- a/common/src/main/java/org/dash/wallet/common/ui/segmented_picker/SegmentedPicker.kt +++ b/common/src/main/java/org/dash/wallet/common/ui/segmented_picker/SegmentedPicker.kt @@ -44,6 +44,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import org.dash.wallet.common.R +import org.dash.wallet.common.ui.components.LocalDashColors import org.dash.wallet.common.ui.components.MyTheme data class SegmentedOption( @@ -132,7 +133,7 @@ fun SegmentedPicker( } } ) - + val colors = LocalDashColors.current // Draw dividers between options if (isHorizontal) { Row( @@ -146,7 +147,7 @@ fun SegmentedPicker( .fillMaxHeight() .width(0.6.dp) .padding(vertical = 12.dp) - .background(MyTheme.Colors.divider) + .background(colors.divider) .align(Alignment.CenterVertically) ) } @@ -246,18 +247,19 @@ private fun OptionContent( if (isHorizontal) Modifier.fillMaxHeight() else Modifier.fillMaxWidth() ) ) { + val colors = LocalDashColors.current option.icon?.let { Icon( painter = painterResource(id = it), contentDescription = null, - tint = if (isSelected) Color.Unspecified else MyTheme.Colors.textPrimary.copy(alpha = 0.4f), + tint = if (isSelected) Color.Unspecified else colors.textPrimary.copy(alpha = 0.4f), modifier = Modifier.padding(end = 6.dp) ) } Text( text = option.title, - color = if (isSelected) MyTheme.Colors.textPrimary else MyTheme.Colors.textPrimary.copy(alpha = 0.4f), + color = if (isSelected) colors.textPrimary else colors.textPrimary.copy(alpha = 0.4f), style = textStyle, textAlign = TextAlign.Center ) @@ -268,6 +270,7 @@ private fun OptionContent( @Preview(showBackground = true) @Composable fun SegmentedPickerPreview() { + val colors = LocalDashColors.current Surface(color = colorResource(id = R.color.background_primary)) { Column( modifier = Modifier @@ -338,8 +341,8 @@ fun SegmentedPickerPreview() { val customStyle = SegmentedPickerStyle( displayMode = PickerDisplayMode.Vertical, - backgroundColor = MyTheme.Colors.gray400.copy(alpha = 0.15f), - thumbColor = MyTheme.Colors.dashBlue, + backgroundColor = colors.gray400.copy(alpha = 0.15f), + thumbColor = colors.dashBlue, cornerRadius = 16f ) diff --git a/common/src/main/res/color/keyboard_button.xml b/common/src/main/res/color/keyboard_button.xml index 29b265e945..69481e02bf 100644 --- a/common/src/main/res/color/keyboard_button.xml +++ b/common/src/main/res/color/keyboard_button.xml @@ -2,5 +2,5 @@ - + \ No newline at end of file diff --git a/common/src/main/res/drawable-v21/selectable_round_corners_white.xml b/common/src/main/res/drawable-v21/selectable_round_corners_white.xml index 15536ea5c4..0305d7a327 100644 --- a/common/src/main/res/drawable-v21/selectable_round_corners_white.xml +++ b/common/src/main/res/drawable-v21/selectable_round_corners_white.xml @@ -4,7 +4,7 @@ - + diff --git a/common/src/main/res/drawable/ic_dash_d_black.xml b/common/src/main/res/drawable/ic_dash_d_black.xml index fcefaddd5d..1f6c8dbfea 100644 --- a/common/src/main/res/drawable/ic_dash_d_black.xml +++ b/common/src/main/res/drawable/ic_dash_d_black.xml @@ -2,7 +2,8 @@ android:width="24dp" android:height="24dp" android:viewportWidth="24" - android:viewportHeight="24"> + android:viewportHeight="24" + android:tint="@color/content_primary"> diff --git a/common/src/main/res/drawable/round_corners_white_bg.xml b/common/src/main/res/drawable/round_corners_white_bg.xml index c909cf40f5..ea9dce9dd3 100644 --- a/common/src/main/res/drawable/round_corners_white_bg.xml +++ b/common/src/main/res/drawable/round_corners_white_bg.xml @@ -2,5 +2,5 @@ - + \ No newline at end of file diff --git a/common/src/main/res/drawable/rounded_background.xml b/common/src/main/res/drawable/rounded_background.xml index 63ac7c796d..35c0948037 100644 --- a/common/src/main/res/drawable/rounded_background.xml +++ b/common/src/main/res/drawable/rounded_background.xml @@ -18,7 +18,7 @@ xmlns:tools="http://schemas.android.com/tools" android:shape="rectangle"> - + - + \ No newline at end of file diff --git a/common/src/main/res/drawable/selectable_round_corners_border.xml b/common/src/main/res/drawable/selectable_round_corners_border.xml index e7c8b8b964..c6ec44cc3d 100644 --- a/common/src/main/res/drawable/selectable_round_corners_border.xml +++ b/common/src/main/res/drawable/selectable_round_corners_border.xml @@ -2,6 +2,6 @@ - - + + diff --git a/common/src/main/res/drawable/selectable_round_corners_white.xml b/common/src/main/res/drawable/selectable_round_corners_white.xml index dbe5865cf9..04e9cad0f5 100644 --- a/common/src/main/res/drawable/selectable_round_corners_white.xml +++ b/common/src/main/res/drawable/selectable_round_corners_white.xml @@ -6,7 +6,7 @@ - + diff --git a/common/src/main/res/values-night/colors.xml b/common/src/main/res/values-night/colors.xml index b0ef8d7494..baadd4db3e 100644 --- a/common/src/main/res/values-night/colors.xml +++ b/common/src/main/res/values-night/colors.xml @@ -1,43 +1,46 @@ - - - - - - - - + @color/dash_blue + @color/dash_white + @color/extra_light_gray + @color/light_gray + @color/system_red + #14171A + @color/ultra_dark_gray + @color/extra_dark_gray - - + + @color/extra_dark_gray - - - - - - - - - - - + + #0A0B0D + #1E1F24 + @android:color/transparent + #01589B + #30ffffff + @color/extra_dark_gray + #20262E + #232826 + #302D2D + #3C3C3C - - - - - - - - - - - - - + + #0094F0 + #FAFBFC + #A4ABB2 + #8D9399 + #757A80 + #45494D + #191C1F + #E96453 + #3FC07D + #FA9B75 + #84C9F6 + #6A7CCC - + #1A45494D + + + #FF45494D \ No newline at end of file diff --git a/common/src/main/res/values/styles.xml b/common/src/main/res/values/styles.xml index 446313af1c..e99d562139 100644 --- a/common/src/main/res/values/styles.xml +++ b/common/src/main/res/values/styles.xml @@ -1,8 +1,7 @@ - -