diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt index 2ca06231a1..a4c6913d1f 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt @@ -184,6 +184,7 @@ internal fun TextsBlock( subtitle: TextReference, subtitleColor: Color, modifier: Modifier = Modifier, + titleColor: Color = TangemTheme.colors.text.primary1, ) { Column(modifier = modifier) { val titleText = title?.resolveReference() @@ -191,7 +192,7 @@ internal fun TextsBlock( if (titleText != null) { Text( text = titleText, - color = TangemTheme.colors.text.primary1, + color = titleColor, style = TangemTheme.typography.button, ) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/RingPromoNotification.kt b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/RingPromoNotification.kt index dbbd0b0740..c40947749d 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/RingPromoNotification.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/RingPromoNotification.kt @@ -1,54 +1,52 @@ package com.tangem.core.ui.components.notifications +import android.content.res.Configuration import androidx.annotation.DrawableRes import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.runtime.Composable +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.layout.FixedScale +import androidx.compose.ui.layout.onSizeChanged +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import androidx.constraintlayout.compose.ConstraintLayout import com.tangem.core.ui.R import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.TangemColorPalette import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview @Composable fun RingPromoNotification(config: NotificationConfig, modifier: Modifier = Modifier) { - NotificationBaseContainer( - backgroundResId = requireNotNull(config.backgroundResId), - onCloseClick = config.onCloseClick, - modifier = modifier, - ) { - MainContent(title = config.title, subtitle = config.subtitle) - } -} + var textHeightDp by remember { mutableStateOf(0.dp) } -@Composable -private fun NotificationBaseContainer( - @DrawableRes backgroundResId: Int, - onCloseClick: (() -> Unit)?, - modifier: Modifier = Modifier, - content: @Composable BoxScope.() -> Unit, -) { Box( modifier = modifier - .requiredHeight(height = 78.dp) .fillMaxWidth() - .clip(shape = TangemTheme.shapes.roundedCornersXMedium), + .clip(shape = TangemTheme.shapes.roundedCornersXMedium) + .background(TangemColorPalette.Dark6), ) { - Image( - painter = painterResource(backgroundResId), - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier.fillMaxSize(), + PromoImage( + backgroundRes = config.backgroundResId, + iconRes = config.iconResId, + modifier = Modifier.height(textHeightDp), + ) + PromoText( + title = config.title, + subtitle = config.subtitle, + onSizeChange = { textHeightDp = it }, ) - - content() - CloseableIconButton( - onClick = onCloseClick, + onClick = config.onCloseClick, modifier = Modifier.align(alignment = Alignment.TopEnd), iconTint = TangemTheme.colors.icon.informative, ) @@ -56,25 +54,78 @@ private fun NotificationBaseContainer( } @Composable -private fun MainContent(title: TextReference?, subtitle: TextReference) { - Box { - Image( - painter = painterResource(id = R.drawable.img_card_with_ring), - contentDescription = null, - alignment = Alignment.TopStart, - contentScale = ContentScale.Crop, - modifier = Modifier - .padding(start = 9.dp, top = 11.dp) - .requiredWidth(width = 60.dp), - ) +private fun PromoImage(@DrawableRes backgroundRes: Int?, @DrawableRes iconRes: Int, modifier: Modifier = Modifier) { + if (backgroundRes == null) return + ConstraintLayout( + modifier = modifier, + ) { + val (background, image) = createRefs() + Image( + painter = painterResource(backgroundRes), + contentDescription = null, + contentScale = FixedScale(2f), + modifier = Modifier + .constrainAs(background) { + top.linkTo(parent.top) + start.linkTo(image.start) + end.linkTo(image.end) + }, + ) + Image( + painter = painterResource(id = iconRes), + contentDescription = null, + contentScale = ContentScale.FillWidth, + modifier = Modifier + .requiredWidth(width = 60.dp) + .wrapContentHeight(Alignment.Top, unbounded = true) + .constrainAs(image) { + top.linkTo(parent.top, 11.dp) + start.linkTo(parent.start, 9.dp) + }, + ) + } +} + +@Composable +private fun PromoText(title: TextReference?, subtitle: TextReference, onSizeChange: (Dp) -> Unit) { + val density = LocalDensity.current + + Box( + modifier = Modifier.onSizeChanged { + with(density) { onSizeChange(it.height.toDp()) } + }, + ) { TextsBlock( title = title, subtitle = subtitle, subtitleColor = TangemTheme.colors.text.tertiary, + titleColor = TangemTheme.colors.text.constantWhite, modifier = Modifier + .wrapContentHeight() .align(Alignment.CenterStart) .padding(start = 80.dp, top = 12.dp, end = 12.dp, bottom = 12.dp), ) } -} \ No newline at end of file +} + +// region Preview +@Preview(showBackground = true, widthDp = 360) +@Preview(showBackground = true, widthDp = 360, locale = "fr") +@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun RingPromoNotification_Preview() { + TangemThemePreview { + RingPromoNotification( + NotificationConfig( + title = resourceReference(id = R.string.ring_promo_title), + subtitle = resourceReference(id = R.string.ring_promo_text), + iconResId = R.drawable.img_card_with_ring, + backgroundResId = R.drawable.img_ring_promo_background, + onCloseClick = { }, + ), + ) + } +} + +// endregion \ No newline at end of file diff --git a/core/ui/src/main/res/drawable/img_ring_promo_background.webp b/core/ui/src/main/res/drawable/img_ring_promo_background.webp new file mode 100644 index 0000000000..aa5ae8be39 Binary files /dev/null and b/core/ui/src/main/res/drawable/img_ring_promo_background.webp differ diff --git a/features/wallet/impl/src/main/res/drawable/img_ring_promo_background.webp b/features/wallet/impl/src/main/res/drawable/img_ring_promo_background.webp deleted file mode 100644 index c427a78985..0000000000 Binary files a/features/wallet/impl/src/main/res/drawable/img_ring_promo_background.webp and /dev/null differ