diff --git a/apps/flipcash/shared/theme/src/main/kotlin/com/flipcash/app/theme/FlipcashPreview.kt b/apps/flipcash/shared/theme/src/main/kotlin/com/flipcash/app/theme/FlipcashPreview.kt index c53cd09c7..81d5ce201 100644 --- a/apps/flipcash/shared/theme/src/main/kotlin/com/flipcash/app/theme/FlipcashPreview.kt +++ b/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) } -} \ No newline at end of file +} + +@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 \ No newline at end of file diff --git a/apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/CurrencyCreatorUpsellCard.kt b/apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/CurrencyCreatorUpsellCard.kt index e9400ab34..19f74d726 100644 --- a/apps/flipcash/shared/tokens/src/main/kotlin/com/flipcash/app/tokens/ui/CurrencyCreatorUpsellCard.kt +++ b/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 { } } \ No newline at end of file