diff --git a/core/res/src/main/res/values/strings.xml b/core/res/src/main/res/values/strings.xml index ba7cf8ed61..fe42460f34 100644 --- a/core/res/src/main/res/values/strings.xml +++ b/core/res/src/main/res/values/strings.xml @@ -1436,8 +1436,8 @@ View Status KYC in progress for Tangem Pay Get card - Spend your crypto anywhere - With digital card that works with Apple Pay and Google Pay + With digital card that works with Apple Pay and Google Pay + Spend your assets anywhere There are no additional fees for purchases Pay exactly what you see A separate payment account will be created without disclosing your addresses and assets diff --git a/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml b/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml deleted file mode 100644 index 560684e1a9..0000000000 --- a/core/ui/src/main/res/drawable/ic_credit_card_add_22.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/core/ui/src/main/res/drawable/ic_credit_card_add_24.xml b/core/ui/src/main/res/drawable/ic_credit_card_add_24.xml new file mode 100644 index 0000000000..5377128e64 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_credit_card_add_24.xml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/core/ui/src/main/res/drawable/ic_security_check_22.xml b/core/ui/src/main/res/drawable/ic_security_check_22.xml deleted file mode 100644 index fd8956d8fa..0000000000 --- a/core/ui/src/main/res/drawable/ic_security_check_22.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml b/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml deleted file mode 100644 index c6cb19e2e7..0000000000 --- a/core/ui/src/main/res/drawable/ic_shopping_basket_22.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/core/ui/src/main/res/drawable/img_frozen_tangem_pay_visa.webp b/core/ui/src/main/res/drawable/img_frozen_tangem_pay_visa.webp deleted file mode 100644 index 464da3a41e..0000000000 Binary files a/core/ui/src/main/res/drawable/img_frozen_tangem_pay_visa.webp and /dev/null differ diff --git a/core/ui/src/main/res/drawable/img_tangem_pay_visa.webp b/core/ui/src/main/res/drawable/img_tangem_pay_visa.webp index 2ceacdaa2b..2a808bbb73 100644 Binary files a/core/ui/src/main/res/drawable/img_tangem_pay_visa.webp and b/core/ui/src/main/res/drawable/img_tangem_pay_visa.webp differ diff --git a/core/ui/src/main/res/drawable/img_tangem_pay_visa_frozen.webp b/core/ui/src/main/res/drawable/img_tangem_pay_visa_frozen.webp new file mode 100644 index 0000000000..bf2b79a46f Binary files /dev/null and b/core/ui/src/main/res/drawable/img_tangem_pay_visa_frozen.webp differ diff --git a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt index a564990a6e..2370490f90 100644 --- a/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt +++ b/features/tangempay/details/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TangemPayCardDetailsBlock.kt @@ -5,6 +5,7 @@ import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape @@ -14,6 +15,7 @@ import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.res.painterResource @@ -52,14 +54,24 @@ internal fun TangemPayCard(state: TangemPayCardDetailsUM, modifier: Modifier = M Box( modifier = modifier .fillMaxWidth() - .aspectRatio(204f / 130f) // size of img_tangem_pay_visa + .aspectRatio(328f / 212f) // size of img_tangem_pay_visa .graphicsLayer { rotationY = rotateCardY cameraDistance = zAxisDistance } .clip(RoundedCornerShape(16.dp)) .clickable(onClick = state.onClick) - .background(Color(red = 18, green = 21, blue = 31)), + .background(Color(red = 18, green = 21, blue = 31)) + .border( + width = 1.dp, + brush = Brush.linearGradient( + colors = listOf( + TangemTheme.colors.text.constantWhite.copy(alpha = 0.1F), + TangemTheme.colors.text.constantWhite.copy(alpha = 0f), + ), + ), + shape = RoundedCornerShape(16.dp), + ), ) { if (shouldShowDetails) { TangemPayCardDetailsShownBlock( @@ -93,7 +105,7 @@ private fun TangemPayCardDetailsHiddenBlock( ) { Box(modifier = modifier.fillMaxSize()) { val imageResId = when (cardFrozenState) { - is TangemPayCardFrozenState.Frozen -> R.drawable.img_frozen_tangem_pay_visa + is TangemPayCardFrozenState.Frozen -> R.drawable.img_tangem_pay_visa_frozen else -> R.drawable.img_tangem_pay_visa } Image( @@ -244,8 +256,12 @@ private fun CardDetailsTextContainer(title: String, text: String, onCopy: () -> private fun TangemPayCardDetailsBlockV2Preview( @PreviewParameter(TangemPayCardDetailsUMProvider::class) state: TangemPayCardDetailsUM, ) { - TangemThemePreview { - Box(modifier = Modifier.fillMaxSize()) { + TangemThemePreview(isDark = true) { + Box( + modifier = Modifier + .fillMaxSize() + .background(TangemTheme.colors.background.primary), + ) { TangemPayCard( state = state, modifier = Modifier diff --git a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt index b30c97ef7c..af5e9fcae7 100644 --- a/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt +++ b/features/tangempay/onboarding/impl/src/main/kotlin/com/tangem/features/tangempay/ui/TandemPayOnboardingScreen.kt @@ -3,8 +3,10 @@ package com.tangem.features.tangempay.ui import android.content.res.Configuration import androidx.annotation.DrawableRes import androidx.compose.foundation.Image +import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon @@ -13,6 +15,8 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview @@ -84,7 +88,19 @@ private fun TangemPayOnboardingContent(state: TangemPayOnboardingScreenState.Con Image( painter = painterResource(id = R.drawable.img_tangem_pay_visa), contentDescription = null, - modifier = Modifier.size(width = 200.dp, height = 130.dp), + modifier = Modifier + .size(width = 204.dp, height = 130.dp) + .clip(RoundedCornerShape(16.dp)) + .border( + width = 1.dp, + brush = Brush.linearGradient( + colors = listOf( + TangemTheme.colors.text.constantWhite.copy(alpha = 0.1F), + TangemTheme.colors.text.constantWhite.copy(alpha = 0f), + ), + ), + shape = RoundedCornerShape(16.dp), + ), ) Text( @@ -119,19 +135,19 @@ internal fun TangemPayOnboardingBlocks(modifier: Modifier = Modifier) { verticalArrangement = Arrangement.spacedBy(20.dp), ) { TangemPayOnboardingBlock( - painterRes = R.drawable.ic_security_check_22, + painterRes = R.drawable.ic_security_check_24, titleRef = TextReference.Res(R.string.tangempay_onboarding_security_title), descriptionRef = TextReference.Res(R.string.tangempay_onboarding_security_description), ) TangemPayOnboardingBlock( - painterRes = R.drawable.ic_shopping_basket_22, + painterRes = R.drawable.ic_shopping_basket_24, titleRef = TextReference.Res(R.string.tangempay_onboarding_purchases_title), descriptionRef = TextReference.Res(R.string.tangempay_onboarding_purchases_description), ) TangemPayOnboardingBlock( - painterRes = R.drawable.ic_credit_card_add_22, + painterRes = R.drawable.ic_credit_card_add_24, titleRef = TextReference.Res(R.string.tangempay_onboarding_pay_title), descriptionRef = TextReference.Res(R.string.tangempay_onboarding_pay_description), )