Merge pull request #680 from code-payments/fix/currency-creator-upsell-card-image-overlap

fix(tokens): prevent bill image overlap on CurrencyCreatorUpsellCard

Author: bmc08gt

apps/flipcash/shared/theme/src/main/kotlin/com/flipcash/app/theme/FlipcashPreview.kt

@@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewWrapper
 import androidx.compose.ui.tooling.preview.PreviewWrapperProvider
 import com.getcode.animation.LocalSharedTransitionScope
@@ -66,4 +67,12 @@ class FlipcashThemeWrapper: PreviewWrapperProvider {
 
         Flipcash2DesignSystem(previewContent)
     }
-}
+}
+
+@Preview(name = "Samsung Galaxy Note 20", widthDp = 320, device = "id:Samsung Galaxy Note 20")
+@Preview(name = "Pixel 3", widthDp = 360, device = "id:pixel_3")
+@Preview(name = "Solana Seeker", widthDp = 415)
+@Preview(name = "Pixel 9a", widthDp = 412, device = "id:pixel_9a")
+@Preview(name = "Pixel 9 Pro XL", widthDp = 480, device = "id:pixel_9_pro_xl")
+@Preview(name = "Pixel 9 Pro Fold (closed)", widthDp = 443)
+annotation class MultiDevicePreview

apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/CurrencyCreatorUpsellCard.kt

@@ -2,36 +2,29 @@ package com.flipcash.app.tokens.ui
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.InlineTextContent
-import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.text.TextAutoSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowForward
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.Placeholder
-import androidx.compose.ui.text.PlaceholderVerticalAlign
-import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewWrapper
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.flipcash.app.theme.FlipcashThemeWrapper
+import com.flipcash.app.theme.MultiDevicePreview
 import com.flipcash.shared.tokens.R
 import com.getcode.theme.CodeTheme
 
@@ -49,53 +42,49 @@ fun CurrencyCreatorUpsellCard(
         shadowElevation = 0.dp,
         onClick = onClick
     ) {
-        Box(modifier = Modifier.fillMaxWidth()) {
-            val density = LocalDensity.current
-            var imageHeight by remember { mutableStateOf(0.dp) }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.Bottom
+        ) {
+            val screenWidth = CodeTheme.dimens.screenWidth
+            val imageWidthFraction = when {
+                screenWidth < 360.dp -> 0.28f
+                screenWidth < 420.dp -> 0.33f
+                else -> 0.38f
+            }
 
             Column(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .defaultMinSize(minHeight = imageHeight)
+                    .weight(1f)
                     .padding(
                         start = CodeTheme.dimens.grid.x3,
                         top = CodeTheme.dimens.grid.x3,
                         bottom = CodeTheme.dimens.grid.x3,
-                    ),
+                    )
+                    .align(Alignment.CenterVertically),
                 verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x1),
             ) {
-                val arrowId = "arrow"
-                val arrowSize = with(LocalDensity.current) {
-                    CodeTheme.dimens.staticGrid.x4.toSp()
-                }
-                val titleText = buildAnnotatedString {
-                    append(stringResource(R.string.action_createYourOwnCurrency))
-                    append(" ")
-                    appendInlineContent(arrowId)
-                }
-                Text(
-                    text = titleText,
-                    style = CodeTheme.typography.screenTitle,
-                    color = CodeTheme.colors.textMain,
-                    inlineContent = mapOf(
-                        arrowId to InlineTextContent(
-                            Placeholder(
-                                width = arrowSize,
-                                height = arrowSize,
-                                placeholderVerticalAlign = PlaceholderVerticalAlign.Center
-                            )
-                        ) {
-                            Icon(
-                                imageVector = Icons.AutoMirrored.Default.ArrowForward,
-                                contentDescription = null,
-                                tint = CodeTheme.colors.textMain,
-                            )
-                        }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x1)
+                ) {
+                    Text(
+                        modifier = Modifier.weight(1f, fill = false),
+                        text = stringResource(R.string.action_createYourOwnCurrency),
+                        style = CodeTheme.typography.screenTitle,
+                        color = CodeTheme.colors.textMain,
+                        maxLines = 1,
+                        autoSize = TextAutoSize.StepBased(minFontSize = 11.sp),
                     )
-                )
+                    Icon(
+                        modifier = Modifier.size(CodeTheme.dimens.staticGrid.x4),
+                        imageVector = Icons.AutoMirrored.Default.ArrowForward,
+                        contentDescription = null,
+                        tint = CodeTheme.colors.textMain,
+                    )
+                }
 
                 Text(
-                    modifier = Modifier.fillMaxWidth(0.65f),
                     text = stringResource(R.string.subtitle_createYourOwnCurrency),
                     style = CodeTheme.typography.textSmall,
                     color = CodeTheme.colors.textSecondary,
@@ -104,20 +93,18 @@ fun CurrencyCreatorUpsellCard(
 
             Image(
                 modifier = Modifier
-                    .align(Alignment.BottomEnd)
-                    .onSizeChanged { size ->
-                        imageHeight = with(density) { size.height.toDp() }
-                    },
+                    .fillMaxWidth(imageWidthFraction),
                 painter = painterResource(R.drawable.ic_bill_previews),
                 contentDescription = null,
+                contentScale = ContentScale.FillWidth,
             )
         }
     }
 }
 
-@Preview
+@MultiDevicePreview
 @PreviewWrapper(FlipcashThemeWrapper::class)
 @Composable
 private fun Preview_CurrencyCreatorUpsellCard() {
-    CurrencyCreatorUpsellCard() { }
+    CurrencyCreatorUpsellCard { }
 }