Updated on 2026-08-14

This commit is contained in:
Tangem 2022-12-15 15:36:00 +04:00
commit 829b98b2a0
45 changed files with 515 additions and 114 deletions

View file

@ -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 = "")
}
}

View file

@ -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 = "",
)
}

View file

@ -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),
)

View file

@ -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",
)

View file

@ -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()

View file

@ -1,5 +0,0 @@
<vector android:autoMirrored="true" android:height="24dp"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#000000" android:pathData="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</vector>

View file

@ -1,5 +0,0 @@
<vector android:autoMirrored="true" android:height="24dp"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#000000" android:pathData="M12,16C12.53,16 13.039,16.211 13.414,16.586C13.789,16.961 14,17.47 14,18C14,18.53 13.789,19.039 13.414,19.414C13.039,19.789 12.53,20 12,20C11.47,20 10.961,19.789 10.586,19.414C10.211,19.039 10,18.53 10,18C10,17.47 10.211,16.961 10.586,16.586C10.961,16.211 11.47,16 12,16ZM12,10C12.53,10 13.039,10.211 13.414,10.586C13.789,10.961 14,11.47 14,12C14,12.53 13.789,13.039 13.414,13.414C13.039,13.789 12.53,14 12,14C11.47,14 10.961,13.789 10.586,13.414C10.211,13.039 10,12.53 10,12C10,11.47 10.211,10.961 10.586,10.586C10.961,10.211 11.47,10 12,10ZM12,4C12.53,4 13.039,4.211 13.414,4.586C13.789,4.961 14,5.47 14,6C14,6.53 13.789,7.039 13.414,7.414C13.039,7.789 12.53,8 12,8C11.47,8 10.961,7.789 10.586,7.414C10.211,7.039 10,6.53 10,6C10,5.47 10.211,4.961 10.586,4.586C10.961,4.211 11.47,4 12,4Z"/>
</vector>

View file

@ -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" />
<WebView

View file

@ -59,7 +59,7 @@
style="@style/OnboardingButton"
android:layout_height="wrap_content"
android:text="@string/onboarding_button_register_wallet"
app:icon="@drawable/ic_tangem"
app:icon="@drawable/ic_tangem_24"
app:iconGravity="textEnd" />
<ProgressBar

View file

@ -18,6 +18,6 @@
android:clickable="true"
android:focusable="true"
android:padding="16dp"
android:src="@drawable/ic_close" />
android:src="@drawable/ic_close_24" />
</FrameLayout>

View file

@ -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" />
<include
android:id="@+id/warning_content_container"

View file

@ -4,7 +4,7 @@
<item
android:id="@+id/details_menu"
android:title="@string/details_title"
android:icon="@drawable/ic_more_vertical"
android:icon="@drawable/ic_more_vertical_24"
app:iconTint="@color/darkGray6"
app:showAsAction="ifRoom" />
</menu>

View file

@ -55,6 +55,7 @@ dependencies {
/** Other libraries */
implementation(Library.accompanistSystemUiController)
implementation(Library.materialComponent)
implementation(Library.composeShimmer)
implementation(project(":core:res"))
}

View file

@ -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 */ },
)

View file

@ -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 = {},
)
}
}

View file

@ -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 <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=290%3A339&t=WdN5XpixzZLlQAZO-4"
* >Figma component</a>
*/
@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 <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=515%3A1541&t=qYGQJdtf1eeUPdkR-1"
* >Figma component</a>
*/
@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 <a href = "https://www.figma.com/file/Vs6SkVsFnUPsSCNwlnVf5U/Android-%E2%80%93-UI?node-id=1123%3A4040&t=izokIIb9WWetO32R-1"
* >Figma component</a>
*/
@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 <a href = "https://www.figma.com/file/Vs6SkVsFnUPsSCNwlnVf5U/Android-%E2%80%93-UI?node-id=1123%3A4040&t=izokIIb9WWetO32R-1"
* >Figma component</a>
*/
@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,
)
}
}
}
}
// 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

