Receive screen color design updates

This commit is contained in:
Milan Cerovsky 2025-05-22 10:06:44 +02:00
parent 8d3af5814e
commit 9ae2c20e42
3 changed files with 96 additions and 33 deletions

View File

@ -13,9 +13,16 @@ data class ReceiveAddressState(
val title: StringResource, val title: StringResource,
val subtitle: StringResource, val subtitle: StringResource,
val isExpanded: Boolean, val isExpanded: Boolean,
val colorMode: ColorMode,
val onClick: () -> Unit, val onClick: () -> Unit,
val isShielded: Boolean, val isShielded: Boolean,
val onCopyClicked: () -> Unit, val onCopyClicked: () -> Unit,
val onQrClicked: () -> Unit, val onQrClicked: () -> Unit,
val onRequestClicked: () -> Unit, val onRequestClicked: () -> Unit,
) ) {
enum class ColorMode {
ZASHI,
KEYSTONE,
DEFAULT
}
}

View File

@ -45,11 +45,13 @@ import co.electriccoin.zcash.ui.design.theme.colors.ZashiColors
import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions import co.electriccoin.zcash.ui.design.theme.dimensions.ZashiDimensions
import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography import co.electriccoin.zcash.ui.design.theme.typography.ZashiTypography
import co.electriccoin.zcash.ui.design.util.getValue import co.electriccoin.zcash.ui.design.util.getValue
import co.electriccoin.zcash.ui.design.util.orDark
import co.electriccoin.zcash.ui.design.util.scaffoldScrollPadding import co.electriccoin.zcash.ui.design.util.scaffoldScrollPadding
import co.electriccoin.zcash.ui.design.util.stringRes import co.electriccoin.zcash.ui.design.util.stringRes
import co.electriccoin.zcash.ui.fixture.ZashiMainTopAppBarStateFixture import co.electriccoin.zcash.ui.fixture.ZashiMainTopAppBarStateFixture
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.DEFAULT
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.KEYSTONE
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.ZASHI
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveState import co.electriccoin.zcash.ui.screen.receive.model.ReceiveState
@Composable @Composable
@ -133,19 +135,34 @@ private fun AddressPanel(
state: ReceiveAddressState, state: ReceiveAddressState,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val containerColor =
when (state.colorMode) {
ZASHI -> ZashiColors.Utility.Purple.utilityPurple50
KEYSTONE -> ZashiColors.Utility.Indigo.utilityIndigo50
DEFAULT -> ZashiColors.Surfaces.bgSecondary
}
val buttonColor =
when (state.colorMode) {
ZASHI -> ZashiColors.Utility.Purple.utilityPurple100
KEYSTONE -> ZashiColors.Utility.Indigo.utilityIndigo100
DEFAULT -> ZashiColors.Surfaces.bgTertiary
}
val buttonTextColor =
when (state.colorMode) {
ZASHI -> ZashiColors.Utility.Purple.utilityPurple800
KEYSTONE -> ZashiColors.Utility.Indigo.utilityIndigo800
DEFAULT -> ZashiColors.Text.textPrimary
}
Column( Column(
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier =
modifier modifier
.wrapContentHeight() .wrapContentHeight()
.background( .background(containerColor, RoundedCornerShape(ZashiDimensions.Radius.radius3xl))
if (state.isShielded) { .clip(RoundedCornerShape(ZashiDimensions.Radius.radius3xl))
ZashiColors.Utility.Purple.utilityPurple50 orDark ZashiColors.Utility.Indigo.utilityIndigo50
} else {
ZashiColors.Surfaces.bgSecondary
},
RoundedCornerShape(ZashiDimensions.Radius.radius3xl)
).clip(RoundedCornerShape(ZashiDimensions.Radius.radius3xl))
.clickable(onClick = state.onClick) .clickable(onClick = state.onClick)
.padding(all = ZcashTheme.dimens.spacingLarge) .padding(all = ZcashTheme.dimens.spacingLarge)
) { ) {
@ -199,21 +216,9 @@ private fun AddressPanel(
.fillMaxWidth() .fillMaxWidth()
.padding(top = ZcashTheme.dimens.spacingDefault) .padding(top = ZcashTheme.dimens.spacingDefault)
) { ) {
val containerColor =
if (state.isShielded) {
ZashiColors.Utility.Purple.utilityPurple100 orDark ZashiColors.Utility.Indigo.utilityIndigo100
} else {
ZashiColors.Surfaces.bgTertiary
}
val contentColor =
if (state.isShielded) {
ZashiColors.Utility.Purple.utilityPurple800 orDark ZashiColors.Utility.Indigo.utilityIndigo800
} else {
ZashiColors.Text.textPrimary
}
ReceiveIconButton( ReceiveIconButton(
containerColor = containerColor, containerColor = buttonColor,
contentColor = contentColor, contentColor = buttonTextColor,
iconPainter = painterResource(id = R.drawable.ic_copy_shielded), iconPainter = painterResource(id = R.drawable.ic_copy_shielded),
onClick = state.onCopyClicked, onClick = state.onCopyClicked,
text = stringResource(id = R.string.receive_copy), text = stringResource(id = R.string.receive_copy),
@ -223,8 +228,8 @@ private fun AddressPanel(
Spacer(modifier = Modifier.width(ZcashTheme.dimens.spacingSmall)) Spacer(modifier = Modifier.width(ZcashTheme.dimens.spacingSmall))
ReceiveIconButton( ReceiveIconButton(
containerColor = containerColor, containerColor = buttonColor,
contentColor = contentColor, contentColor = buttonTextColor,
iconPainter = painterResource(id = R.drawable.ic_qr_code_shielded), iconPainter = painterResource(id = R.drawable.ic_qr_code_shielded),
onClick = state.onQrClicked, onClick = state.onQrClicked,
text = stringResource(id = R.string.receive_qr_code), text = stringResource(id = R.string.receive_qr_code),
@ -234,8 +239,8 @@ private fun AddressPanel(
Spacer(modifier = Modifier.width(ZcashTheme.dimens.spacingSmall)) Spacer(modifier = Modifier.width(ZcashTheme.dimens.spacingSmall))
ReceiveIconButton( ReceiveIconButton(
containerColor = containerColor, containerColor = buttonColor,
contentColor = contentColor, contentColor = buttonTextColor,
iconPainter = painterResource(id = R.drawable.ic_request_shielded), iconPainter = painterResource(id = R.drawable.ic_request_shielded),
onClick = state.onRequestClicked, onClick = state.onRequestClicked,
text = stringResource(id = R.string.receive_request), text = stringResource(id = R.string.receive_request),
@ -313,18 +318,61 @@ private fun ZashiPreview() =
onQrClicked = { }, onQrClicked = { },
onRequestClicked = {}, onRequestClicked = {},
isExpanded = true, isExpanded = true,
onClick = {} onClick = {},
colorMode = ZASHI
), ),
ReceiveAddressState( ReceiveAddressState(
icon = R.drawable.ic_zec_round_stroke, icon = R.drawable.ic_zec_round_full,
title = stringRes("Zashi"), title = stringRes("Zashi"),
subtitle = stringRes("subtitle"), subtitle = stringRes("subtitle"),
isShielded = false, isShielded = false,
onCopyClicked = {}, onCopyClicked = {},
onQrClicked = { }, onQrClicked = { },
onRequestClicked = { }, onRequestClicked = { },
isExpanded = false, isExpanded = true,
onClick = {} onClick = {},
colorMode = DEFAULT
)
),
isLoading = false,
onBack = {}
),
appBarState = ZashiMainTopAppBarStateFixture.new()
)
}
@PreviewScreens
@Composable
private fun KeystonePreview() =
ZcashTheme {
ReceiveView(
state =
ReceiveState(
items =
listOf(
ReceiveAddressState(
icon = co.electriccoin.zcash.ui.design.R.drawable.ic_item_keystone,
title = stringRes("Zashi"),
subtitle = stringRes("subtitle"),
isShielded = true,
onCopyClicked = {},
onQrClicked = { },
onRequestClicked = {},
isExpanded = true,
onClick = {},
colorMode = KEYSTONE
),
ReceiveAddressState(
icon = co.electriccoin.zcash.ui.design.R.drawable.ic_item_keystone,
title = stringRes("Zashi"),
subtitle = stringRes("subtitle"),
isShielded = false,
onCopyClicked = {},
onQrClicked = { },
onRequestClicked = { },
isExpanded = true,
onClick = {},
colorMode = DEFAULT
) )
), ),
isLoading = false, isLoading = false,

View File

@ -15,6 +15,9 @@ import co.electriccoin.zcash.ui.common.usecase.ObserveSelectedWalletAccountUseCa
import co.electriccoin.zcash.ui.design.util.stringRes import co.electriccoin.zcash.ui.design.util.stringRes
import co.electriccoin.zcash.ui.screen.addressbook.viewmodel.ADDRESS_MAX_LENGTH import co.electriccoin.zcash.ui.screen.addressbook.viewmodel.ADDRESS_MAX_LENGTH
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.DEFAULT
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.KEYSTONE
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressState.ColorMode.ZASHI
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressType import co.electriccoin.zcash.ui.screen.receive.model.ReceiveAddressType
import co.electriccoin.zcash.ui.screen.receive.model.ReceiveState import co.electriccoin.zcash.ui.screen.receive.model.ReceiveState
import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.MutableStateFlow
@ -107,7 +110,12 @@ class ReceiveViewModel(
onQrClicked = { onQrCodeClick(type) }, onQrClicked = { onQrCodeClick(type) },
onRequestClicked = { onRequestClick(type) }, onRequestClicked = { onRequestClick(type) },
onClick = onClick, onClick = onClick,
isExpanded = isExpanded isExpanded = isExpanded,
colorMode =
when (account) {
is KeystoneAccount -> if (type == ReceiveAddressType.Unified) DEFAULT else KEYSTONE
is ZashiAccount -> if (type == ReceiveAddressType.Unified) DEFAULT else ZASHI
}
) )
private fun onRequestClick(addressType: ReceiveAddressType) = private fun onRequestClick(addressType: ReceiveAddressType) =