diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt b/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt index dd6f290ebe..1517c58124 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/common/DetailsComposeElements.kt @@ -102,7 +102,7 @@ fun EmptyTopBarWithNavigation( { IconButton(onClick = onBackClick) { Icon( - painter = painterResource(id = R.drawable.ic_back), + painter = painterResource(id = R.drawable.ic_back_24), contentDescription = null, tint = TangemTheme.colors.icon.primary1, ) @@ -136,6 +136,6 @@ fun DetailsMainButton( ) { Text(text = title) Spacer(modifier = modifier.size(8.dp)) - Icon(painter = painterResource(id = R.drawable.ic_tangem), contentDescription = "") + Icon(painter = painterResource(id = R.drawable.ic_tangem_24), contentDescription = "") } } \ No newline at end of file diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/walletconnect/WalletConnectScreen.kt b/app/src/main/java/com/tangem/tap/features/details/ui/walletconnect/WalletConnectScreen.kt index 499f31ddcf..5b1f0c2ce6 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/walletconnect/WalletConnectScreen.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/walletconnect/WalletConnectScreen.kt @@ -81,7 +81,7 @@ private fun AddSessionFab( modifier = modifier, ) { Icon( - painter = painterResource(id = R.drawable.ic_plus), + painter = painterResource(id = R.drawable.ic_plus_24), contentDescription = "", ) } 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 40b84a07d4..e04a1de7f7 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 @@ -92,7 +92,7 @@ private fun Header( ) { Icon( modifier = Modifier.size(TangemTheme.dimens.size24), - painter = painterResource(id = R.drawable.ic_close), + painter = painterResource(id = R.drawable.ic_close_24), tint = TangemTheme.colors.icon.secondary, contentDescription = stringResource(id = R.string.common_cancel), ) diff --git a/app/src/main/java/com/tangem/tap/features/walletSelector/ui/components/WallectSelectorScreenContent.kt b/app/src/main/java/com/tangem/tap/features/walletSelector/ui/components/WallectSelectorScreenContent.kt index 6c57a43f00..136f786705 100644 --- a/app/src/main/java/com/tangem/tap/features/walletSelector/ui/components/WallectSelectorScreenContent.kt +++ b/app/src/main/java/com/tangem/tap/features/walletSelector/ui/components/WallectSelectorScreenContent.kt @@ -201,7 +201,7 @@ private fun Footer( modifier = Modifier.fillMaxWidth(), text = stringResource(R.string.user_wallet_list_add_button), showProgress = showAddCardProgress, - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = onAddCardClick, ) } @@ -230,7 +230,7 @@ private fun EditWalletsBar( ) { Icon( modifier = Modifier.size(TangemTheme.dimens.size24), - painter = painterResource(id = R.drawable.ic_close), + painter = painterResource(id = R.drawable.ic_close_24), tint = TangemTheme.colors.icon.primary1, contentDescription = "Unselect wallets", ) diff --git a/app/src/main/java/com/tangem/tap/features/welcome/ui/components/WelcomeScreenContent.kt b/app/src/main/java/com/tangem/tap/features/welcome/ui/components/WelcomeScreenContent.kt index c0a780226b..709c151963 100644 --- a/app/src/main/java/com/tangem/tap/features/welcome/ui/components/WelcomeScreenContent.kt +++ b/app/src/main/java/com/tangem/tap/features/welcome/ui/components/WelcomeScreenContent.kt @@ -85,7 +85,7 @@ internal fun WelcomeScreenContent( .fillMaxWidth(), text = stringResource(R.string.welcome_unlock_card), showProgress = showScanCardProgress, - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = onScanCardClick, ) SpacerH16() diff --git a/app/src/main/res/drawable/ic_close.xml b/app/src/main/res/drawable/ic_close.xml deleted file mode 100644 index d276f8584c..0000000000 --- a/app/src/main/res/drawable/ic_close.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/app/src/main/res/drawable/ic_more.xml b/app/src/main/res/drawable/ic_more.xml deleted file mode 100644 index 2ea52e3dbc..0000000000 --- a/app/src/main/res/drawable/ic_more.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/app/src/main/res/layout/fragment_topup.xml b/app/src/main/res/layout/fragment_topup.xml index 01182c0c4c..366c9faa7c 100644 --- a/app/src/main/res/layout/fragment_topup.xml +++ b/app/src/main/res/layout/fragment_topup.xml @@ -10,7 +10,7 @@ android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_constraintTop_toTopOf="parent" - app:navigationIcon="@drawable/ic_close" + app:navigationIcon="@drawable/ic_close_24" app:title="@string/wallet_button_buy" /> + android:src="@drawable/ic_close_24" /> diff --git a/app/src/main/res/layout/layout_warning_card_action.xml b/app/src/main/res/layout/layout_warning_card_action.xml index 9a0aafc0d5..e85e77d3e5 100644 --- a/app/src/main/res/layout/layout_warning_card_action.xml +++ b/app/src/main/res/layout/layout_warning_card_action.xml @@ -22,7 +22,7 @@ android:tint="@android:color/white" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/warning_content_container" - app:srcCompat="@drawable/ic_close" /> + app:srcCompat="@drawable/ic_close_24" /> diff --git a/core/ui/build.gradle.kts b/core/ui/build.gradle.kts index 2ab555ec1d..28792f7aa2 100644 --- a/core/ui/build.gradle.kts +++ b/core/ui/build.gradle.kts @@ -55,6 +55,7 @@ dependencies { /** Other libraries */ implementation(Library.accompanistSystemUiController) implementation(Library.materialComponent) + implementation(Library.composeShimmer) implementation(project(":core:res")) } \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Buttons.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Buttons.kt index 80ca296491..57ea5a799d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/Buttons.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Buttons.kt @@ -429,14 +429,14 @@ private fun PrimaryButtonSample( PrimaryButtonIconRight( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = { /* no-op */ }, ) Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) PrimaryButtonIconLeft( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = { /* no-op */ }, ) Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) @@ -450,7 +450,7 @@ private fun PrimaryButtonSample( PrimaryButtonIconRight( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), enabled = false, onClick = { /* no-op */ }, ) @@ -458,7 +458,7 @@ private fun PrimaryButtonSample( PrimaryButtonIconLeft( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), enabled = false, onClick = { /* no-op */ }, ) @@ -505,14 +505,14 @@ private fun SecondaryButtonSample( SecondaryButtonIconRight( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = { /* no-op */ }, ) Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) SecondaryButtonIconLeft( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), onClick = { /* no-op */ }, ) Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) @@ -526,7 +526,7 @@ private fun SecondaryButtonSample( SecondaryButtonIconRight( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), enabled = false, onClick = { /* no-op */ }, ) @@ -534,7 +534,7 @@ private fun SecondaryButtonSample( SecondaryButtonIconLeft( modifier = Modifier.fillMaxWidth(), text = "Manage tokens", - icon = painterResource(id = R.drawable.ic_tangem), + icon = painterResource(id = R.drawable.ic_tangem_24), enabled = false, onClick = { /* no-op */ }, ) @@ -572,7 +572,7 @@ private fun TextButtonSample( Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) TextButtonIconLeft( text = "Enabled", - icon = painterResource(id = R.drawable.ic_plus), + icon = painterResource(id = R.drawable.ic_plus_24), onClick = { /* no-op */ }, ) Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) @@ -584,7 +584,7 @@ private fun TextButtonSample( Divider(modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing8)) TextButtonIconLeft( text = "Enabled", - icon = painterResource(id = R.drawable.ic_plus), + icon = painterResource(id = R.drawable.ic_plus_24), enabled = false, onClick = { /* no-op */ }, ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/ButtonsDeprecated.kt b/core/ui/src/main/java/com/tangem/core/ui/components/ButtonsDeprecated.kt index 7fec4a465d..26fe7edb44 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/ButtonsDeprecated.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/ButtonsDeprecated.kt @@ -28,7 +28,12 @@ import com.tangem.core.ui.res.textColor @Composable fun Preview_PrimaryStartIconButton_Enabled_InLightTheme() { TangemTheme(isDark = false) { - PrimaryStartIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = true, onClicked = {}) + PrimaryStartIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = true, + onClicked = {}, + ) } } @@ -36,7 +41,12 @@ fun Preview_PrimaryStartIconButton_Enabled_InLightTheme() { @Composable fun Preview_PrimaryStartIconButton_Enabled_InDarkTheme() { TangemTheme(isDark = true) { - PrimaryStartIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = true, onClicked = {}) + PrimaryStartIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = true, + onClicked = {}, + ) } } @@ -46,7 +56,7 @@ fun Preview_PrimaryStartIconButton_Disabled_InLightTheme() { TangemTheme(isDark = false) { PrimaryStartIconButton( text = "Manage tokens", - iconResId = R.drawable.ic_tangem, + iconResId = R.drawable.ic_tangem_24, enabled = false, onClicked = {}, ) @@ -59,7 +69,7 @@ fun Preview_PrimaryStartIconButton_Disabled_InDarkTheme() { TangemTheme(isDark = true) { PrimaryStartIconButton( text = "Manage tokens", - iconResId = R.drawable.ic_tangem, + iconResId = R.drawable.ic_tangem_24, enabled = false, onClicked = {}, ) @@ -70,7 +80,12 @@ fun Preview_PrimaryStartIconButton_Disabled_InDarkTheme() { @Composable fun Preview_PrimaryEndIconButton_Enabled_InLightTheme() { TangemTheme(isDark = false) { - PrimaryEndIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = true, onClicked = {}) + PrimaryEndIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = true, + onClicked = {}, + ) } } @@ -78,7 +93,12 @@ fun Preview_PrimaryEndIconButton_Enabled_InLightTheme() { @Composable fun Preview_PrimaryEndIconButton_Enabled_InDarkTheme() { TangemTheme(isDark = true) { - PrimaryEndIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = true, onClicked = {}) + PrimaryEndIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = true, + onClicked = {}, + ) } } @@ -86,7 +106,12 @@ fun Preview_PrimaryEndIconButton_Enabled_InDarkTheme() { @Composable fun Preview_PrimaryEndIconButton_Disabled_InLightTheme() { TangemTheme(isDark = false) { - PrimaryEndIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = false, onClicked = {}) + PrimaryEndIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = false, + onClicked = {}, + ) } } @@ -94,7 +119,12 @@ fun Preview_PrimaryEndIconButton_Disabled_InLightTheme() { @Composable fun Preview_PrimaryEndIconButton_Disabled_InDarkTheme() { TangemTheme(isDark = true) { - PrimaryEndIconButton(text = "Manage tokens", iconResId = R.drawable.ic_tangem, enabled = false, onClicked = {}) + PrimaryEndIconButton( + text = "Manage tokens", + iconResId = R.drawable.ic_tangem_24, + enabled = false, + onClicked = {}, + ) } } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Cards.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Cards.kt index 90d5ee1ce4..8eb31f6669 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/Cards.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Cards.kt @@ -1,79 +1,338 @@ package com.tangem.core.ui.components +import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.MaterialTheme +import androidx.compose.material.Divider +import androidx.compose.material.Icon import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.dimensionResource +import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.R import com.tangem.core.ui.res.TangemTheme -import com.tangem.core.ui.res.TextColorType -import com.tangem.core.ui.res.textColor - -@Preview(widthDp = 328, heightDp = 48, showBackground = true) -@Composable -fun Preview_SimpleInfoCard_InLightTheme() { - TangemTheme(isDark = false) { - SmallInfoCard(startText = "Balance", endText = "0.4405434 BTC") - } -} - -@Preview(widthDp = 328, heightDp = 48, showBackground = true) -@Composable -fun Preview_SimpleInfoCard_InDarkTheme() { - TangemTheme(isDark = true) { - SmallInfoCard(startText = "Balance", endText = "0.4405434 BTC") - } -} +import com.valentinilk.shimmer.shimmer /** * Small card with text information attached to the edges * * @param startText text information attached to the left edge * @param endText text information attached to the right edge + * @param isLoading if true, shimmer is shown instead of [startText] and [endText] * * @see Figma component */ @Composable -fun SmallInfoCard(startText: String, endText: String) { +fun SmallInfoCard( + modifier: Modifier = Modifier, + startText: String, + endText: String, + isLoading: Boolean = false, +) { Surface( shape = RoundedCornerShape(TangemTheme.dimens.radius12), - color = MaterialTheme.colors.secondary, + color = TangemTheme.colors.background.primary, elevation = TangemTheme.dimens.elevation2, ) { - Row( + CardInfoBox( + modifier = modifier, + startText = startText, + endText = endText, + isLoading = isLoading, + ) + } +} + +/** + * [SmallInfoCard] with warning information shown underneath it. + * + * @param startText text information attached to the left edge + * @param endText text information attached to the right edge + * @param warningText text of the warning + * + * @see Figma component + */ +@Composable +fun SmallInfoCardWithWarning( + modifier: Modifier = Modifier, + startText: String, + endText: String, + warningText: String, +) { + Surface( + shape = RoundedCornerShape(TangemTheme.dimens.size12), + color = TangemTheme.colors.background.primary, + elevation = TangemTheme.dimens.elevation2, + ) { + Column( + modifier = modifier + .fillMaxWidth(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + + CardInfoBox(startText = startText, endText = endText) + + Divider( + color = TangemTheme.colors.stroke.primary, + thickness = TangemTheme.dimens.size0_5, + modifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing12), + ) + + Row( + modifier = Modifier + .fillMaxWidth() + .padding( + top = TangemTheme.dimens.spacing14, + bottom = TangemTheme.dimens.spacing16, + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing16, + ), + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + ) { + Box( + modifier = Modifier + .background( + color = TangemTheme.colors.background.secondary, + shape = CircleShape, + ) + .height(TangemTheme.dimens.size40) + .width(TangemTheme.dimens.size40), + contentAlignment = Alignment.Center, + ) { + Image( + painter = painterResource(id = R.drawable.img_attention_20), + contentDescription = null, + ) + } + SpacerW12() + Text( + text = warningText, + color = TangemTheme.colors.text.primary1, + style = TangemTheme.typography.body2, + ) + } + } + } +} + +/** + * Small card with an icon to the left and title with description shown to the right of it. + * Additional context can be shown to the right of it. + * + * @param title shown to the right of icon + * @param description shown to the right of icon + * @param icon icon to the left + * @param additionalContent shown at the right edge of the card + * + * @see Figma component + */ +@Composable +fun CardWithIcon( + modifier: Modifier = Modifier, + title: String, + description: String, + icon: @Composable () -> Unit, + additionalContent: @Composable () -> Unit = {}, +) { + Surface( + shape = RoundedCornerShape(TangemTheme.dimens.radius12), + color = TangemTheme.colors.background.primary, + elevation = TangemTheme.dimens.elevation2, + ) { + IconWithTitleAndDescription( + modifier = modifier, + title = title, + description = description, + icon = icon, + additionalContent = additionalContent, + ) + } +} + +/** + * A widget with an icon to the left and title with description shown to the right of it. + * Additional context can be shown to the right of it. + * + * @param title shown to the right of icon + * @param description shown to the right of icon + * @param icon icon to the left + * @param additionalContent shown at the right edge of the card + * + * @see Figma component + */ +@Composable +fun IconWithTitleAndDescription( + title: String, + description: String, + icon: @Composable () -> Unit, + additionalContent: @Composable () -> Unit = {}, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier + .wrapContentHeight() + .fillMaxWidth() + .padding( + horizontal = TangemTheme.dimens.spacing16, + vertical = TangemTheme.dimens.spacing12, + ), + horizontalArrangement = Arrangement.Start, + verticalAlignment = Alignment.CenterVertically, + ) { + + Box( modifier = Modifier - .fillMaxWidth() - .height(TangemTheme.dimens.size48) - .padding( - horizontal = TangemTheme.dimens.spacing16, - vertical = TangemTheme.dimens.spacing12, - ), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically + .background( + color = TangemTheme.colors.background.secondary, + shape = CircleShape, + ) + .height(TangemTheme.dimens.size40) + .width(TangemTheme.dimens.size40), + contentAlignment = Alignment.Center, + ) { + icon() + } + + SpacerW12() + + Column( + modifier = Modifier + .weight(weight = 1f, fill = true), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.Start, ) { Text( - text = startText, - color = MaterialTheme.colors.textColor(type = TextColorType.TERTIARY), - maxLines = 1, - style = MaterialTheme.typography.subtitle2 + text = title, + color = TangemTheme.colors.text.primary1, + style = TangemTheme.typography.subtitle1, ) + SpacerH4() + Text( + text = description, + color = TangemTheme.colors.text.secondary, + style = TangemTheme.typography.body2, + ) + } + + additionalContent() + } +} + +// region elements + +@Composable +private fun CardInfoBox( + modifier: Modifier = Modifier, + startText: String, + endText: String, + isLoading: Boolean = false, +) { + Row( + modifier = modifier + .fillMaxWidth() + .height(TangemTheme.dimens.size48) + .padding( + horizontal = TangemTheme.dimens.spacing16, + vertical = TangemTheme.dimens.spacing12, + ), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = startText, + color = TangemTheme.colors.text.tertiary, + maxLines = 1, + style = TangemTheme.typography.subtitle2, + ) + + if (isLoading) { + Box( + modifier = Modifier + .shimmer() + .size( + width = TangemTheme.dimens.size80, + height = TangemTheme.dimens.size20, + ), + ) + } else { Text( text = endText, - color = MaterialTheme.colors.textColor(type = TextColorType.PRIMARY1), + color = TangemTheme.colors.text.primary1, maxLines = 1, - style = MaterialTheme.typography.body2 + style = TangemTheme.typography.body2, ) } } -} \ No newline at end of file +} + +// endregion elements + +// region Preview + +@Composable +private fun CardsPreview() { + Column(modifier = Modifier.fillMaxWidth()) { + SmallInfoCard(startText = "Balance", endText = "0.4405434 BTC") + + SpacerH32() + + SmallInfoCardWithWarning( + startText = "Balance", + endText = "0.4405434 BTC", + warningText = + "Not enough funds for fee on your Polygon wallet to create a transaction. Top up your Polygon wallet first.", + ) + + SpacerH32() + + CardWithIcon( + title = "Permit is valid until", + description = "26:30", + icon = { + Icon( + painterResource(id = R.drawable.ic_clock_24), + contentDescription = null, + tint = TangemTheme.colors.icon.primary1, + ) + }, + ) + } +} + +@Preview(showBackground = true) +@Composable +fun Preview_Cards_InLightTheme() { + TangemTheme(isDark = false) { + CardsPreview() + } +} + +@Preview(showBackground = true) +@Composable +fun Preview_InfoCardWithWarning_InDarkTheme() { + TangemTheme(isDark = true) { + CardsPreview() + } +} + +// endregion Preview \ No newline at end of file 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 fcc5dc2d24..93813f92e5 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 @@ -46,6 +46,11 @@ fun SpacerH8(modifier: Modifier = Modifier) { SpacerH(8.dp, modifier) } +@Composable +fun SpacerH10(modifier: Modifier = Modifier) { + SpacerH(10.dp, modifier) +} + @Composable fun SpacerH12(modifier: Modifier = Modifier) { SpacerH(12.dp, modifier) @@ -71,6 +76,11 @@ fun SpacerH32(modifier: Modifier = Modifier) { SpacerH(32.dp, modifier) } +@Composable +fun SpacerH50(modifier: Modifier = Modifier) { + SpacerH(50.dp, modifier) +} + // TODO: Refactor with context receivers @Composable fun ColumnScope.SpacerHMax(modifier: Modifier = Modifier) { @@ -105,6 +115,11 @@ fun SpacerW8(modifier: Modifier = Modifier) { SpacerW(8.dp, modifier) } +@Composable +fun SpacerW12(modifier: Modifier = Modifier) { + SpacerW(12.dp, modifier) +} + @Composable fun SpacerW16(modifier: Modifier = Modifier) { SpacerW(16.dp, modifier) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/TextFields.kt b/core/ui/src/main/java/com/tangem/core/ui/components/TextFields.kt index f14d87c904..03af4693a4 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/TextFields.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/TextFields.kt @@ -140,7 +140,7 @@ private fun TangemTextField( }, trailingIcon = { val iconRes by rememberUpdatedState( - newValue = if (isError) R.drawable.ic_alert else R.drawable.ic_close, + newValue = if (isError) R.drawable.ic_alert_24 else R.drawable.ic_close_24, ) IconButton( modifier = Modifier.size(32.dp), diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt index 6416a8343f..d51a90d999 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt @@ -12,7 +12,6 @@ import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.R @@ -83,11 +82,11 @@ fun Preview_AppBarWithAdditionalButtons_InLightTheme() { AppBarWithAdditionalButtons( text = "Tangem", startButton = AdditionalButton( - iconRes = R.drawable.ic_scan, + iconRes = R.drawable.ic_scan_24, onIconClicked = {}, ), endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical, + iconRes = R.drawable.ic_more_vertical_24, onIconClicked = {}, ), ) @@ -101,11 +100,11 @@ fun Preview_AppBarWithAdditionalButtons_InDarkTheme() { AppBarWithAdditionalButtons( text = "Tangem", startButton = AdditionalButton( - iconRes = R.drawable.ic_scan, + iconRes = R.drawable.ic_scan_24, onIconClicked = {}, ), endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical, + iconRes = R.drawable.ic_more_vertical_24, onIconClicked = {}, ), ) @@ -119,7 +118,7 @@ fun Preview_AppBarWithOnlyStartButtons_InLightTheme() { AppBarWithAdditionalButtons( text = "Tangem", startButton = AdditionalButton( - iconRes = R.drawable.ic_scan, + iconRes = R.drawable.ic_scan_24, onIconClicked = {}, ), ) @@ -133,7 +132,7 @@ fun Preview_AppBarWithOnlyStartButtons_InDarkTheme() { AppBarWithAdditionalButtons( text = "Tangem", startButton = AdditionalButton( - iconRes = R.drawable.ic_scan, + iconRes = R.drawable.ic_scan_24, onIconClicked = {}, ), ) @@ -147,7 +146,7 @@ fun Preview_AppBarWithOnlyEndButtons_InLightTheme() { AppBarWithAdditionalButtons( text = "Tangem", endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical, + iconRes = R.drawable.ic_more_vertical_24, onIconClicked = {}, ), ) @@ -161,7 +160,7 @@ fun Preview_AppBarWithOnlyEndButtons_InDarkTheme() { AppBarWithAdditionalButtons( text = "Tangem", endButton = AdditionalButton( - iconRes = R.drawable.ic_more_vertical, + iconRes = R.drawable.ic_more_vertical_24, onIconClicked = {}, ), ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt index 3f4c5efa9e..a5ecdac8f2 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt @@ -1,5 +1,6 @@ package com.tangem.core.ui.components.appbar +import androidx.annotation.DrawableRes import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement @@ -29,7 +30,11 @@ import com.tangem.core.ui.res.TangemTheme * >Figma component */ @Composable -fun AppBarWithBackButton(text: String? = null, onBackClick: () -> Unit) { +fun AppBarWithBackButton( + text: String? = null, + @DrawableRes iconRes: Int? = null, + onBackClick: () -> Unit, +) { Row( modifier = Modifier .background(MaterialTheme.colors.primary) @@ -39,7 +44,7 @@ fun AppBarWithBackButton(text: String? = null, onBackClick: () -> Unit) { verticalAlignment = Alignment.CenterVertically, ) { Icon( - painter = painterResource(R.drawable.ic_back), + painter = painterResource(iconRes ?: R.drawable.ic_back_24), contentDescription = null, modifier = Modifier .size(size = dimensionResource(R.dimen.size24)) 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 38321bcba1..061e1f81c6 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 @@ -29,8 +29,10 @@ data class TangemDimens internal constructor( // endregion Radius // region Size val size0: Dp = 0.dp, + val size0_5: Dp = 0.5.dp, val size4: Dp = 4.dp, val size8: Dp = 8.dp, + val size11: Dp = 11.dp, val size12: Dp = 12.dp, val size16: Dp = 16.dp, val size18: Dp = 18.dp, @@ -38,16 +40,23 @@ data class TangemDimens internal constructor( val size24: Dp = 24.dp, val size28: Dp = 28.dp, val size32: Dp = 32.dp, + val size36: Dp = 36.dp, val size40: Dp = 40.dp, val size42: Dp = 42.dp, val size44: Dp = 44.dp, + val size46: Dp = 46.dp, val size48: Dp = 48.dp, + val size50: Dp = 50.dp, val size56: Dp = 56.dp, val size62: Dp = 62.dp, + val size80: Dp = 80.dp, val size84: Dp = 84.dp, val size86: Dp = 86.dp, + val size93: Dp = 93.dp, val size96: Dp = 96.dp, val size102: Dp = 102.dp, + val size116: Dp = 116.dp, + val size142: Dp = 142.dp, val size164: Dp = 164.dp, val size200: Dp = 200.dp, // endregion Size @@ -61,11 +70,13 @@ data class TangemDimens internal constructor( val spacing16: Dp = 16.dp, val spacing20: Dp = 20.dp, val spacing24: Dp = 24.dp, + val spacing28: Dp = 28.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, val spacing56: Dp = 56.dp, + val spacing92: Dp = 92.dp, // endregion Spacing ) \ No newline at end of file diff --git a/core/ui/src/main/res/drawable/ic_alert.xml b/core/ui/src/main/res/drawable/ic_alert_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_alert.xml rename to core/ui/src/main/res/drawable/ic_alert_24.xml diff --git a/core/ui/src/main/res/drawable/ic_back.xml b/core/ui/src/main/res/drawable/ic_back_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_back.xml rename to core/ui/src/main/res/drawable/ic_back_24.xml diff --git a/core/ui/src/main/res/drawable/ic_check_24.xml b/core/ui/src/main/res/drawable/ic_check_24.xml new file mode 100644 index 0000000000..d3e69cbd22 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_check_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/drawable/ic_plus.xml b/core/ui/src/main/res/drawable/ic_chevron_24.xml similarity index 61% rename from app/src/main/res/drawable/ic_plus.xml rename to core/ui/src/main/res/drawable/ic_chevron_24.xml index e8b4a25be1..19898141ba 100644 --- a/app/src/main/res/drawable/ic_plus.xml +++ b/core/ui/src/main/res/drawable/ic_chevron_24.xml @@ -1,5 +1,7 @@ - + diff --git a/core/ui/src/main/res/drawable/ic_chevron_right_24.xml b/core/ui/src/main/res/drawable/ic_chevron_right_24.xml new file mode 100644 index 0000000000..1bb30766a3 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_chevron_right_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_clock_24.xml b/core/ui/src/main/res/drawable/ic_clock_24.xml new file mode 100644 index 0000000000..f2dc1c7357 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_clock_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_close.xml b/core/ui/src/main/res/drawable/ic_close_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_close.xml rename to core/ui/src/main/res/drawable/ic_close_24.xml diff --git a/core/ui/src/main/res/drawable/ic_copy.xml b/core/ui/src/main/res/drawable/ic_copy_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_copy.xml rename to core/ui/src/main/res/drawable/ic_copy_24.xml diff --git a/core/ui/src/main/res/drawable/ic_discount.xml b/core/ui/src/main/res/drawable/ic_discount_28.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_discount.xml rename to core/ui/src/main/res/drawable/ic_discount_28.xml diff --git a/core/ui/src/main/res/drawable/ic_exchange_vertical_24.xml b/core/ui/src/main/res/drawable/ic_exchange_vertical_24.xml new file mode 100644 index 0000000000..ddc06b2448 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_exchange_vertical_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_locked_24.xml b/core/ui/src/main/res/drawable/ic_locked_24.xml new file mode 100644 index 0000000000..565e084d7c --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_locked_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_more_vertical.xml b/core/ui/src/main/res/drawable/ic_more_vertical_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_more_vertical.xml rename to core/ui/src/main/res/drawable/ic_more_vertical_24.xml diff --git a/core/ui/src/main/res/drawable/ic_plus.xml b/core/ui/src/main/res/drawable/ic_plus_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_plus.xml rename to core/ui/src/main/res/drawable/ic_plus_24.xml diff --git a/core/ui/src/main/res/drawable/ic_refresh_24.xml b/core/ui/src/main/res/drawable/ic_refresh_24.xml new file mode 100644 index 0000000000..c859856a15 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_refresh_24.xml @@ -0,0 +1,10 @@ + + + diff --git a/core/ui/src/main/res/drawable/ic_scan.xml b/core/ui/src/main/res/drawable/ic_scan_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_scan.xml rename to core/ui/src/main/res/drawable/ic_scan_24.xml diff --git a/core/ui/src/main/res/drawable/ic_share.xml b/core/ui/src/main/res/drawable/ic_share_24.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_share.xml rename to core/ui/src/main/res/drawable/ic_share_24.xml diff --git a/core/ui/src/main/res/drawable/ic_tangem.xml b/core/ui/src/main/res/drawable/ic_tangem.xml deleted file mode 100644 index 93f8741777..0000000000 --- a/core/ui/src/main/res/drawable/ic_tangem.xml +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/core/ui/src/main/res/drawable/ic_tangem_24.xml b/core/ui/src/main/res/drawable/ic_tangem_24.xml new file mode 100644 index 0000000000..04c194fb62 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_tangem_24.xml @@ -0,0 +1,16 @@ + + + + + diff --git a/core/ui/src/main/res/drawable/ic_tether.xml b/core/ui/src/main/res/drawable/ic_tether_28.xml similarity index 100% rename from core/ui/src/main/res/drawable/ic_tether.xml rename to core/ui/src/main/res/drawable/ic_tether_28.xml diff --git a/core/ui/src/main/res/drawable/img_attention_20.xml b/core/ui/src/main/res/drawable/img_attention_20.xml new file mode 100644 index 0000000000..6c88899401 --- /dev/null +++ b/core/ui/src/main/res/drawable/img_attention_20.xml @@ -0,0 +1,16 @@ + + + + + diff --git a/core/ui/src/main/res/drawable/img_polygon_22.xml b/core/ui/src/main/res/drawable/img_polygon_22.xml new file mode 100644 index 0000000000..efb2fff8c1 --- /dev/null +++ b/core/ui/src/main/res/drawable/img_polygon_22.xml @@ -0,0 +1,13 @@ + + + + diff --git a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/NonParticipateBottomBlock.kt b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/NonParticipateBottomBlock.kt index 29e86058e8..03644d0342 100644 --- a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/NonParticipateBottomBlock.kt +++ b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/NonParticipateBottomBlock.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.components.PrimaryEndIconButton @@ -23,7 +22,7 @@ internal fun NonParticipateBottomBlock(onAgreementClicked: () -> Unit, onPartici PrimaryEndIconButton( modifier = Modifier.padding(all = TangemTheme.dimens.spacing16), text = stringResource(id = R.string.referral_button_participate), - iconResId = R.drawable.ic_tangem, + iconResId = R.drawable.ic_tangem_24, onClicked = onParticipateClicked, ) } diff --git a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ParticipateBottomBlock.kt b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ParticipateBottomBlock.kt index 0027b80634..deb95ccdb4 100644 --- a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ParticipateBottomBlock.kt +++ b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ParticipateBottomBlock.kt @@ -108,7 +108,7 @@ private fun AdditionalButtons(code: String, shareLink: String, showCopySnackbar: PrimaryStartIconButton( modifier = Modifier.weight(1f), text = stringResource(id = R.string.common_copy), - iconResId = R.drawable.ic_copy, + iconResId = R.drawable.ic_copy_24, onClicked = { hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) clipboardManager.setText(AnnotatedString(code)) @@ -120,7 +120,7 @@ private fun AdditionalButtons(code: String, shareLink: String, showCopySnackbar: PrimaryStartIconButton( modifier = Modifier.weight(1f), text = stringResource(id = R.string.common_share), - iconResId = R.drawable.ic_share, + iconResId = R.drawable.ic_share_24, onClicked = { hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) context.shareText(context.getString(R.string.referral_share_link, shareLink)) diff --git a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ReferralScreen.kt b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ReferralScreen.kt index 39d5296a12..09d9bb6db4 100644 --- a/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ReferralScreen.kt +++ b/features/referral/presentation/src/main/java/com/tangem/feature/referral/ui/ReferralScreen.kt @@ -207,9 +207,9 @@ private fun ReferralInfo( ) } is ReferralInfoState.Loading -> { - LoadingCondition(iconResId = R.drawable.ic_tether) + LoadingCondition(iconResId = R.drawable.ic_tether_28) VerticalSpacer(spaceResId = R.dimen.spacing32) - LoadingCondition(iconResId = R.drawable.ic_discount) + LoadingCondition(iconResId = R.drawable.ic_discount_28) } } } @@ -223,7 +223,7 @@ private fun Conditions(state: ReferralInfoContentState) { @Composable private fun ConditionForYou(state: ReferralInfoContentState) { - Condition(iconResId = R.drawable.ic_tether) { + Condition(iconResId = R.drawable.ic_tether_28) { when (state) { is ReferralInfoState.ParticipantContent -> InfoForYou( award = state.award, @@ -240,7 +240,7 @@ private fun ConditionForYou(state: ReferralInfoContentState) { @Composable private fun ConditionForYourFriend(discount: String) { - Condition(iconResId = R.drawable.ic_discount) { + Condition(iconResId = R.drawable.ic_discount_28) { InfoForYourFriend(discount = discount) } }