Updated on 2026-08-14

2024-02-09 13:42:08 +03:00 · 2024-02-09 13:42:08 +03:00 · cedf6872ac
commit cedf6872ac
parent e80b02306f
6 changed files with 103 additions and 55 deletions
--- 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,
--- 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),
            )
        }
    }
--- 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,
-)
+// 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
--- 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
@ -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,
+)
--- 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)
+    }
 }
--- 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(