diff --git a/app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt b/app/src/main/java/to/bitkit/ui/components/HighlightLabel.kt new file mode 100644 index 0000000000..79a0c99620 --- /dev/null +++ b/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") + } +} diff --git a/app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt b/app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt index bc2c9fd170..e869412b23 100644 --- a/app/src/main/java/to/bitkit/ui/onboarding/CreateWalletWithPassphraseScreen.kt +++ b/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,14 +17,13 @@ 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 @@ -32,21 +31,19 @@ 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,