Create and implement HighlightLabel in Passphrase screen

app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt

@@ -0,0 +1,124 @@
+package to.bitkit.ui.components
+
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import to.bitkit.R
+import to.bitkit.ui.theme.AppThemeSurface
+import to.bitkit.ui.theme.Colors.Brand
+
+val mainRectHeight = 26.dp
+
+@Composable
+fun HighlightLabel(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    val density = LocalDensity.current
+    val triangleWidth = 13.dp
+    val triangleWidthPx = with(density) { triangleWidth.toPx() }
+    val logoHeight = 42.dp
+    val mainRectHeightPx = with(density) { mainRectHeight.toPx() }
+    val logoHeightPx = with(density) { logoHeight.toPx() }
+
+    Row(
+        modifier = modifier.height(logoHeight),
+        verticalAlignment = Alignment.Top
+    ) {
+        // Left triangles
+        Canvas(
+            modifier = Modifier
+                .width(triangleWidth)
+                .fillMaxHeight()
+        ) {
+            // Top left triangle
+            drawPath(
+                path = Path().apply {
+                    moveTo(0f, 0f)
+                    lineTo(triangleWidthPx, triangleWidthPx)
+                    lineTo(triangleWidthPx, 0f)
+                    close()
+                },
+                color = Brand
+            )
+
+            // Bottom left triangle
+            drawPath(
+                path = Path().apply {
+                    moveTo(0f, mainRectHeightPx)
+                    lineTo(triangleWidthPx, triangleWidthPx)
+                    lineTo(triangleWidthPx, mainRectHeightPx)
+                    close()
+                },
+                color = Brand
+            )
+        }
+
+        // Text with background
+        Box(
+            modifier = Modifier
+                .height(mainRectHeight)
+                .wrapContentWidth()
+                .drawBehind {
+                    // Main rectangle (flexible width based on text)
+                    drawRect(
+                        color = Brand,
+                        size = Size(this.size.width, this.size.height)
+                    )
+
+                    // Top right triangle (semi-transparent)
+                    if (this.size.width > 0) {
+                        drawPath(
+                            path = Path().apply {
+                                val startX = this@drawBehind.size.width - triangleWidthPx
+                                moveTo(startX, this@drawBehind.size.height)
+                                lineTo(this@drawBehind.size.width, logoHeightPx)
+                                lineTo(this@drawBehind.size.width, this@drawBehind.size.height)
+                                close()
+                            },
+                            color = Brand.copy(alpha = 0.5f)
+                        )
+                    }
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            Caption13Up(
+                text = text,
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+            )
+        }
+    }
+}
+
+// Usage example
+@Preview(showBackground = true)
+@Composable
+fun FlexibleLogoPreview() {
+    AppThemeSurface {
+        HighlightLabel(text = stringResource(R.string.onboarding__advanced))
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun LongTextLogoPreview() {
+    AppThemeSurface {
+        HighlightLabel(text = "NOT YOUR KEYS, NOT YOUR COINS")
+    }
+}

app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt

@@ -3,12 +3,12 @@ package to.bitkit.ui.onboarding
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
@@ -17,36 +17,33 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults.MediumAppBarCollapsedHeight
 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.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import to.bitkit.R
 import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.Display
+import to.bitkit.ui.components.HighlightLabel
 import to.bitkit.ui.components.PrimaryButton
+import to.bitkit.ui.components.mainRectHeight
 import to.bitkit.ui.theme.AppTextFieldDefaults
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
@@ -63,18 +60,30 @@ fun CreateWalletWithPassphraseScreen(
     Box(
         modifier = Modifier.fillMaxSize(),
     ) {
-        TopAppBar(
-            title = {},
-            navigationIcon = {
-                IconButton(onClick = onBackClick) {
-                    Icon(
-                        imageVector = Icons.AutoMirrored.Default.ArrowBack,
-                        contentDescription = stringResource(R.string.common__back),
-                        modifier = Modifier.size(24.dp)
-                    )
-                }
-            },
-        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.Bottom
+        ) {
+            TopAppBar(
+                title = {},
+                navigationIcon = {
+                    IconButton(onClick = onBackClick) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Default.ArrowBack,
+                            contentDescription = stringResource(R.string.common__back),
+                            modifier = Modifier.size(24.dp)
+                        )
+                    }
+                },
+                modifier = Modifier.weight(1f)
+            )
+
+            HighlightLabel(
+                stringResource(R.string.onboarding__advanced).uppercase(),
+                Modifier
+                    .padding(top = MediumAppBarCollapsedHeight / 2 - (mainRectHeight / 2))
+            )
+        }
         Column(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
@@ -83,6 +92,7 @@ fun CreateWalletWithPassphraseScreen(
                 .imePadding()
                 .verticalScroll(rememberScrollState())
         ) {
+            Spacer(modifier = Modifier.height(MediumAppBarCollapsedHeight))
             Image(
                 painter = painterResource(id = R.drawable.padlock2),
                 contentDescription = null,