Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/components/FadeModifier.kt

@@ -93,6 +93,39 @@ fun Modifier.topFade(
     solidStop = solidStop,
 )
 
+/**
+ * Draws a vertical gradient fade over the top edge with custom [colorStops].
+ *
+ * Stops are defined relative to [height] (0f = top, 1f = bottom of the fade region).
+ *
+ * Note: the gradient is drawn over the entire content area, so the last color stop's color
+ * extends below the fade region down to the bottom. Pass [Color.Transparent] as the last stop
+ * (or a color matching the underlying content) to avoid covering the area outside the fade.
+ */
+@Composable
+fun Modifier.topFade(height: Dp, vararg colorStops: Pair<Float, Color>): Modifier = composed {
+    drawWithContent {
+        drawContent()
+
+        if (this.size.height <= 0f) return@drawWithContent
+        val fraction = (height.toPx() / this.size.height).coerceIn(0f, 1f)
+        if (fraction <= 0f) return@drawWithContent
+
+        val (start, end) = this.size.getFadeOffsets(FadePosition.TOP)
+
+        drawRect(
+            brush = Brush.linearGradient(
+                colorStops = colorStops
+                    .map { (stop, color) -> stop.coerceIn(0f, 1f) * fraction to color }
+                    .toTypedArray(),
+                start = start,
+                end = end,
+            ),
+            size = this.size,
+        )
+    }
+}
+
 enum class FadePosition {
     TOP, BOTTOM, LEFT, RIGHT
 }

core/ui/src/main/java/com/tangem/core/ui/components/account/AccountIcon.kt

@@ -21,6 +21,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -28,9 +29,10 @@ import androidx.compose.ui.unit.sp
 import com.tangem.core.ui.R
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.core.ui.res.TangemThemePreviewRedesign
 
 enum class AccountIconSize {
-    Default, Large, Medium, Small, ExtraSmall, RedesignedDefault
+    Default, Large, Medium, Small, ExtraSmall, RedesignedDefault, RedesignExtraSmall
 }
 
 /**
@@ -129,6 +131,7 @@ fun AccountCharIcon(char: Char, color: Color, size: AccountIconSize, modifier: M
         AccountIconSize.Small -> TangemTheme.typography.subtitle2
         AccountIconSize.ExtraSmall -> TangemTheme.typography.caption1
         AccountIconSize.RedesignedDefault -> TangemTheme.typography2.headingSemibold28
+        AccountIconSize.RedesignExtraSmall -> TangemTheme.typography2.captionMedium11
     }
 
     val textSize by animateFloatAsState(
@@ -148,6 +151,7 @@ fun AccountCharIcon(char: Char, color: Color, size: AccountIconSize, modifier: M
             text = char.uppercase(),
             style = textStyle.copy(fontSize = textSize.sp),
             color = TangemTheme.colors.text.constantWhite,
+            textAlign = TextAlign.Center,
         )
     }
 }
@@ -161,6 +165,7 @@ private fun AccountIconSize.iconSizeInDp(): Dp = when (this) {
     AccountIconSize.Small -> 12.dp
     AccountIconSize.ExtraSmall -> 8.dp
     AccountIconSize.RedesignedDefault -> 20.dp
+    AccountIconSize.RedesignExtraSmall -> 8.dp
 }
 
 fun AccountIconSize.toBoxSize(): Dp = when (this) {
@@ -170,6 +175,7 @@ fun AccountIconSize.toBoxSize(): Dp = when (this) {
     AccountIconSize.Small -> 20.dp
     AccountIconSize.ExtraSmall -> 14.dp
     AccountIconSize.RedesignedDefault -> 40.dp
+    AccountIconSize.RedesignExtraSmall -> 16.dp
 }
 
 private fun AccountIconSize.boxShapeSizeInDp(): Dp = when (this) {
@@ -179,6 +185,7 @@ private fun AccountIconSize.boxShapeSizeInDp(): Dp = when (this) {
     AccountIconSize.Small -> 6.dp
     AccountIconSize.ExtraSmall -> 4.dp
     AccountIconSize.RedesignedDefault -> 12.dp
+    AccountIconSize.RedesignExtraSmall -> 6.dp
 }
 
 @Preview(showBackground = true)
@@ -194,6 +201,19 @@ private fun Preview() {
     }
 }
 
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun PreviewRedesigned() {
+    TangemThemePreviewRedesign {
+        Row(
+            modifier = Modifier.background(TangemTheme.colors.background.primary),
+        ) {
+            Sample()
+        }
+    }
+}
+
 @Composable
 private fun Sample() {
     var sizeState by remember { mutableStateOf(AccountIconSize.ExtraSmall) }
@@ -206,8 +226,9 @@ private fun Sample() {
                 AccountIconSize.Large -> AccountIconSize.Medium
                 AccountIconSize.Medium -> AccountIconSize.Small
                 AccountIconSize.Small -> AccountIconSize.ExtraSmall
-                AccountIconSize.ExtraSmall -> AccountIconSize.Default
-                AccountIconSize.RedesignedDefault -> AccountIconSize.Large
+                AccountIconSize.ExtraSmall -> AccountIconSize.RedesignedDefault
+                AccountIconSize.RedesignedDefault -> AccountIconSize.RedesignExtraSmall
+                AccountIconSize.RedesignExtraSmall -> AccountIconSize.Default
             }
         }) { Text("Change") }
 
@@ -225,5 +246,6 @@ private fun Sample() {
         AccountCharIcon(char = 'M', color = Color.Magenta, size = AccountIconSize.Medium)
         AccountCharIcon(char = 'S', color = Color.DarkGray, size = AccountIconSize.Small)
         AccountCharIcon(char = 'E', color = Color.Green, size = AccountIconSize.ExtraSmall)
+        AccountCharIcon(char = 'D', color = Color.LightGray, size = AccountIconSize.RedesignExtraSmall)
     }
 }