diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt b/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt index 79a40b22a9..73a454fe10 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt @@ -170,7 +170,7 @@ private fun StoriesScreenContent(config: StoriesScreenContentConfig, modifier: M .padding(horizontal = TangemTheme.dimens.spacing16) .align(Alignment.BottomCenter) .fillMaxWidth(), - verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16), + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12), ) { AnimatedVisibility( visible = config.currentStory == Stories.Currencies, diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/views/HomeButtons.kt b/app/src/main/java/com/tangem/tap/features/home/compose/views/HomeButtons.kt index aebf48b161..0533961886 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/views/HomeButtons.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/HomeButtons.kt @@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding -import androidx.compose.material.ButtonColors import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -13,15 +12,11 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider -import com.tangem.core.ui.components.SpacerW8 -import com.tangem.core.ui.components.buttons.common.TangemButton -import com.tangem.core.ui.components.buttons.common.TangemButtonColors +import com.tangem.core.ui.components.SpacerW12 import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition -import com.tangem.core.ui.res.TangemColorPalette import com.tangem.core.ui.res.TangemTheme import com.tangem.wallet.R -@Suppress("MagicNumber") @Composable internal fun HomeButtons( btnScanStateInProgress: Boolean, @@ -38,7 +33,7 @@ internal fun HomeButtons( showProgress = btnScanStateInProgress, onClick = onScanButtonClick, ) - SpacerW8() + SpacerW12() OrderCardButton( modifier = Modifier.weight(weight = 1f), onClick = onShopButtonClick, @@ -48,44 +43,26 @@ internal fun HomeButtons( @Composable private fun ScanCardButton(showProgress: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier) { - TangemButton( + StoriesButton( modifier = modifier, text = stringResource(id = R.string.home_button_scan), + useDarkerColors = false, icon = TangemButtonIconPosition.End(iconResId = R.drawable.ic_tangem_24), - colors = LightBgScanCardButtonColors, - showProgress = showProgress, - enabled = true, onClick = onClick, + showProgress = showProgress, ) } @Composable private fun OrderCardButton(onClick: () -> Unit, modifier: Modifier = Modifier) { - TangemButton( + StoriesButton( modifier = modifier, text = stringResource(id = R.string.home_button_order), - icon = TangemButtonIconPosition.None, - colors = LightBgOrderCardButtonColors, - showProgress = false, - enabled = true, + useDarkerColors = true, onClick = onClick, ) } -private val LightBgScanCardButtonColors: ButtonColors = TangemButtonColors( - backgroundColor = TangemColorPalette.Light4, - contentColor = TangemColorPalette.Dark6, - disabledBackgroundColor = TangemColorPalette.Dark5, - disabledContentColor = TangemColorPalette.Dark6, -) - -private val LightBgOrderCardButtonColors: ButtonColors = TangemButtonColors( - backgroundColor = TangemColorPalette.Dark6, - contentColor = TangemColorPalette.White, - disabledBackgroundColor = TangemColorPalette.Dark6, - disabledContentColor = TangemColorPalette.White, -) - // region Preview @Preview(showBackground = true, widthDp = 360) @Composable @@ -95,10 +72,10 @@ private fun HomeButtonsPreview(@PreviewParameter(HomeButtonsParameterProvider::c modifier = Modifier.background(Color.Black), ) { HomeButtons( - modifier = Modifier.padding(all = TangemTheme.dimens.spacing16), btnScanStateInProgress = state.btnScanStateInProgress, onScanButtonClick = {}, onShopButtonClick = {}, + modifier = Modifier.padding(all = TangemTheme.dimens.spacing16), ) } } diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/views/SearchCurrenciesButton.kt b/app/src/main/java/com/tangem/tap/features/home/compose/views/SearchCurrenciesButton.kt index 722dd4f481..4e91ce98bc 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/views/SearchCurrenciesButton.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/SearchCurrenciesButton.kt @@ -1,31 +1,42 @@ package com.tangem.tap.features.home.compose.views -import androidx.compose.material.ButtonColors +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource -import com.tangem.core.ui.components.buttons.common.TangemButton -import com.tangem.core.ui.components.buttons.common.TangemButtonColors +import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition -import com.tangem.core.ui.res.TangemColorPalette +import com.tangem.core.ui.res.TangemTheme import com.tangem.wallet.R @Composable internal fun SearchCurrenciesButton(onClick: () -> Unit, modifier: Modifier = Modifier) { - TangemButton( + StoriesButton( modifier = modifier, text = stringResource(id = R.string.common_search_tokens), icon = TangemButtonIconPosition.Start(R.drawable.ic_search_24), - onClick = onClick, - colors = SearchCurrenciesButtonColors, showProgress = false, - enabled = true, + useDarkerColors = true, + onClick = onClick, ) } -private val SearchCurrenciesButtonColors: ButtonColors = TangemButtonColors( - backgroundColor = TangemColorPalette.Dark5, - contentColor = TangemColorPalette.White, - disabledBackgroundColor = TangemColorPalette.Dark5, - disabledContentColor = TangemColorPalette.White, -) \ No newline at end of file +// region Preview +@Preview(showBackground = true, widthDp = 360) +@Composable +private fun SearchCurrenciesButtonPreview() { + TangemTheme { + Box( + modifier = Modifier + .background(color = Color.Black) + .padding(all = TangemTheme.dimens.spacing16), + ) { + SearchCurrenciesButton(modifier = Modifier.fillMaxWidth(), onClick = {}) + } + } +} +// endregion Preview \ No newline at end of file diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesButton.kt b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesButton.kt new file mode 100644 index 0000000000..45b8745cca --- /dev/null +++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesButton.kt @@ -0,0 +1,51 @@ +package com.tangem.tap.features.home.compose.views + +import androidx.compose.material.ButtonColors +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.tangem.core.ui.components.buttons.common.TangemButton +import com.tangem.core.ui.components.buttons.common.TangemButtonColors +import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition +import com.tangem.core.ui.res.TangemColorPalette +import com.tangem.core.ui.res.TangemTheme + +@Composable +internal fun StoriesButton( + text: String, + useDarkerColors: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier, + icon: TangemButtonIconPosition = TangemButtonIconPosition.None, + showProgress: Boolean = false, +) { + TangemButton( + modifier = modifier, + text = text, + icon = icon, + colors = if (useDarkerColors) DarkerButtonColors else LighterButtonColors, + showProgress = showProgress, + enabled = true, + shape = TangemTheme.shapes.roundedCornersXMedium, + iconPadding = when (icon) { + is TangemButtonIconPosition.Start -> TangemTheme.dimens.spacing4 + is TangemButtonIconPosition.End, + is TangemButtonIconPosition.None, + -> TangemTheme.dimens.spacing8 + }, + onClick = onClick, + ) +} + +private val LighterButtonColors: ButtonColors = TangemButtonColors( + backgroundColor = TangemColorPalette.Light4, + contentColor = TangemColorPalette.Dark6, + disabledBackgroundColor = TangemColorPalette.Dark5, + disabledContentColor = TangemColorPalette.Dark6, +) + +private val DarkerButtonColors: ButtonColors = TangemButtonColors( + backgroundColor = TangemColorPalette.Dark4, + contentColor = TangemColorPalette.White, + disabledBackgroundColor = TangemColorPalette.Dark4, + disabledContentColor = TangemColorPalette.White, +) \ No newline at end of file diff --git a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt index a8a1fd7bc1..ef3514bce4 100644 --- a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt +++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt @@ -13,10 +13,10 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.components.SpacerW4 +import com.tangem.core.ui.res.TangemColorPalette import com.tangem.core.ui.res.TangemTheme import kotlinx.coroutines.delay @@ -30,7 +30,7 @@ fun StoriesProgressBar( stepDuration: Int = 8_000, onStepFinish: () -> Unit = {}, ) { - val progress = remember(currentStep) { Animatable(0f) } + val progress = remember(currentStep) { Animatable(initialValue = 0f) } val context = LocalContext.current val animatorSpeed = Settings.Global.getFloat( @@ -75,20 +75,21 @@ fun StoriesProgressBar( .height(TangemTheme.dimens.size2) .weight(1f) .clip(RoundedCornerShape(TangemTheme.dimens.radius2)) - .background(Color.White.copy(alpha = 0.4f)), + .background(TangemColorPalette.White.copy(alpha = .2f)), ) { Box( modifier = Modifier .clip(RoundedCornerShape(TangemTheme.dimens.radius2)) - .background(Color.White) - .fillMaxHeight().let { + .background(TangemColorPalette.White) + .fillMaxHeight() + .let { when (index) { currentStep -> it.fillMaxWidth(progress.value) - in 0..currentStep -> it.fillMaxWidth(1f) + in 0..currentStep -> it.fillMaxWidth(fraction = 1f) else -> it } }, - ) {} + ) } if (index != steps) { SpacerW4() @@ -100,5 +101,12 @@ fun StoriesProgressBar( @Preview @Composable private fun StoriesProgressBarPreview() { - StoriesProgressBar(steps = 3, currentStep = 2, paused = false) { } + Box( + modifier = Modifier + .wrapContentSize() + .background(TangemColorPalette.Black) + .padding(vertical = TangemTheme.dimens.spacing16), + ) { + StoriesProgressBar(steps = 5, currentStep = 3, paused = false) + } } \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/common/TangemButton.kt b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/common/TangemButton.kt index ae762b2803..c1d501e021 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/common/TangemButton.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/common/TangemButton.kt @@ -33,6 +33,7 @@ fun TangemButton( elevation: ButtonElevation = TangemButtonsDefaults.elevation, textStyle: TextStyle = TangemTheme.typography.button, shape: Shape = size.toShape(), + iconPadding: Dp = size.toIconPadding(), ) { Button( modifier = modifier.heightIn(min = size.toHeightDp()), @@ -47,7 +48,7 @@ fun TangemButton( ButtonContentContainer( buttonIcon = icon, - iconPadding = size.toIconPadding(), + iconPadding = iconPadding, showProgress = showProgress, progressIndicator = { CircularProgressIndicator(