Updated on 2026-08-14

2024-07-01 16:39:42 +05:00 · 2024-07-01 16:39:42 +05:00 · f916d7394b
commit f916d7394b
parent 2d8d9453bd
21 changed files with 559 additions and 153 deletions
--- a/core/ui/src/main/java/com/tangem/core/ui/components/BoxWithGradient.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/BoxWithGradient.kt
@ -1,41 +0,0 @@
-package com.tangem.core.ui.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.dp
-import com.tangem.core.ui.res.TangemColorPalette
-import com.tangem.core.ui.res.TangemTheme
-
-@Composable
-fun BoxWithGradient(
-    modifier: Modifier = Modifier,
-    gradient: Brush = BottomGradient,
-    content: @Composable BoxScope.() -> Unit,
-) {
-    val bottomInsetsPx = WindowInsets.navigationBars.getBottom(LocalDensity.current)
-
-    Box(modifier = modifier.fillMaxSize()) {
-        content()
-        Box(
-            modifier = Modifier
-                .align(Alignment.BottomCenter)
-                .fillMaxWidth()
-                .height(TangemTheme.dimens.size164 + bottomInsetsPx.dp)
-                .background(gradient),
-        )
-    }
-}
-
-private val BottomGradient: Brush = Brush.verticalGradient(
-    colors = listOf(
-        TangemColorPalette.Black.copy(alpha = 0f),
-        TangemColorPalette.Black.copy(alpha = 0.75f),
-        TangemColorPalette.Black.copy(alpha = 0.95f),
-        TangemColorPalette.Black,
-    ),
-)
--- a/core/ui/src/main/java/com/tangem/core/ui/components/containers/FooterContainer.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/containers/FooterContainer.kt
@ -0,0 +1,39 @@
+package com.tangem.core.ui.components.containers
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import com.tangem.core.ui.res.TangemTheme
+
+/**
+ * Container for footer info below the text field
+ *
+ * @param modifier of component
+ * @param footer text
+ * @param footerTopPadding padding between footer and field
+ * @param content field content
+ */
+@Composable
+fun FooterContainer(
+    modifier: Modifier = Modifier,
+    footer: String? = null,
+    footerTopPadding: Dp = TangemTheme.dimens.spacing8,
+    content: @Composable () -> Unit,
+) {
+    Column(modifier = modifier) {
+        content()
+        AnimatedVisibility(visible = footer != null) {
+            Text(
+                text = footer.orEmpty(),
+                style = TangemTheme.typography.caption2,
+                color = TangemTheme.colors.text.tertiary,
+                modifier = Modifier
+                    .padding(top = footerTopPadding),
+            )
+        }
+    }
+}
--- a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowDefault.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowDefault.kt
@ -4,12 +4,16 @@ import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@ -20,8 +24,8 @@ import com.tangem.core.ui.R
 import com.tangem.core.ui.components.inputrow.inner.DividerContainer
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview

 /**
 * [InputRowDefault](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=2100-807&mode=design&t=86eKp9izWxUvmoCq-4)
@ -64,7 +68,7 @@ fun InputRowDefault(
            ) {
                Text(
                    text = title.resolveReference(),
-                    style = TangemTheme.typography.caption2,
+                    style = TangemTheme.typography.subtitle2,
                    color = titleColor,
                )
                Text(
@ -80,6 +84,7 @@ fun InputRowDefault(
                    contentDescription = null,
                    tint = iconTint,
                    modifier = Modifier
+                        .align(CenterVertically)
                        .padding(
                            top = TangemTheme.dimens.spacing10,
                            bottom = TangemTheme.dimens.spacing10,
--- a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageBase.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageBase.kt
@ -24,6 +24,7 @@ internal fun InputRowImageBase(
 ) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
        modifier = modifier,
    ) {
        InputRowAsyncImage(
@ -32,11 +33,7 @@ internal fun InputRowImageBase(
                .size(TangemTheme.dimens.spacing36)
                .padding(vertical = TangemTheme.dimens.size1),
        )
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .padding(start = TangemTheme.dimens.spacing12),
-        ) {
+        Column {
            Text(
                text = subtitle.resolveReference(),
                style = TangemTheme.typography.subtitle2,
--- a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageChevron.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageChevron.kt
@ -1,13 +1,20 @@
 package com.tangem.core.ui.components.inputrow

-import androidx.compose.material.Icon
+import android.content.res.Configuration
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.R
-import com.tangem.core.ui.extensions.TextReference
+import com.tangem.core.ui.components.SpacerWMax
+import com.tangem.core.ui.extensions.*
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview

 /**
 * Input row component with selector
@ -37,10 +44,36 @@ fun InputRowImageChevron(
        subtitleColor = subtitleColor,
        captionColor = captionColor,
    ) {
+        SpacerWMax()
        Icon(
            painter = painterResource(id = R.drawable.ic_chevron_right_24),
            tint = TangemTheme.colors.icon.informative,
            contentDescription = null,
        )
    }
-}
+}
+
+// region Preview
+@Preview(showBackground = true, widthDp = 360)
+@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun InputRowImageChevron_Preview() {
+    TangemThemePreview {
+        InputRowImageChevron(
+            subtitle = stringReference("Binance"),
+            caption = combinedReference(
+                resourceReference(R.string.staking_details_apr),
+                annotatedReference(
+                    buildAnnotatedString {
+                        append(" ")
+                        withStyle(SpanStyle(TangemTheme.colors.text.accent)) {
+                            stringReference("3,54%")
+                        }
+                    },
+                ),
+            ),
+            imageUrl = "",
+        )
+    }
+}
+// endregion
--- a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageInfo.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowImageInfo.kt
@ -0,0 +1,114 @@
+package com.tangem.core.ui.components.inputrow
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import com.tangem.core.ui.R
+import com.tangem.core.ui.components.atoms.text.EllipsisText
+import com.tangem.core.ui.extensions.*
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+
+/**
+ * Input row component with selector
+ * [Input Row Image](https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=2841-1589&t=u6pOF6lsdpvWLELb-4)
+ *
+ * @param title title text
+ * @param subtitle subtitle text
+ * @param caption caption text
+ * @param infoTitle info title text
+ * @param infoSubtitle info subtitle text
+ * @param modifier modifier
+ * @param imageUrl icon to load
+ * @param subtitleColor subtitle text color
+ * @param captionColor caption text color
+ */
+@Suppress("LongParameterList")
+@Composable
+fun InputRowImageInfo(
+    title: TextReference?,
+    subtitle: TextReference,
+    caption: TextReference,
+    infoTitle: TextReference,
+    infoSubtitle: TextReference,
+    imageUrl: String,
+    modifier: Modifier = Modifier,
+    subtitleColor: Color = TangemTheme.colors.text.primary1,
+    captionColor: Color = TangemTheme.colors.text.tertiary,
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing6),
+        modifier = modifier
+            .padding(TangemTheme.dimens.spacing12),
+    ) {
+        if (title != null) {
+            Text(
+                text = title.resolveReference(),
+                style = TangemTheme.typography.subtitle2,
+                color = TangemTheme.colors.text.tertiary,
+            )
+        }
+        InputRowImageBase(
+            subtitle = subtitle,
+            caption = caption,
+            imageUrl = imageUrl,
+            subtitleColor = subtitleColor,
+            captionColor = captionColor,
+        ) {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing2),
+                horizontalAlignment = Alignment.End,
+                modifier = Modifier.weight(1f),
+            ) {
+                EllipsisText(
+                    text = infoTitle.resolveReference(),
+                    style = TangemTheme.typography.body2,
+                    color = TangemTheme.colors.text.primary1,
+                )
+                EllipsisText(
+                    text = infoSubtitle.resolveReference(),
+                    style = TangemTheme.typography.caption2,
+                    color = TangemTheme.colors.text.tertiary,
+                )
+            }
+        }
+    }
+}
+
+// region Preview
+@Preview(showBackground = true, widthDp = 360)
+@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun InputRowImageInfo_Preview() {
+    TangemThemePreview {
+        InputRowImageInfo(
+            title = stringReference("Active"),
+            subtitle = stringReference("Binance"),
+            caption = combinedReference(
+                resourceReference(R.string.staking_details_apr),
+                annotatedReference(
+                    buildAnnotatedString {
+                        append(" ")
+                        withStyle(SpanStyle(TangemTheme.colors.text.accent)) {
+                            stringReference("3,54%")
+                        }
+                    },
+                ),
+            ),
+            infoTitle = stringReference("5431231231231231231231232 USD"),
+            infoSubtitle = stringReference("5 SOL"),
+            imageUrl = "",
+        )
+    }
+}
+// endregion
--- a/core/ui/src/main/java/com/tangem/core/ui/extensions/MarkdownExtension.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/extensions/MarkdownExtension.kt
@ -53,4 +53,6 @@ fun AnnotatedString.Builder.appendMarkdown(markdownText: String, node: ASTNode):
        }
    }
    return this
-}
+}
+
+fun AnnotatedString.Builder.appendSpace() = append(" ")