diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreenState.kt b/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreenState.kt index 68da6ac85f..e55525ae1d 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreenState.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsScreenState.kt @@ -30,7 +30,7 @@ enum class SettingsElement( LinkMoreCards(R.drawable.ic_more_cards, R.string.details_row_title_create_backup), TermsOfService(R.drawable.ic_text, R.string.disclaimer_title), // General Terms of Service of the App TermsOfUse(R.drawable.ic_text, R.string.details_row_title_card_tou), // Terms of Use for S2C cards only - PrivacyPolicy(R.drawable.ic_lock, R.string.details_row_privacy_policy); + PrivacyPolicy(R.drawable.ic_lock_24, R.string.details_row_privacy_policy); } @Immutable diff --git a/app/src/main/java/com/tangem/tap/features/saveWallet/ui/SaveWalletBottomSheetFragment.kt b/app/src/main/java/com/tangem/tap/features/saveWallet/ui/SaveWalletBottomSheetFragment.kt index f3d0d97747..6050723fbd 100644 --- a/app/src/main/java/com/tangem/tap/features/saveWallet/ui/SaveWalletBottomSheetFragment.kt +++ b/app/src/main/java/com/tangem/tap/features/saveWallet/ui/SaveWalletBottomSheetFragment.kt @@ -6,7 +6,13 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.SnackbarHost import androidx.compose.material.SnackbarHostState -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.State +import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberUpdatedState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.fragment.app.viewModels @@ -18,7 +24,7 @@ import com.tangem.tap.features.details.ui.cardsettings.resolveReference import com.tangem.tap.features.saveWallet.ui.components.SaveWalletScreenContent internal class SaveWalletBottomSheetFragment : ComposeBottomSheetFragment() { - override val expandedHeightFraction: Float = .95f + override val expandedHeightFraction: Float = .98f private val viewModel by viewModels() diff --git a/app/src/main/java/com/tangem/tap/features/saveWallet/ui/components/SaveWalletScreenContent.kt b/app/src/main/java/com/tangem/tap/features/saveWallet/ui/components/SaveWalletScreenContent.kt index 2451c9234a..558eeff759 100644 --- a/app/src/main/java/com/tangem/tap/features/saveWallet/ui/components/SaveWalletScreenContent.kt +++ b/app/src/main/java/com/tangem/tap/features/saveWallet/ui/components/SaveWalletScreenContent.kt @@ -1,27 +1,34 @@ package com.tangem.tap.features.saveWallet.ui.components import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.widthIn import androidx.compose.material.Icon import androidx.compose.material.IconButton import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.capitalize +import androidx.compose.ui.text.intl.Locale import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.components.PrimaryButton -import com.tangem.core.ui.components.SpacerH12 import com.tangem.core.ui.components.SpacerH16 -import com.tangem.core.ui.components.SpacerH24 +import com.tangem.core.ui.components.SpacerH32 +import com.tangem.core.ui.components.SpacerH4 +import com.tangem.core.ui.components.SpacerHHalf +import com.tangem.core.ui.components.SpacerW24 +import com.tangem.core.ui.components.SpacerW8 import com.tangem.core.ui.components.atoms.Hand import com.tangem.core.ui.res.TangemTheme import com.tangem.wallet.R @@ -34,79 +41,141 @@ internal fun SaveWalletScreenContent( onCloseClick: () -> Unit, ) { Column( - modifier = modifier - .padding(horizontal = TangemTheme.dimens.spacing16), + modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally, ) { - Hand() - IconButton( + Header( + modifier = Modifier.fillMaxWidth(), + onCloseClick = onCloseClick, + ) + SpacerHHalf() + Title( modifier = Modifier - .align(Alignment.End) - .padding(all = TangemTheme.dimens.spacing8) - .size(TangemTheme.dimens.size32), - onClick = onCloseClick, + .widthIn(max = TangemTheme.dimens.size200), + ) + SpacerH32() + Description( + modifier = Modifier + .padding( + start = TangemTheme.dimens.spacing34, + end = TangemTheme.dimens.spacing56, + ) + .fillMaxWidth(), + ) + SpacerHHalf() + Footer( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing16) + .fillMaxWidth(), + showProgress = showProgress, + onSaveWalletClick = onSaveWalletClick, + ) + SpacerH16() + } +} + +@Composable +private fun Header( + modifier: Modifier = Modifier, + onCloseClick: () -> Unit, +) { + Column( + modifier = modifier, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8), + ) { + Hand() + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.End, ) { - Icon( - modifier = Modifier.size(TangemTheme.dimens.size24), - painter = painterResource(id = R.drawable.ic_close), - tint = TangemTheme.colors.icon.secondary, - contentDescription = stringResource(id = R.string.common_cancel), - ) + IconButton( + modifier = Modifier.size(TangemTheme.dimens.size32), + onClick = onCloseClick, + ) { + Icon( + modifier = Modifier.size(TangemTheme.dimens.size24), + painter = painterResource(id = R.drawable.ic_close), + tint = TangemTheme.colors.icon.secondary, + contentDescription = stringResource(id = R.string.common_cancel), + ) + } + SpacerW8() } - Spacer(modifier = Modifier.weight(.7f)) + } +} + +@Composable +private fun Title( + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing32), + ) { Icon( modifier = Modifier.size(TangemTheme.dimens.size56), painter = painterResource(id = R.drawable.ic_fingerprint_24), - tint = TangemTheme.colors.icon.informative, + tint = TangemTheme.colors.icon.primary1, contentDescription = null, ) - SpacerH24() - Box( - modifier = Modifier - .background( - color = TangemTheme.colors.text.accent.copy(alpha = .12f), - shape = TangemTheme.shapes.roundedCornersMedium, - ), - ) { - Text( - modifier = Modifier - .padding( - vertical = TangemTheme.dimens.spacing4, - horizontal = TangemTheme.dimens.spacing12, - ), - text = stringResource(R.string.save_user_wallet_agreement_new_feature), - style = TangemTheme.typography.subtitle2, - color = TangemTheme.colors.text.accent, - textAlign = TextAlign.Center, - ) - } - SpacerH24() Text( - modifier = Modifier.fillMaxWidth(), - text = stringResource(R.string.onboarding_navbar_save_wallet), + text = stringResource( + id = R.string.save_user_wallet_agreement_header, + stringResource(id = R.string.common_biometrics).capitalize(Locale.current), + ), style = TangemTheme.typography.h2, color = TangemTheme.colors.text.primary1, textAlign = TextAlign.Center, ) - SpacerH12() - Text( - modifier = Modifier.fillMaxWidth(fraction = .87f), - text = stringResource(R.string.save_user_wallet_agreement_description), - style = TangemTheme.typography.body1, - color = TangemTheme.colors.text.secondary, - textAlign = TextAlign.Center, + } +} + +@Composable +private fun Description( + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing24), + horizontalAlignment = Alignment.Start, + ) { + DescriptionItem( + iconPainter = painterResource(id = R.drawable.ic_face_recognition_24), + title = stringResource(id = R.string.save_user_wallet_agreement_access_title), + description = stringResource(id = R.string.save_user_wallet_agreement_access_description), ) - Spacer(modifier = Modifier.weight(1f)) + DescriptionItem( + iconPainter = painterResource(id = R.drawable.ic_lock_24), + title = stringResource(id = R.string.save_user_wallet_agreement_code_title), + description = stringResource( + id = R.string.save_user_wallet_agreement_code_description, + stringResource(id = R.string.common_biometrics).capitalize(Locale.current), + ), + ) + } +} + +@Composable +private fun Footer( + modifier: Modifier = Modifier, + showProgress: Boolean, + onSaveWalletClick: () -> Unit, +) { + Column( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16), + ) { PrimaryButton( modifier = Modifier.fillMaxWidth(), showProgress = showProgress, text = stringResource( id = R.string.save_user_wallet_agreement_allow, - stringResource(id = R.string.common_biometric_authentication), + stringResource(id = R.string.common_biometrics).capitalize(Locale.current), ), onClick = onSaveWalletClick, ) - SpacerH16() Text( modifier = Modifier.fillMaxWidth(fraction = .7f), text = stringResource(R.string.save_user_wallet_agreement_notice), @@ -114,7 +183,41 @@ internal fun SaveWalletScreenContent( color = TangemTheme.colors.text.tertiary, textAlign = TextAlign.Center, ) - SpacerH16() + } +} + +@Composable +private fun DescriptionItem( + modifier: Modifier = Modifier, + iconPainter: Painter, + title: String, + description: String, +) { + Row( + modifier = modifier, + verticalAlignment = Alignment.Top, + horizontalArrangement = Arrangement.SpaceEvenly, + ) { + Icon( + modifier = Modifier.size(TangemTheme.dimens.size24), + painter = iconPainter, + tint = TangemTheme.colors.icon.primary1, + contentDescription = null, + ) + SpacerW24() + Column { + Text( + text = title, + style = TangemTheme.typography.subtitle1, + color = TangemTheme.colors.text.primary1, + ) + SpacerH4() + Text( + text = description, + style = TangemTheme.typography.body2, + color = TangemTheme.colors.text.secondary, + ) + } } } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Spacers.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Spacers.kt index 7b99b3f27e..fcc5dc2d24 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/Spacers.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Spacers.kt @@ -61,6 +61,11 @@ fun SpacerH24(modifier: Modifier = Modifier) { SpacerH(24.dp, modifier) } +@Composable +fun SpacerH28(modifier: Modifier = Modifier) { + SpacerH(28.dp, modifier) +} + @Composable fun SpacerH32(modifier: Modifier = Modifier) { SpacerH(32.dp, modifier) @@ -71,6 +76,12 @@ fun SpacerH32(modifier: Modifier = Modifier) { fun ColumnScope.SpacerHMax(modifier: Modifier = Modifier) { Spacer(modifier = modifier.weight(1f)) } + +// TODO: Refactor with context receivers +@Composable +fun ColumnScope.SpacerHHalf(modifier: Modifier = Modifier) { + Spacer(modifier = modifier.weight(.5f)) +} // endregion Horizontal // region Vertical diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt index 6fdc0363f4..0febb1a8af 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt @@ -61,6 +61,7 @@ data class TangemDimens internal constructor( val spacing16: Dp = 16.dp, val spacing24: Dp = 24.dp, val spacing32: Dp = 32.dp, + val spacing34: Dp = 34.dp, val spacing44: Dp = 44.dp, val spacing50: Dp = 50.dp, val spacing54: Dp = 54.dp, diff --git a/core/ui/src/main/res/drawable/ic_face_recognition_24.xml b/core/ui/src/main/res/drawable/ic_face_recognition_24.xml new file mode 100644 index 0000000000..a0b2816482 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_face_recognition_24.xml @@ -0,0 +1,12 @@ + + + + + + diff --git a/app/src/main/res/drawable/ic_lock.xml b/core/ui/src/main/res/drawable/ic_lock_24.xml similarity index 100% rename from app/src/main/res/drawable/ic_lock.xml rename to core/ui/src/main/res/drawable/ic_lock_24.xml