Hey, I'm trying to replicate a UI in Jetpack Compo...

# compose-android

[Vivek Modi]

Hey, I'm trying to replicate a UI in Jetpack Compose where I display an instruction like:

[Vivek Modi]

1. Click the button below to copy the one time code.

Here are the style requirements:
• The number 1. should be in a different color, bigger in size.
• List item 1. spacing between 1 and dot .
• The phrase "one time code" should be bold.
• The rest of the sentence should use normal styling.
What is the best way to structure and style this text using Jetpack Compose? Should I use AnnotatedString, TextSpan, or is there a better approach?

[Vivek Modi]

@Composable
fun StepItem(number: String, text: String, styleCode: String) {
    Row(verticalAlignment = <http://Alignment.Top|Alignment.Top>, modifier = Modifier.padding(start = 20.dp)) {
        Text(
            text = number,
            style = MaterialTheme.typography.bodyMedium.copy(
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colorScheme.primary,
                fontSize = 20.sp
            ),
        )
        Text(
            buildAnnotatedString {
                append(text)
                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                    append(styleCode)
                }
            },
            style = MaterialTheme.typography.bodyMedium
        )
    }
}

[Vivek Modi]

Expected Output

[Vivek Modi]

Actual Output

[ephemient]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()