zurche

Column(modifier = Modifier.padding(top = 50.dp, start = 30.dp)) {
    Text(
        text = "My Crypto Cap",
        color = Color.White,
        style = MaterialTheme.typography.displaySmall,
        fontWeight = FontWeight.ExtraLight
    )

    Text(
        text = "${data.value} ${data.currency}",

zurche

data class MyCryptoCapUIData(
    val value: Float,
    val currency: String,
    val monthlyPreview: List<Pair<String, Float>> //<---- NEW
)

private val mockData =
    MyCryptoCapUIData(
        38546.82f,
        "USD",

zurche

//...
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(verticalOrangeGradient)
            .drawBehind { drawCurvyLine() } //<--- NEW
    ) {
        Column(modifier = Modifier.padding(top = 50.dp, start = 30.dp)) {
//...

zurche

private fun DrawScope.drawCurvyLine() {
    val stroke = Path().apply {
        moveTo(size.width.times(.9f), size.height.times(0f))

        quadraticBezierTo(
            size.width.times(.9f), size.height.times(.28f),
            size.width.times(.73f), size.height.times(.15f)
        )

        quadraticBezierTo(

zurche

val stroke = Path().apply {
    moveTo(size.width.times(.9f), size.height.times(0f))

    quadraticBezierTo(
        size.width.times(.9f), size.height.times(.28f),
        size.width.times(.73f), size.height.times(.15f)
    )

    quadraticBezierTo(
        size.width.times(.53f), size.height.times(0f),

zurche

//...
val stroke = Path().apply {
    moveTo(size.width.times(.9f), size.height.times(0f))
//...

zurche

//...
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(verticalOrangeGradient)
                .drawBehind { 
                    // Here we can access the DrawScope of our Box
                }
//...

zurche

//...
            Column(modifier = Modifier.padding(top = 50.dp, start = 30.dp)) { //<-- Adding padding
                Text(
                    text = "My Crypto Cap",
                    color = Color.White,
                    style = MaterialTheme.typography.displaySmall,
                    fontWeight = FontWeight.ExtraLight //<-- Updating font weight
                )

                Text(

zurche

//...
            Column {
                Text(
                    text = "My Crypto Cap",
                    color = Color.White,
                    style = MaterialTheme.typography.displaySmall
                )

                Text(
                    text = "${data.value} ${data.currency}",

zurche

//...

private val mockData = MyCryptoCapUIData(38546.82f, "USD")

@Composable
fun CTAMyCryptoCap(modifier: Modifier = Modifier, data: MyCryptoCapUIData = mockData) {
  
//...