View file

@ -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)

View file

@ -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),

View file

@ -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 = {},
),
)

View file

@ -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</a>
*/
@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))

View file

@ -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
)

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
</vector>

View file

@ -1,5 +1,7 @@
<vector android:autoMirrored="true" android:height="24dp"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#000000" android:pathData="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
<path
android:fillColor="#000000"
android:pathData="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M12,20C14.122,20 16.157,19.157 17.657,17.657C19.157,16.157 20,14.122 20,12C20,9.878 19.157,7.843 17.657,6.343C16.157,4.843 14.122,4 12,4C9.878,4 7.843,4.843 6.343,6.343C4.843,7.843 4,9.878 4,12C4,14.122 4.843,16.157 6.343,17.657C7.843,19.157 9.878,20 12,20ZM12,2C13.313,2 14.614,2.259 15.827,2.761C17.04,3.264 18.142,4 19.071,4.929C20,5.858 20.736,6.96 21.239,8.173C21.741,9.386 22,10.687 22,12C22,14.652 20.946,17.196 19.071,19.071C17.196,20.946 14.652,22 12,22C6.47,22 2,17.5 2,12C2,9.348 3.054,6.804 4.929,4.929C6.804,3.054 9.348,2 12,2ZM12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z" />
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M12,17C12.53,17 13.039,16.789 13.414,16.414C13.789,16.039 14,15.53 14,15C14,13.89 13.1,13 12,13C11.47,13 10.961,13.211 10.586,13.586C10.211,13.961 10,14.47 10,15C10,15.53 10.211,16.039 10.586,16.414C10.961,16.789 11.47,17 12,17ZM18,8C18.53,8 19.039,8.211 19.414,8.586C19.789,8.961 20,9.47 20,10V20C20,20.53 19.789,21.039 19.414,21.414C19.039,21.789 18.53,22 18,22H6C5.47,22 4.961,21.789 4.586,21.414C4.211,21.039 4,20.53 4,20V10C4,8.89 4.9,8 6,8H7V6C7,4.674 7.527,3.402 8.464,2.464C9.402,1.527 10.674,1 12,1C12.657,1 13.307,1.129 13.913,1.381C14.52,1.632 15.071,2 15.535,2.464C16,2.929 16.368,3.48 16.619,4.087C16.871,4.693 17,5.343 17,6V8H18ZM12,3C11.204,3 10.441,3.316 9.879,3.879C9.316,4.441 9,5.204 9,6V8H15V6C15,5.204 14.684,4.441 14.121,3.879C13.559,3.316 12.796,3 12,3Z" />
</vector>

View file

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M17.65,6.35C16.2,4.9 14.21,4 12,4C9.878,4 7.843,4.843 6.343,6.343C4.843,7.843 4,9.878 4,12C4,14.122 4.843,16.157 6.343,17.657C7.843,19.157 9.878,20 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18C10.409,18 8.883,17.368 7.757,16.243C6.632,15.117 6,13.591 6,12C6,10.409 6.632,8.883 7.757,7.757C8.883,6.632 10.409,6 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
</vector>

View file

@ -1,15 +0,0 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="21dp"
android:height="20dp"
android:viewportWidth="21"
android:viewportHeight="20">
<path
android:pathData="M3.833,3.25C3.833,2.836 4.184,2.5 4.618,2.5H16.382C16.815,2.5 17.167,2.836 17.167,3.25V7H3.833V3.25Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M3.833,10H8.539V17.5H4.618C4.184,17.5 3.833,17.164 3.833,16.75V10Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M17.167,10H12.461V17.5H16.382C16.815,17.5 17.167,17.164 17.167,16.75V10Z"
android:fillColor="#ffffff"/>
</vector>

View file

