From 0cf64ae2027ae190d2f79bcf8de6d08f9a5184b3 Mon Sep 17 00:00:00 2001 From: Milan Cerovsky Date: Wed, 7 Aug 2024 12:13:17 +0200 Subject: [PATCH] Exchange rate design implementation --- .../ui/design/theme/ExchangeRateColors.kt | 34 +++++++++++++++++++ .../zcash/ui/design/theme/ZashiColors.kt | 31 +++++++++++++++++ .../zcash/ui/design/theme/ZcashTheme.kt | 32 +++++++++-------- .../zcash/ui/StyledExchangeBalance.kt | 23 ++++++++++--- .../zcash/ui/UnavailableExchangeRatePopup.kt | 16 +++++---- .../zcash/ui/common/compose/BalanceWidget.kt | 6 ++++ 6 files changed, 115 insertions(+), 27 deletions(-) create mode 100644 ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExchangeRateColors.kt create mode 100644 ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZashiColors.kt diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExchangeRateColors.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExchangeRateColors.kt new file mode 100644 index 00000000..0575d052 --- /dev/null +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExchangeRateColors.kt @@ -0,0 +1,34 @@ +@file:Suppress("MagicNumber") + +package co.electriccoin.zcash.ui.design.theme + +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Color + +@Immutable +data class ExchangeRateColors( + val btnSecondaryBg: Color, + val btnSecondaryBorder: Color, + val btnSecondaryFg: Color, + val btnSpinnerDisabled: Color +) + +internal val LightExchangeRateColorPalette = + ExchangeRateColors( + btnSecondaryBg = Color(0xFFFFFFFF), + btnSecondaryBorder = Color(0xFFD9D8CF), + btnSecondaryFg = Color(0xFF4D4941), + btnSpinnerDisabled = Color(0x97989980) + ) + +internal val DarkExchangeRateColorPalette = + ExchangeRateColors( + btnSecondaryBg = Color(0xFF4B4144), + btnSecondaryBorder = Color(0xFF4B4144), + btnSecondaryFg = Color(0xFFFFFFFF), + btnSpinnerDisabled = Color(0xFF3D3A3B) + ) + +@Suppress("CompositionLocalAllowlist") +internal val LocalExchangeRateColors = staticCompositionLocalOf { error("no colors specified") } diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZashiColors.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZashiColors.kt new file mode 100644 index 00000000..5549254d --- /dev/null +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZashiColors.kt @@ -0,0 +1,31 @@ +@file:Suppress("MagicNumber") + +package co.electriccoin.zcash.ui.design.theme + +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Color + +@Immutable +data class ZashiColors( + val textLight: Color, + val textLightSupport: Color, + val surfacePrimary: Color, +) + +internal val LightZashiColorPalette = + ZashiColors( + textLight = Color(0xFFFFFFFF), + textLightSupport = Color(0xFFD9D8CF), + surfacePrimary = Color(0xFF282622), + ) + +internal val DarkZashiColorPalette = + ZashiColors( + textLight = Color(0xFFE8E8E8), + textLightSupport = Color(0xFFBDBBBC), + surfacePrimary = Color(0xFF454243), + ) + +@Suppress("CompositionLocalAllowlist") +internal val LocalZashiColors = staticCompositionLocalOf { error("no colors specified") } diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt index 8a4d8790..48b2fc25 100644 --- a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ZcashTheme.kt @@ -27,22 +27,16 @@ fun ZcashTheme( content: @Composable () -> Unit ) { val useDarkMode = forceDarkMode || isSystemInDarkTheme() + val baseColors = if (useDarkMode) DarkColorPalette else LightColorPalette + val extendedColors = if (useDarkMode) DarkExtendedColorPalette else LightExtendedColorPalette + val zashiColors = if (useDarkMode) DarkZashiColorPalette else LightZashiColorPalette + val exchangeRateColors = if (useDarkMode) DarkExchangeRateColorPalette else LightExchangeRateColorPalette - val baseColors = - if (useDarkMode) { - DarkColorPalette - } else { - LightColorPalette - } - - val extendedColors = - if (useDarkMode) { - DarkExtendedColorPalette - } else { - LightExtendedColorPalette - } - - CompositionLocalProvider(LocalExtendedColors provides extendedColors) { + CompositionLocalProvider( + LocalExtendedColors provides extendedColors, + LocalZashiColors provides zashiColors, + LocalExchangeRateColors provides exchangeRateColors, + ) { ProvideDimens { MaterialTheme( colorScheme = baseColors, @@ -72,4 +66,12 @@ object ZcashTheme { val dimens: Dimens @Composable get() = localDimens.current + + val zashiColors: ZashiColors + @Composable + get() = LocalZashiColors.current + + val exchangeRateColors: ExchangeRateColors + @Composable + get() = LocalExchangeRateColors.current } diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/StyledExchangeBalance.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/StyledExchangeBalance.kt index 8b43df59..8a7e2027 100644 --- a/ui-lib/src/main/java/co/electriccoin/zcash/ui/StyledExchangeBalance.kt +++ b/ui-lib/src/main/java/co/electriccoin/zcash/ui/StyledExchangeBalance.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape @@ -63,7 +64,7 @@ fun StyledExchangeBalance( isHideBalances: Boolean = false, hiddenBalancePlaceholder: StringResource = stringRes(co.electriccoin.zcash.ui.design.R.string.hide_balance_placeholder), - textColor: Color = ZcashTheme.colors.textPrimary, + textColor: Color = ZcashTheme.exchangeRateColors.btnSecondaryFg, style: TextStyle = ZcashTheme.typography.primary.titleSmall.copy(fontWeight = FontWeight.SemiBold) ) { if ((state.isStale && !state.isLoading) || @@ -168,7 +169,7 @@ private fun ExchangeAvailableRateButton( if (state.isRefreshEnabled) { textColor } else { - ZcashTheme.colors.textDisabled + ZcashTheme.exchangeRateColors.btnSpinnerDisabled } ) ) @@ -241,10 +242,11 @@ private fun ExchangeRateButton( ElevatedButton( modifier = modifier + .height(36.dp) .animateContentSize(), onClick = onClick, enabled = isEnabled, - shape = RoundedCornerShape(6.dp), + shape = RoundedCornerShape(8.dp), elevation = ButtonDefaults.elevatedButtonElevation( defaultElevation = 0.dp, @@ -252,12 +254,23 @@ private fun ExchangeRateButton( ), colors = ButtonDefaults.elevatedButtonColors( + containerColor = + if (isEnabled && enableBorder) { + ZcashTheme.exchangeRateColors.btnSecondaryBg + } else { + Color.Unspecified + }, disabledContainerColor = Color.Transparent, disabledContentColor = textColor, contentColor = textColor ), - border = if (isEnabled && enableBorder) BorderStroke(1.dp, Color.Gray) else null, - contentPadding = PaddingValues(horizontal = 14.dp, vertical = 2.dp), + border = + if (isEnabled && enableBorder) { + BorderStroke(1.dp, ZcashTheme.exchangeRateColors.btnSecondaryBorder) + } else { + BorderStroke(1.dp, Color.Transparent) + }, + contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp), content = content ) } diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/UnavailableExchangeRatePopup.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/UnavailableExchangeRatePopup.kt index 63a4b325..cd864c95 100644 --- a/ui-lib/src/main/java/co/electriccoin/zcash/ui/UnavailableExchangeRatePopup.kt +++ b/ui-lib/src/main/java/co/electriccoin/zcash/ui/UnavailableExchangeRatePopup.kt @@ -27,18 +27,18 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable 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.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Popup import co.electriccoin.zcash.ui.design.theme.ZcashTheme import co.electriccoin.zcash.ui.util.PreviewScreens @Composable -fun UnavailableExchangeRatePopup( +internal fun UnavailableExchangeRatePopup( offset: IntOffset, transitionState: MutableTransitionState, onDismissRequest: () -> Unit, @@ -76,12 +76,12 @@ private fun PopupContent(onDismissRequest: () -> Unit) { Modifier .width(16.dp) .height(8.dp) - .background(Color(0xFF4B4144), TriangleShape) + .background(ZcashTheme.zashiColors.surfacePrimary, TriangleShape) ) Box( Modifier .fillMaxWidth() - .background(Color(0xFF4B4144), RoundedCornerShape(8.dp)) + .background(ZcashTheme.zashiColors.surfacePrimary, RoundedCornerShape(8.dp)) .padding(start = 12.dp, bottom = 12.dp), ) { Row { @@ -90,17 +90,19 @@ private fun PopupContent(onDismissRequest: () -> Unit) { ) { Text( modifier = Modifier.padding(top = 12.dp), - color = Color.White, + color = ZcashTheme.zashiColors.textLight, + fontSize = 16.sp, style = ZcashTheme.extendedTypography.restoringTopAppBarStyle, text = stringResource(R.string.balances_exchange_rate_unavailable) ) Spacer(modifier = Modifier.height(6.dp)) Text( - color = Color(0xFFDED9DA), + color = ZcashTheme.zashiColors.textLightSupport, style = ZcashTheme.extendedTypography.restoringTopAppBarStyle.copy( fontWeight = FontWeight.Medium ), + fontSize = 14.sp, text = stringResource(id = R.string.balances_exchange_rate_unavailable_subtitle) ) } @@ -108,7 +110,7 @@ private fun PopupContent(onDismissRequest: () -> Unit) { Icon( painter = painterResource(R.drawable.ic_unavailable_exchange_rate_dialog_close), contentDescription = "", - tint = Color.White + tint = ZcashTheme.zashiColors.textLightSupport ) } } diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/BalanceWidget.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/BalanceWidget.kt index 44065d19..f3b03c73 100644 --- a/ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/BalanceWidget.kt +++ b/ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/BalanceWidget.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentSize @@ -17,6 +18,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import cash.z.ecc.android.sdk.model.Zatoshi import cash.z.ecc.sdk.extension.toZecStringFull import cash.z.ecc.sdk.type.ZcashCurrency @@ -149,12 +151,16 @@ fun BalanceWidget( parts = balanceState.totalBalance.toZecStringFull().asZecAmountTriple() ) + Spacer(modifier = Modifier.height(16.dp)) + StyledExchangeBalance( zatoshi = balanceState.totalBalance, state = balanceState.exchangeRate, isHideBalances = isHideBalances ) + Spacer(modifier = Modifier.height(12.dp)) + Row(verticalAlignment = Alignment.CenterVertically) { if (isReferenceToBalances) { Reference(