diff --git a/src/main/kotlin/org/briarproject/briar/desktop/login/StrengthMeter.kt b/src/main/kotlin/org/briarproject/briar/desktop/login/StrengthMeter.kt index 681b787b31a3be1ead69a55e87462cebc788f12b..08661c8fb737211474df981aeda091eddfa80184 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/login/StrengthMeter.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/login/StrengthMeter.kt @@ -20,30 +20,35 @@ package org.briarproject.briar.desktop.login import androidx.compose.animation.animateColorAsState import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn import androidx.compose.material.LinearProgressIndicator +import androidx.compose.material.MaterialTheme +import androidx.compose.material.OutlinedTextField import androidx.compose.material.ProgressIndicatorDefaults +import androidx.compose.material.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color +import androidx.compose.ui.draw.clip +import androidx.compose.ui.unit.dp import org.briarproject.bramble.api.crypto.PasswordStrengthEstimator.QUITE_STRONG import org.briarproject.bramble.api.crypto.PasswordStrengthEstimator.QUITE_WEAK -import org.briarproject.bramble.api.crypto.PasswordStrengthEstimator.STRONG -import org.briarproject.bramble.api.crypto.PasswordStrengthEstimator.WEAK +import org.briarproject.briar.desktop.theme.passwordStrengthMiddle +import org.briarproject.briar.desktop.theme.passwordStrengthStrong +import org.briarproject.briar.desktop.theme.passwordStrengthWeak import org.briarproject.briar.desktop.utils.PreviewUtils import org.briarproject.briar.desktop.utils.PreviewUtils.preview -val RED = Color(255, 0, 0) -val ORANGE = Color(255, 160, 0) -val YELLOW = Color(255, 255, 0) -val LIME = Color(180, 255, 0) -val GREEN = Color(0, 255, 0) - @Suppress("HardCodedStringLiteral") fun main() = preview( "strength" to PreviewUtils.FloatSlider(0f, 0f, 1f) ) { StrengthMeter(getFloatParameter("strength")) + Spacer(Modifier.height(8.dp)) + OutlinedTextField("test", {}) } @Composable @@ -52,11 +57,9 @@ fun StrengthMeter( modifier: Modifier = Modifier ) { val color = when { - strength < WEAK -> RED - strength < QUITE_WEAK -> ORANGE - strength < QUITE_STRONG -> YELLOW - strength < STRONG -> GREEN - else -> LIME + strength < QUITE_WEAK -> MaterialTheme.colors.passwordStrengthWeak + strength < QUITE_STRONG -> MaterialTheme.colors.passwordStrengthMiddle + else -> MaterialTheme.colors.passwordStrengthStrong } val animatedProgress by animateFloatAsState( targetValue = strength, @@ -67,5 +70,12 @@ fun StrengthMeter( progress = animatedProgress, color = animatedColor, modifier = modifier + .heightIn(min = 12.dp) + .clip(MaterialTheme.shapes.small) + .border( + width = 1.dp, + color = MaterialTheme.colors.onSurface.copy(alpha = TextFieldDefaults.UnfocusedIndicatorLineOpacity), + shape = MaterialTheme.shapes.small + ) ) } diff --git a/src/main/kotlin/org/briarproject/briar/desktop/theme/Colors.kt b/src/main/kotlin/org/briarproject/briar/desktop/theme/Colors.kt index 47e93d38f3899e71051dca5fe1aacb1f52875dbe..9992fe41a0ea679c511620ed0655ba000acb62d0 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/theme/Colors.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/theme/Colors.kt @@ -38,8 +38,11 @@ val Gray900 = Color(0xff2e2e2e) val Gray950 = Color(0xff1f1f1f) val materialDarkBg = Color(0xff121212) +val Red300 = Color(0xffea8271) val Red500 = Color(0xffdb3b21) + val Orange500 = Color(0xfffc9403) +val Orange700 = Color(0xffc26700) // taken from Android AppCompat DayNight theme as error colors // https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-appcompat-release/appcompat/appcompat/src/main/res/values/colors_material.xml#102 diff --git a/src/main/kotlin/org/briarproject/briar/desktop/theme/Theme.kt b/src/main/kotlin/org/briarproject/briar/desktop/theme/Theme.kt index b52d76067f330dd1f13db33a079b466979eb40be..07de8c74076bb9c6eb1f73d2f0f2859269f9b425 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/theme/Theme.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/theme/Theme.kt @@ -53,6 +53,9 @@ val Colors.buttonTextPositive: Color get() = Blue400 val Colors.warningBackground get() = Red500 val Colors.warningForeground get() = Color.White val Colors.sendButton get() = if (isLight) Lime700 else Lime500 +val Colors.passwordStrengthWeak get() = Red500 +val Colors.passwordStrengthMiddle get() = if (isLight) Orange700 else Orange500 +val Colors.passwordStrengthStrong get() = if (isLight) Lime700 else Lime500 val DarkColors = darkColors( primary = Blue500,