@ -0,0 +1,16 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M4,3.9C4,3.403 4.421,3 4.941,3H19.059C19.579,3 20,3.403 20,3.9V8.4H4V3.9Z" />
<path
android:fillColor="#000000"
android:pathData="M4,12H9.647V21H4.941C4.421,21 4,20.597 4,20.1V12Z" />
<path
android:fillColor="#000000"
android:pathData="M20,12H14.353V21H19.059C19.579,21 20,20.597 20,20.1V12Z" />
</vector>

View file

@ -0,0 +1,16 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:autoMirrored="true"
android:viewportWidth="20"
android:viewportHeight="20">
<path
android:fillColor="#FFB71B"
android:pathData="M3.693,17.129H16.307C17.69,17.129 18.529,16.169 18.529,14.924C18.529,14.541 18.415,14.142 18.211,13.784L11.896,2.782C11.473,2.041 10.749,1.667 10,1.667C9.251,1.667 8.519,2.041 8.104,2.782L1.789,13.784C1.569,14.151 1.471,14.541 1.471,14.924C1.471,16.169 2.31,17.129 3.693,17.129Z" />
<path
android:fillColor="#ffffff"
android:pathData="M9.341,11.017C9.349,11.449 9.585,11.693 10.008,11.693C10.407,11.693 10.643,11.457 10.651,11.017L10.773,6.598C10.781,6.167 10.439,5.85 10,5.85C9.544,5.85 9.227,6.159 9.235,6.59L9.341,11.017Z" />
<path
android:fillColor="#ffffff"
android:pathData="M9.097,13.548C9.097,14.028 9.52,14.419 10.008,14.419C10.488,14.419 10.911,14.036 10.911,13.548C10.911,13.052 10.496,12.669 10.008,12.669C9.512,12.669 9.097,13.06 9.097,13.548Z" />
</vector>

View file

@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="22dp"
android:height="22dp"
android:autoMirrored="true"
android:viewportWidth="22"
android:viewportHeight="22">
<path
android:fillColor="#8247E5"
android:pathData="M11,0L11,0A11,11 0,0 1,22 11L22,11A11,11 0,0 1,11 22L11,22A11,11 0,0 1,0 11L0,11A11,11 0,0 1,11 0z" />
<path
android:fillColor="#ffffff"
android:pathData="M14.614,8.791C14.352,8.647 14.012,8.647 13.724,8.791L11.681,9.896L10.293,10.616L8.25,11.72C7.988,11.864 7.648,11.864 7.36,11.72L5.736,10.856C5.475,10.712 5.291,10.448 5.291,10.16V8.455C5.291,8.167 5.448,7.903 5.736,7.759L7.334,6.919C7.596,6.775 7.936,6.775 8.224,6.919L9.822,7.759C10.083,7.903 10.267,8.167 10.267,8.455V9.56L11.655,8.815V7.711C11.655,7.423 11.498,7.159 11.21,7.015L8.25,5.431C7.988,5.287 7.648,5.287 7.36,5.431L4.348,7.015C4.06,7.159 3.903,7.423 3.903,7.711V10.904C3.903,11.192 4.06,11.456 4.348,11.6L7.36,13.184C7.622,13.328 7.962,13.328 8.25,13.184L10.293,12.104L11.681,11.36L13.724,10.28C13.985,10.136 14.326,10.136 14.614,10.28L16.211,11.12C16.473,11.264 16.656,11.528 16.656,11.816V13.521C16.656,13.809 16.499,14.073 16.211,14.217L14.614,15.081C14.352,15.225 14.012,15.225 13.724,15.081L12.126,14.241C11.864,14.097 11.681,13.833 11.681,13.545V12.44L10.293,13.184V14.289C10.293,14.577 10.45,14.841 10.738,14.985L13.75,16.569C14.012,16.713 14.352,16.713 14.64,16.569L17.652,14.985C17.913,14.841 18.097,14.577 18.097,14.289V11.096C18.097,10.808 17.94,10.544 17.652,10.4L14.614,8.791Z" />
</vector>

View file

@ -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,
)
}

View file

@ -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))

View file

@ -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)
}
}