Updated on 2026-08-14

2023-01-10 20:26:26 +03:00 · 2023-01-10 20:26:26 +03:00 · 28c593bd60
commit 28c593bd60
parent 214ab75914 b7ce5f50d0
137 changed files with 1098 additions and 607 deletions
--- 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
@ -336,4 +336,19 @@ fun Preview_InfoCardWithWarning_InDarkTheme() {
    }
 }

+@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")
+    }
+}
 // endregion Preview
--- 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
@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@ -16,11 +15,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.R
 import com.tangem.core.ui.components.appbar.models.AdditionalButton
-import com.tangem.core.ui.res.IconColorType
 import com.tangem.core.ui.res.TangemTheme
-import com.tangem.core.ui.res.TextColorType
-import com.tangem.core.ui.res.iconColor
-import com.tangem.core.ui.res.textColor

 /**
 * App bar with title and two additional buttons
@ -49,7 +44,7 @@ fun AppBarWithAdditionalButtons(
                    painter = painterResource(id = startButton.iconRes),
                    contentDescription = null,
                    modifier = Modifier.size(TangemTheme.dimens.size24),
-                    tint = MaterialTheme.colors.iconColor(type = IconColorType.PRIMARY1),
+                    tint = TangemTheme.colors.icon.primary1,
                )
            }
        }
@ -57,9 +52,9 @@ fun AppBarWithAdditionalButtons(
        Text(
            text = text,
            modifier = Modifier.align(Alignment.Center),
-            color = MaterialTheme.colors.textColor(type = TextColorType.PRIMARY1),
+            color = TangemTheme.colors.text.primary1,
            maxLines = 1,
-            style = MaterialTheme.typography.subtitle1,
+            style = TangemTheme.typography.subtitle1,
        )

        if (endButton != null) {
@ -68,7 +63,7 @@ fun AppBarWithAdditionalButtons(
                    painter = painterResource(id = endButton.iconRes),
                    contentDescription = null,
                    modifier = Modifier.size(TangemTheme.dimens.size24),
-                    tint = MaterialTheme.colors.iconColor(type = IconColorType.PRIMARY1),
+                    tint = TangemTheme.colors.icon.primary1,
                )
            }
        }
--- 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
@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@ -37,7 +36,7 @@ fun AppBarWithBackButton(
 ) {
    Row(
        modifier = Modifier
-            .background(MaterialTheme.colors.primary)
+            .background(color = TangemTheme.colors.background.secondary)
            .fillMaxWidth()
            .padding(all = dimensionResource(R.dimen.spacing16)),
        horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.spacing16)),
@ -49,14 +48,91 @@ fun AppBarWithBackButton(
            modifier = Modifier
                .size(size = dimensionResource(R.dimen.size24))
                .clickable { onBackClick() },
-            tint = MaterialTheme.colors.onPrimary,
+            tint = TangemTheme.colors.icon.primary1,
        )
        if (!text.isNullOrBlank()) {
            Text(
                text = text,
-                color = MaterialTheme.colors.onPrimary,
+                color = TangemTheme.colors.text.primary1,
                maxLines = 1,
-                style = MaterialTheme.typography.subtitle1,
+                style = TangemTheme.typography.subtitle1,
+            )
+        }
+    }
+}
+
+@Preview(widthDp = 360, heightDp = 56, showBackground = true)
+@Composable
+fun PreviewAppBarWithBackButtonInLightTheme() {
+    TangemTheme(isDark = false) {
+        AppBarWithBackButton(text = "Title", onBackClick = {})
+    }
+}
+
+@Preview(widthDp = 360, heightDp = 56, showBackground = true)
+@Composable
+fun PreviewAppBarWithBackButtonInDarkTheme() {
+    TangemTheme(isDark = true) {
+        AppBarWithBackButton(text = "Title", onBackClick = {})
+    }
+}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
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+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
+
+/**
+ * App bar with back button and optional title
+ *
+ * @param text        optional title
+ * @param onBackClick the lambda to be invoked when this icon is pressed
+ *
+ * @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=123%3A287&t=WdN5XpixzZLlQAZO-4"
+ * >Figma component</a>
+ */
+@Composable
+fun AppBarWithBackButton(
+    text: String? = null,
+    @DrawableRes iconRes: Int? = null,
+    onBackClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .background(color = TangemTheme.colors.background.secondary)
+            .fillMaxWidth()
+            .padding(all = dimensionResource(R.dimen.spacing16)),
+        horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.spacing16)),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            painter = painterResource(iconRes ?: R.drawable.ic_back_24),
+            contentDescription = null,
+            modifier = Modifier
+                .size(size = dimensionResource(R.dimen.size24))
+                .clickable { onBackClick() },
+            tint = TangemTheme.colors.icon.primary1,
+        )
+        if (!text.isNullOrBlank()) {
+            Text(
+                text = text,
+                color = TangemTheme.colors.text.primary1,
+                maxLines = 1,
+                style = TangemTheme.typography.subtitle1,
            )
        }
    }
--- a/core/ui/src/main/java/com/tangem/core/ui/components/atoms/BottomSheetIndicator.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/atoms/BottomSheetIndicator.kt
@ -1,61 +0,0 @@
-package com.tangem.core.ui.components.atoms
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.MaterialTheme
-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.tooling.preview.Preview
-import com.tangem.core.ui.R
-import com.tangem.core.ui.res.IconColorType
-import com.tangem.core.ui.res.TangemTheme
-import com.tangem.core.ui.res.iconColor
-
-/**
- * Bottom sheet indicator
- *
- * @see <a href="https://www.figma.com/file/17JyRbuUEZ42DluaFEuGQk/Atoms?node-id=135%3A25&t=3dvxYMZBox4jxJc1-4">
- * Figma Component</a>
- */
-@Deprecated(message = "Use Hand component instead")
-@Composable
-fun BottomSheetIndicator() {
-    Box(
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(TangemTheme.dimens.size20),
-        contentAlignment = Alignment.Center,
-    ) {
-        Box(
-            modifier = Modifier
-                .width(TangemTheme.dimens.size32)
-                .height(TangemTheme.dimens.size4)
-                .background(
-                    color = MaterialTheme.colors.iconColor(type = IconColorType.INACTIVE),
-                    shape = RoundedCornerShape(TangemTheme.dimens.radius2),
-                ),
-        )
-    }
-}
-
-@Preview(heightDp = 20, showBackground = true)
-@Composable
-fun Preview_BottomSheetIndicator_InLightTheme() {
-    TangemTheme(isDark = false) {
-        BottomSheetIndicator()
-    }
-}
-
-@Preview(heightDp = 20, showBackground = true)
-@Composable
-fun Preview_BottomSheetIndicator_InDarkTheme() {
-    TangemTheme(isDark = true) {
-        BottomSheetIndicator()
-    }
-}