From 47aec5578c2195ce7129919491ba056a0407125c Mon Sep 17 00:00:00 2001 From: Jonatan Rhodin Date: Fri, 29 Sep 2023 17:04:17 +0200 Subject: [PATCH] Unify button appearance - Make almost all button depend on 3 standard buttons - Replace surface and onSurface with our own custom theme color --- .../mullvadvpn/compose/button/ActionButton.kt | 51 ----- .../compose/button/ConnectionButton.kt | 8 +- .../button/DeviceRevokedLoginButton.kt | 15 ++ .../compose/button/ExternalActionButton.kt | 55 +---- .../compose/button/MullvadButton.kt | 208 ++++++++++++++++++ .../compose/button/RedeemVoucherButton.kt | 20 +- .../compose/button/SitePaymentButton.kt | 20 +- .../compose/button/SwitchLocationButton.kt | 36 +-- .../mullvadvpn/compose/cell/CustomPortCell.kt | 7 +- .../compose/cell/ExpandableComposeCell.kt | 4 +- .../compose/cell/InformationComposeCell.kt | 8 +- .../compose/cell/RelayLocationCell.kt | 9 +- .../mullvadvpn/compose/cell/SelectableCell.kt | 7 +- .../compose/component/LocationInfo.kt | 6 +- .../compose/component/Scaffolding.kt | 2 +- .../mullvadvpn/compose/component/Switch.kt | 10 +- .../compose/dialog/ChangelogDialog.kt | 12 +- .../compose/dialog/CustomPortDialog.kt | 35 +-- .../compose/dialog/DeviceRemovalDialog.kt | 55 +---- .../mullvadvpn/compose/dialog/DnsDialog.kt | 126 +++++------ .../mullvadvpn/compose/dialog/InfoDialog.kt | 10 +- .../mullvadvpn/compose/dialog/MtuDialog.kt | 32 +-- .../compose/screen/AccountScreen.kt | 28 +-- .../compose/screen/ConnectScreen.kt | 2 +- .../compose/screen/DeviceListScreen.kt | 26 +-- .../compose/screen/DeviceRevokedScreen.kt | 20 +- .../mullvadvpn/compose/screen/LoginScreen.kt | 20 +- .../compose/screen/OutOfTimeScreen.kt | 12 +- .../compose/screen/PrivacyDisclaimerScreen.kt | 12 +- .../compose/screen/WelcomeScreen.kt | 4 +- .../compose/textfield/CustomTextField.kt | 4 +- .../compose/textfield/SearchTextField.kt | 2 +- .../net/mullvad/mullvadvpn/lib/theme/Theme.kt | 9 + .../mullvadvpn/lib/theme/{ => color}/Color.kt | 14 +- 34 files changed, 412 insertions(+), 477 deletions(-) delete mode 100644 android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ActionButton.kt create mode 100644 android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/DeviceRevokedLoginButton.kt create mode 100644 android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt rename android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/{ => color}/Color.kt (81%) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ActionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ActionButton.kt deleted file mode 100644 index faf7052d4fa4..000000000000 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ActionButton.kt +++ /dev/null @@ -1,51 +0,0 @@ -package net.mullvad.mullvadvpn.compose.button - -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.RowScope -import androidx.compose.foundation.layout.defaultMinSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonColors -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import net.mullvad.mullvadvpn.lib.theme.Dimens - -@Composable -fun ActionButton( - onClick: () -> Unit, - colors: ButtonColors, - modifier: Modifier = Modifier, - text: String = "", - isEnabled: Boolean = true, - content: @Composable RowScope.() -> Unit = { - Text( - text = text, - textAlign = TextAlign.Center, - fontSize = 18.sp, - fontWeight = FontWeight.Bold - ) - } -) { - Button( - onClick = onClick, - enabled = isEnabled, - // Required along with defaultMinSize to control size and padding. - contentPadding = PaddingValues(0.dp), - modifier = - modifier - .height(Dimens.buttonHeight) - .defaultMinSize(minWidth = 0.dp, minHeight = Dimens.buttonHeight) - .fillMaxWidth(), - colors = colors, - shape = MaterialTheme.shapes.small - ) { - content() - } -} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt index 78521592478f..b5b962c9af13 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt @@ -25,9 +25,11 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.AlphaDisconnectButton import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisconnectButton +import net.mullvad.mullvadvpn.lib.theme.color.onVariant +import net.mullvad.mullvadvpn.lib.theme.color.variant import net.mullvad.mullvadvpn.model.TunnelState @Composable @@ -42,14 +44,14 @@ fun ConnectionButton( ) { val containerColor = if (state is TunnelState.Disconnected) { - MaterialTheme.colorScheme.surface + MaterialTheme.colorScheme.variant } else { MaterialTheme.colorScheme.error.copy(alpha = AlphaDisconnectButton) } val contentColor = if (state is TunnelState.Disconnected) { - MaterialTheme.colorScheme.onSurface + MaterialTheme.colorScheme.onVariant } else { MaterialTheme.colorScheme.onError } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/DeviceRevokedLoginButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/DeviceRevokedLoginButton.kt new file mode 100644 index 000000000000..7ba80f09d8a4 --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/DeviceRevokedLoginButton.kt @@ -0,0 +1,15 @@ +package net.mullvad.mullvadvpn.compose.button + +import androidx.compose.runtime.Composable +import androidx.compose.ui.res.stringResource +import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.compose.state.DeviceRevokedUiState + +@Composable +fun DeviceRevokedLoginButton(onClick: () -> Unit, state: DeviceRevokedUiState) { + if (state == DeviceRevokedUiState.SECURED) { + NegativeButton(text = stringResource(id = R.string.go_to_login), onClick = onClick) + } else { + VariantButton(text = stringResource(id = R.string.go_to_login), onClick = onClick) + } +} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt index d3945f70698b..532d127c7808 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt @@ -1,70 +1,29 @@ package net.mullvad.mullvadvpn.compose.button -import androidx.compose.foundation.Image -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.padding -import androidx.compose.material3.ButtonColors -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.alpha -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview -import androidx.constraintlayout.compose.ConstraintLayout import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme -import net.mullvad.mullvadvpn.lib.theme.Dimens @Preview @Composable -private fun PreviewExternalActionButton() { - AppTheme { - ExternalActionButton(onClick = {}, colors = ButtonDefaults.buttonColors(), text = "Button") - } +private fun PreviewExternalButton() { + AppTheme { ExternalButton(onClick = {}, text = "Button") } } @Composable -fun ExternalActionButton( +fun ExternalButton( onClick: () -> Unit, - colors: ButtonColors, text: String, modifier: Modifier = Modifier, isEnabled: Boolean = true, ) { - ActionButton( + VariantButton( + text = text, onClick = onClick, - colors = colors, modifier = modifier, isEnabled = isEnabled, - ) { - ConstraintLayout(modifier = Modifier.fillMaxSize()) { - val (title, logo) = createRefs() - Text( - text = text, - textAlign = TextAlign.Center, - style = MaterialTheme.typography.bodyMedium, - modifier = - Modifier.constrainAs(title) { - end.linkTo(logo.start) - centerTo(parent) - } - ) - Image( - painter = painterResource(id = R.drawable.icon_extlink), - contentDescription = null, - modifier = - Modifier.constrainAs(logo) { - centerVerticallyTo(parent) - end.linkTo(parent.end) - } - .padding(horizontal = Dimens.smallPadding) - .alpha(if (isEnabled) AlphaVisible else AlphaDisabled) - ) - } - } + icon = R.drawable.icon_extlink, + ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt new file mode 100644 index 000000000000..0b2fbe499d68 --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt @@ -0,0 +1,208 @@ +package net.mullvad.mullvadvpn.compose.button + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.compositeOver +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.constraintlayout.compose.ConstraintLayout +import net.mullvad.mullvadvpn.lib.theme.AppTheme +import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.onVariant +import net.mullvad.mullvadvpn.lib.theme.color.variant + +@Preview +@Composable +private fun PreviewNegativeButtonEnabled() { + AppTheme { NegativeButton(onClick = {}, text = "Negative Button") } +} + +@Preview +@Composable +private fun PreviewNegativeButtonDisabled() { + AppTheme { NegativeButton(onClick = {}, text = "Negative Button", isEnabled = false) } +} + +@Preview +@Composable +private fun PreviewVariantButtonEnabled() { + AppTheme { VariantButton(onClick = {}, text = "Variant Button") } +} + +@Preview +@Composable +private fun PreviewVariantButtonDisabled() { + AppTheme { VariantButton(onClick = {}, text = "Variant Button", isEnabled = false) } +} + +@Preview +@Composable +private fun PreviewPrimaryButtonEnabled() { + AppTheme { PrimaryButton(onClick = {}, text = "Primary Button") } +} + +@Preview +@Composable +private fun PreviewPrimaryButtonDisabled() { + AppTheme { PrimaryButton(onClick = {}, text = "Primary Button", isEnabled = false) } +} + +@Composable +fun NegativeButton( + onClick: () -> Unit, + text: String, + modifier: Modifier = Modifier, + background: Color = MaterialTheme.colorScheme.background, + colors: ButtonColors = + ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.error, + contentColor = MaterialTheme.colorScheme.onError, + disabledContentColor = + MaterialTheme.colorScheme.onError + .copy(alpha = AlphaInactive) + .compositeOver(background), + disabledContainerColor = + MaterialTheme.colorScheme.error + .copy(alpha = AlphaInactive) + .compositeOver(background), + ), + isEnabled: Boolean = true, + icon: Int? = null, + iconContentDescription: String? = null, +) { + BaseButton( + onClick = onClick, + colors = colors, + text = text, + modifier = modifier, + isEnabled = isEnabled, + icon = icon, + iconContentDescription = iconContentDescription, + ) +} + +@Composable +fun VariantButton( + onClick: () -> Unit, + text: String, + modifier: Modifier = Modifier, + background: Color = MaterialTheme.colorScheme.background, + colors: ButtonColors = + ButtonDefaults.buttonColors( + containerColor = MaterialTheme.colorScheme.variant, + contentColor = MaterialTheme.colorScheme.onVariant, + disabledContentColor = + MaterialTheme.colorScheme.onVariant + .copy(alpha = AlphaInactive) + .compositeOver(background), + disabledContainerColor = + MaterialTheme.colorScheme.variant + .copy(alpha = AlphaInactive) + .compositeOver(background), + ), + isEnabled: Boolean = true, + icon: Int? = null, + iconContentDescription: String? = null, +) { + BaseButton( + onClick = onClick, + colors = colors, + text = text, + modifier = modifier, + isEnabled = isEnabled, + icon = icon, + iconContentDescription = iconContentDescription, + ) +} + +@Composable +fun PrimaryButton( + onClick: () -> Unit, + text: String, + modifier: Modifier = Modifier, + colors: ButtonColors = ButtonDefaults.buttonColors(), + isEnabled: Boolean = true, + icon: Int? = null, + iconContentDescription: String? = null, +) { + BaseButton( + onClick = onClick, + colors = colors, + text = text, + modifier = modifier, + isEnabled = isEnabled, + icon = icon, + iconContentDescription = iconContentDescription, + ) +} + +@Composable +private fun BaseButton( + onClick: () -> Unit, + colors: ButtonColors, + text: String, + modifier: Modifier = Modifier, + isEnabled: Boolean = true, + icon: Int? = null, + iconContentDescription: String? = null, +) { + Button( + onClick = onClick, + colors = colors, + enabled = isEnabled, + // Required along with defaultMinSize to control size and padding. + contentPadding = PaddingValues(0.dp), + modifier = + modifier + .height(Dimens.buttonHeight) + .defaultMinSize(minWidth = 0.dp, minHeight = Dimens.buttonHeight) + .fillMaxWidth(), + shape = MaterialTheme.shapes.small + ) { + ConstraintLayout(modifier = Modifier.fillMaxSize()) { + val (title, logo) = createRefs() + Text( + text = text, + textAlign = TextAlign.Center, + style = MaterialTheme.typography.bodyMedium, + modifier = + Modifier.constrainAs(title) { + end.linkTo(logo.start) + centerTo(parent) + } + ) + icon?.let { + Image( + painter = painterResource(id = icon), + contentDescription = iconContentDescription, + modifier = + Modifier.constrainAs(logo) { + centerVerticallyTo(parent) + end.linkTo(parent.end) + } + .padding(horizontal = Dimens.smallPadding) + .alpha(if (isEnabled) AlphaVisible else AlphaDisabled) + ) + } + } + } +} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt index 41ab2cf87694..57532a8d429a 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt @@ -1,17 +1,13 @@ package net.mullvad.mullvadvpn.compose.button -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.compositeOver import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.SpacedColumn -import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive import net.mullvad.mullvadvpn.lib.theme.AppTheme @Preview @@ -32,23 +28,11 @@ fun RedeemVoucherButton( onClick: () -> Unit, isEnabled: Boolean ) { - ActionButton( + VariantButton( + background = background, text = stringResource(id = R.string.redeem_voucher), onClick = onClick, modifier = modifier, - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.surface, - disabledContentColor = - MaterialTheme.colorScheme.onPrimary - .copy(alpha = AlphaInactive) - .compositeOver(background), - disabledContainerColor = - MaterialTheme.colorScheme.surface - .copy(alpha = AlphaDisabled) - .compositeOver(background) - ), isEnabled = isEnabled ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt index bc82bca29cf9..18db3b2eac44 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt @@ -1,18 +1,14 @@ package net.mullvad.mullvadvpn.compose.button import androidx.compose.foundation.background -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.compositeOver import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.SpacedColumn -import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens @@ -37,22 +33,10 @@ fun SitePaymentButton( modifier: Modifier = Modifier, background: Color = MaterialTheme.colorScheme.background, ) { - ExternalActionButton( + VariantButton( + background = background, onClick = onClick, modifier = modifier, - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.surface, - disabledContentColor = - MaterialTheme.colorScheme.onPrimary - .copy(alpha = AlphaInactive) - .compositeOver(background), - disabledContainerColor = - MaterialTheme.colorScheme.surface - .copy(alpha = AlphaDisabled) - .compositeOver(background) - ), isEnabled = isEnabled, text = stringResource(id = R.string.buy_credit) ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt index e58e7e22025e..86b659759c41 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt @@ -1,24 +1,14 @@ package net.mullvad.mullvadvpn.compose.button -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.SpacedColumn -import net.mullvad.mullvadvpn.lib.theme.Alpha20 import net.mullvad.mullvadvpn.lib.theme.AppTheme -import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.Alpha20 @Preview @Composable @@ -38,29 +28,15 @@ fun SwitchLocationButton( showChevron: Boolean, onClick: () -> Unit, ) { - ActionButton( + PrimaryButton( onClick = onClick, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.inverseSurface.copy(alpha = Alpha20), contentColor = MaterialTheme.colorScheme.inverseSurface ), - modifier = modifier - ) { - Box(modifier = Modifier.fillMaxWidth().fillMaxHeight().padding(all = Dimens.smallPadding)) { - Text( - text = text, - style = MaterialTheme.typography.titleMedium, - fontWeight = FontWeight.Bold, - modifier = Modifier.align(Alignment.Center) - ) - if (showChevron) { - Icon( - painter = painterResource(id = R.drawable.icon_chevron), - contentDescription = null, - modifier = Modifier.align(Alignment.CenterEnd) - ) - } - } - } + modifier = modifier, + text = text, + icon = if (showChevron) R.drawable.icon_chevron else null + ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt index ab3e45c5c4e8..b7198be0c8c4 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt @@ -26,10 +26,11 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.SpacedColumn -import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.selected @Preview @Composable @@ -66,7 +67,7 @@ fun CustomPortCell( .weight(1f) .background( if (isSelected) { - MaterialTheme.colorScheme.surface + MaterialTheme.colorScheme.selected } else { MaterialTheme.colorScheme.secondaryContainer } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt index 331e9d2248a0..c2283d6f472e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt @@ -22,10 +22,10 @@ import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.ChevronView import net.mullvad.mullvadvpn.compose.component.textResource import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible @Preview @Composable diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt index 009edf90ef95..11a9068ba50b 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt @@ -17,10 +17,10 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible -import net.mullvad.mullvadvpn.lib.theme.MullvadBlue -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite @Preview @Composable diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt index 5836a5aca18a..beac11c4aa2b 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt @@ -28,11 +28,12 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.ChevronView -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive -import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.selected import net.mullvad.mullvadvpn.model.GeographicLocationConstraint import net.mullvad.mullvadvpn.relaylist.Relay import net.mullvad.mullvadvpn.relaylist.RelayCity @@ -148,7 +149,7 @@ private fun PreviewRelayLocationCell() { fun RelayLocationCell( relay: RelayItem, modifier: Modifier = Modifier, - activeColor: Color = MaterialTheme.colorScheme.surface, + activeColor: Color = MaterialTheme.colorScheme.selected, inactiveColor: Color = MaterialTheme.colorScheme.error, selectedItem: RelayItem? = null, onSelectRelay: (item: RelayItem) -> Unit = {} diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt index b43217614c1d..087ba3daf451 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt @@ -14,10 +14,11 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.compose.component.SpacedColumn -import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.selected @Preview @Composable @@ -47,7 +48,7 @@ fun SelectableCell( }, titleStyle: TextStyle = MaterialTheme.typography.labelLarge, startPadding: Dp = Dimens.cellStartPadding, - selectedColor: Color = MaterialTheme.colorScheme.surface, + selectedColor: Color = MaterialTheme.colorScheme.selected, backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer, onCellClicked: () -> Unit = {}, testTag: String = "" diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt index 3f12457b8692..e800e7946cdd 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt @@ -15,11 +15,11 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive -import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible import net.mullvad.mullvadvpn.model.GeoIpLocation import net.mullvad.talpid.net.TransportProtocol diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt index e0f84db5ea21..0489dfb19012 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt @@ -27,7 +27,7 @@ import me.onebone.toolbar.CollapsingToolbarScaffoldState import me.onebone.toolbar.CollapsingToolbarScope import me.onebone.toolbar.ExperimentalToolbarApi import me.onebone.toolbar.ScrollStrategy -import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar +import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar @Composable fun ScaffoldWithTopBar( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt index 90fe865588a9..bc344196c37f 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt @@ -21,11 +21,11 @@ import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive -import net.mullvad.mullvadvpn.lib.theme.AlphaVisible -import net.mullvad.mullvadvpn.lib.theme.MullvadGreen -import net.mullvad.mullvadvpn.lib.theme.MullvadRed -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite +import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive +import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible +import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen +import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite @Preview @Composable diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt index 083aedd217f0..52f11babe71c 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -18,7 +17,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens @@ -51,14 +50,9 @@ fun ChangelogDialog(changesList: List, version: String, onDismiss: () -> } }, confirmButton = { - ActionButton( + PrimaryButton( text = stringResource(R.string.changes_dialog_dismiss_button), - onClick = onDismiss, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - ) + onClick = onDismiss ) }, containerColor = MaterialTheme.colorScheme.background, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt index 3c36ca8f8885..df29f3d257e9 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt @@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material3.AlertDialog -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -16,14 +15,13 @@ import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.NegativeButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.test.CUSTOM_PORT_DIALOG_INPUT_TEST_TAG import net.mullvad.mullvadvpn.compose.textfield.CustomPortTextField -import net.mullvad.mullvadvpn.lib.theme.AlphaDescription -import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription import net.mullvad.mullvadvpn.model.PortRange import net.mullvad.mullvadvpn.util.asString import net.mullvad.mullvadvpn.util.isPortInValidRanges @@ -63,40 +61,21 @@ fun CustomPortDialog( }, confirmButton = { Column { - ActionButton( + PrimaryButton( text = stringResource(id = R.string.custom_port_dialog_submit), onClick = { onSave(port.value) }, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - disabledContentColor = - MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive), - disabledContainerColor = - MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDisabled) - ), isEnabled = port.value.isNotEmpty() && allowedPortRanges.isPortInValidRanges(port.value.toIntOrNull() ?: 0) ) if (showReset) { - ActionButton( + NegativeButton( text = stringResource(R.string.custom_port_dialog_remove), - onClick = { onReset() }, + onClick = onReset, modifier = Modifier.padding(top = Dimens.mediumPadding), - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.error, - contentColor = MaterialTheme.colorScheme.onError, - ) ) } - ActionButton( - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - ), + PrimaryButton( text = stringResource(id = R.string.cancel), modifier = Modifier.padding(top = Dimens.mediumPadding), onClick = onDismissRequest diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt index e27af82fbda4..b092581dafc1 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt @@ -2,31 +2,25 @@ package net.mullvad.mullvadvpn.compose.dialog import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material3.AlertDialog -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester -import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource -import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.compose.button.NegativeButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.component.HtmlText import net.mullvad.mullvadvpn.compose.component.textResource import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord @@ -68,46 +62,17 @@ fun ShowDeviceRemovalDialog(onDismiss: () -> Unit, onConfirm: () -> Unit, device HtmlText(htmlFormattedString = htmlFormattedDialogText, textSize = 16.sp.value) }, dismissButton = { - Button( - modifier = - Modifier.height(dimensionResource(id = R.dimen.button_height)) - .defaultMinSize( - minWidth = 0.dp, - minHeight = dimensionResource(id = R.dimen.button_height) - ) - .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = colorResource(id = R.color.red), - contentColor = Color.White - ), + NegativeButton( onClick = onConfirm, - shape = MaterialTheme.shapes.small - ) { - Text(text = stringResource(id = R.string.confirm_removal), fontSize = 18.sp) - } + text = stringResource(id = R.string.confirm_removal) + ) }, confirmButton = { - Button( - contentPadding = PaddingValues(0.dp), - modifier = - Modifier.focusRequester(FocusRequester()) - .height(dimensionResource(id = R.dimen.button_height)) - .defaultMinSize( - minWidth = 0.dp, - minHeight = dimensionResource(id = R.dimen.button_height) - ) - .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = colorResource(id = R.color.blue), - contentColor = Color.White - ), - onClick = { onDismiss() }, - shape = MaterialTheme.shapes.small - ) { - Text(text = stringResource(id = R.string.back), fontSize = 18.sp) - } + PrimaryButton( + modifier = Modifier.focusRequester(FocusRequester()), + onClick = onDismiss, + text = stringResource(id = R.string.back) + ) }, containerColor = colorResource(id = R.color.darkBlue) ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt index 06e2e8311c62..2c6dcc8f43f6 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt @@ -4,13 +4,9 @@ import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -26,19 +22,16 @@ import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import net.mullvad.mullvadvpn.R +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.textfield.DnsTextField import net.mullvad.mullvadvpn.lib.theme.AppTheme -import net.mullvad.mullvadvpn.lib.theme.MullvadBlue -import net.mullvad.mullvadvpn.lib.theme.MullvadRed -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite20 -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite60 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed import net.mullvad.mullvadvpn.viewmodel.CustomDnsItem import net.mullvad.mullvadvpn.viewmodel.StagedDns @Preview @Composable -private fun PreviewDnsDialog() { +private fun PreviewDnsDialogNew() { AppTheme { DnsDialog( stagedDns = @@ -52,6 +45,46 @@ private fun PreviewDnsDialog() { } } +@Preview +@Composable +private fun PreviewDnsDialogEdit() { + AppTheme { + DnsDialog( + stagedDns = + StagedDns.EditDns( + CustomDnsItem("1.1.1.1", false), + StagedDns.ValidationResult.Success, + 0 + ), + isAllowLanEnabled = true, + onIpAddressChanged = {}, + onAttemptToSave = {}, + onRemove = {}, + onDismiss = {} + ) + } +} + +@Preview +@Composable +private fun PreviewDnsDialogEditAllowLanDisabled() { + AppTheme { + DnsDialog( + stagedDns = + StagedDns.EditDns( + CustomDnsItem(address = "1.1.1.1", isLocal = true), + StagedDns.ValidationResult.Success, + 0 + ), + isAllowLanEnabled = false, + onIpAddressChanged = {}, + onAttemptToSave = {}, + onRemove = {}, + onDismiss = {} + ) + } +} + @Composable fun DnsDialog( stagedDns: StagedDns, @@ -139,67 +172,26 @@ fun DnsDialog( ) } - Button( - modifier = - Modifier.padding(top = mediumPadding) - .height(buttonSize) - .defaultMinSize(minHeight = buttonSize) - .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MullvadBlue, - contentColor = MullvadWhite, - disabledContentColor = MullvadWhite60, - disabledContainerColor = MullvadWhite20 - ), - onClick = { onAttemptToSave() }, - enabled = stagedDns.isValid(), - shape = MaterialTheme.shapes.small - ) { - Text( - text = stringResource(id = R.string.submit_button), - fontSize = textMediumSize - ) - } + PrimaryButton( + modifier = Modifier.padding(top = mediumPadding), + onClick = onAttemptToSave, + isEnabled = stagedDns.isValid(), + text = stringResource(id = R.string.submit_button) + ) if (stagedDns is StagedDns.EditDns) { - Button( - modifier = - Modifier.padding(top = mediumPadding) - .height(buttonSize) - .defaultMinSize(minHeight = buttonSize) - .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MullvadBlue, - contentColor = MullvadWhite - ), - onClick = { onRemove() }, - shape = MaterialTheme.shapes.small - ) { - Text( - text = stringResource(id = R.string.remove_button), - fontSize = textMediumSize - ) - } + PrimaryButton( + modifier = Modifier.padding(top = mediumPadding), + onClick = onRemove, + text = stringResource(id = R.string.remove_button) + ) } - Button( - modifier = - Modifier.padding(top = mediumPadding) - .height(buttonSize) - .defaultMinSize(minHeight = buttonSize) - .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MullvadBlue, - contentColor = Color.White - ), - onClick = { onDismiss() }, - shape = MaterialTheme.shapes.small - ) { - Text(text = stringResource(id = R.string.cancel), fontSize = textMediumSize) - } + PrimaryButton( + modifier = Modifier.padding(top = mediumPadding), + onClick = onDismiss, + text = stringResource(id = R.string.cancel) + ) } } ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt index b11ef59630f4..5cf61533efbc 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material3.AlertDialog -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -19,7 +18,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.window.DialogProperties import androidx.core.text.HtmlCompat import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens @@ -73,14 +72,9 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () -> } }, confirmButton = { - ActionButton( + PrimaryButton( modifier = Modifier.wrapContentHeight().fillMaxWidth(), text = stringResource(R.string.changes_dialog_dismiss_button), - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - ), onClick = onDismiss, ) }, diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt index 39f3302a993e..e93fb679808e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -24,15 +23,13 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.textfield.MtuTextField import net.mullvad.mullvadvpn.constant.MTU_MAX_VALUE import net.mullvad.mullvadvpn.constant.MTU_MIN_VALUE -import net.mullvad.mullvadvpn.lib.theme.AlphaDescription -import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled -import net.mullvad.mullvadvpn.lib.theme.AlphaInactive import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription import net.mullvad.mullvadvpn.util.isValidMtu @Preview @@ -115,20 +112,11 @@ fun MtuDialog( modifier = Modifier.padding(top = smallPadding) ) - ActionButton( + PrimaryButton( modifier = Modifier.padding(top = Dimens.mediumPadding) .height(Dimens.buttonHeight) .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - disabledContentColor = - MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive), - disabledContainerColor = - MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDisabled) - ), isEnabled = isValidMtu, text = stringResource(R.string.submit_button), onClick = { @@ -139,32 +127,22 @@ fun MtuDialog( } ) - ActionButton( + PrimaryButton( modifier = Modifier.padding(top = Dimens.mediumPadding) .height(Dimens.buttonHeight) .defaultMinSize(minHeight = Dimens.buttonHeight) .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - ), text = stringResource(R.string.reset_to_default_button), onClick = onRestoreDefaultValue ) - ActionButton( + PrimaryButton( modifier = Modifier.padding(top = Dimens.mediumPadding) .height(Dimens.buttonHeight) .defaultMinSize(minHeight = Dimens.buttonHeight) .fillMaxWidth(), - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.primary, - contentColor = MaterialTheme.colorScheme.onPrimary, - ), text = stringResource(R.string.cancel), onClick = onDismiss ) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt index b3bc9e7f3beb..adc20f14583a 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton @@ -35,7 +34,9 @@ import kotlinx.coroutines.flow.asSharedFlow import me.onebone.toolbar.ScrollStrategy import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.ExternalButton +import net.mullvad.mullvadvpn.compose.button.NegativeButton +import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton import net.mullvad.mullvadvpn.compose.component.CollapsingToolbarScaffold import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar import net.mullvad.mullvadvpn.compose.component.CopyableObfuscationView @@ -182,7 +183,7 @@ fun AccountScreen( Spacer(modifier = Modifier.weight(1f)) if (IS_PLAY_BUILD.not()) { - ActionButton( + ExternalButton( text = stringResource(id = R.string.manage_account), onClick = onManageAccountClick, modifier = @@ -190,17 +191,11 @@ fun AccountScreen( start = Dimens.sideMargin, end = Dimens.sideMargin, bottom = Dimens.screenVerticalMargin - ), - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.surface ) ) } - ActionButton( - text = stringResource(id = R.string.redeem_voucher), + RedeemVoucherButton( onClick = onRedeemVoucherClick, modifier = Modifier.padding( @@ -208,14 +203,10 @@ fun AccountScreen( end = Dimens.sideMargin, bottom = Dimens.screenVerticalMargin ), - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.surface - ) + isEnabled = true ) - ActionButton( + NegativeButton( text = stringResource(id = R.string.log_out), onClick = onLogoutClick, modifier = @@ -223,11 +214,6 @@ fun AccountScreen( start = Dimens.sideMargin, end = Dimens.sideMargin, bottom = Dimens.screenVerticalMargin - ), - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.error ) ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt index d250a5467eaa..5c16bba35a5d 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt @@ -44,9 +44,9 @@ import net.mullvad.mullvadvpn.compose.test.RECONNECT_BUTTON_TEST_TAG import net.mullvad.mullvadvpn.compose.test.SCROLLABLE_COLUMN_TEST_TAG import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_BUTTON_TEST_TAG import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser -import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar import net.mullvad.mullvadvpn.model.TunnelState import net.mullvad.mullvadvpn.viewmodel.ConnectViewModel import net.mullvad.talpid.tunnel.ActionAfterDisconnect diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt index 7bbd7a7cd5f4..f9190fceb9fe 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt @@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -26,7 +25,8 @@ import androidx.compose.ui.unit.dp import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.Dimension import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton +import net.mullvad.mullvadvpn.compose.button.VariantButton import net.mullvad.mullvadvpn.compose.component.ListItem import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar import net.mullvad.mullvadvpn.compose.dialog.ShowDeviceRemovalDialog @@ -36,11 +36,6 @@ import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord import net.mullvad.mullvadvpn.lib.common.util.parseAsDateTime import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens -import net.mullvad.mullvadvpn.lib.theme.MullvadBlue -import net.mullvad.mullvadvpn.lib.theme.MullvadGreen -import net.mullvad.mullvadvpn.lib.theme.MullvadGreen40 -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite80 import net.mullvad.mullvadvpn.model.Device import net.mullvad.mullvadvpn.util.formatDate @@ -222,27 +217,16 @@ fun DeviceListScreen( width = Dimension.fillToConstraints } ) { - ActionButton( + VariantButton( text = stringResource(id = R.string.continue_login), onClick = onContinueWithLogin, isEnabled = state.hasTooManyDevices.not() && state.isLoading.not(), - colors = - ButtonDefaults.buttonColors( - containerColor = MullvadGreen, - disabledContainerColor = MullvadGreen40, - disabledContentColor = MullvadWhite80, - contentColor = MullvadWhite - ) + background = MaterialTheme.colorScheme.secondary ) - ActionButton( + PrimaryButton( text = stringResource(id = R.string.back), onClick = onBackClick, - colors = - ButtonDefaults.buttonColors( - containerColor = MullvadBlue, - contentColor = MullvadWhite - ), modifier = Modifier.padding(top = 16.dp) ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt index 004ce137cd2e..ccfabacb55d8 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -23,7 +22,7 @@ import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.Dimension import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.DeviceRevokedLoginButton import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar import net.mullvad.mullvadvpn.compose.state.DeviceRevokedUiState import net.mullvad.mullvadvpn.lib.theme.AppTheme @@ -121,22 +120,7 @@ fun DeviceRevokedScreen( width = Dimension.fillToConstraints } ) { - ActionButton( - text = stringResource(id = R.string.go_to_login), - onClick = onGoToLoginClicked, - colors = - ButtonDefaults.buttonColors( - contentColor = Color.White, - containerColor = - colorResource( - if (state == DeviceRevokedUiState.SECURED) { - R.color.red60 - } else { - R.color.blue - } - ) - ) - ) + DeviceRevokedLoginButton(onClick = onGoToLoginClicked, state = state) } } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt index 3c4d9e12023e..f075f723201b 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt @@ -21,7 +21,6 @@ import androidx.compose.foundation.shape.CornerSize import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Icon import androidx.compose.material3.IconButton @@ -53,16 +52,17 @@ import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton +import net.mullvad.mullvadvpn.compose.button.VariantButton import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar import net.mullvad.mullvadvpn.compose.state.LoginError import net.mullvad.mullvadvpn.compose.state.LoginState import net.mullvad.mullvadvpn.compose.state.LoginState.* import net.mullvad.mullvadvpn.compose.state.LoginUiState import net.mullvad.mullvadvpn.compose.util.accountTokenVisualTransformation -import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar @Preview @Composable @@ -233,14 +233,9 @@ private fun LoginContent( } Spacer(modifier = Modifier.size(Dimens.largePadding)) - ActionButton( + VariantButton( isEnabled = uiState.loginButtonEnabled, onClick = { onLoginClick(uiState.accountNumberInput) }, - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.surface - ), text = stringResource(id = R.string.login_title), modifier = Modifier.padding(bottom = Dimens.mediumPadding) ) @@ -368,15 +363,10 @@ private fun CreateAccountPanel(onCreateAccountClick: () -> Unit, isEnabled: Bool text = stringResource(id = R.string.dont_have_an_account), color = MaterialTheme.colorScheme.onPrimary, ) - ActionButton( + PrimaryButton( modifier = Modifier.fillMaxWidth(), text = stringResource(id = R.string.create_account), isEnabled = isEnabled, - colors = - ButtonDefaults.buttonColors( - contentColor = MaterialTheme.colorScheme.onPrimary, - containerColor = MaterialTheme.colorScheme.primary - ), onClick = onCreateAccountClick ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt index a9ab126dae42..6dd39f258479 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -25,16 +24,16 @@ import kotlinx.coroutines.flow.MutableSharedFlow import kotlinx.coroutines.flow.SharedFlow import kotlinx.coroutines.flow.asSharedFlow import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.NegativeButton import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton import net.mullvad.mullvadvpn.compose.button.SitePaymentButton import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar import net.mullvad.mullvadvpn.compose.extensions.createOpenAccountPageHook import net.mullvad.mullvadvpn.compose.state.OutOfTimeUiState -import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens +import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar import net.mullvad.mullvadvpn.model.TunnelState import net.mullvad.mullvadvpn.viewmodel.OutOfTimeViewModel import net.mullvad.talpid.tunnel.ActionAfterDisconnect @@ -174,13 +173,8 @@ fun OutOfTimeScreen( Spacer(modifier = Modifier.weight(1f).defaultMinSize(minHeight = Dimens.verticalSpace)) // Button area if (uiState.tunnelState.showDisconnectButton()) { - ActionButton( + NegativeButton( onClick = onDisconnectClick, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.error, - contentColor = MaterialTheme.colorScheme.onError - ), text = stringResource(id = R.string.disconnect), modifier = Modifier.padding( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt index 2ae1b0893f22..5e8f0e700a42 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.ClickableText -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -30,7 +29,7 @@ import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.Dimension import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.ActionButton +import net.mullvad.mullvadvpn.compose.button.PrimaryButton import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar import net.mullvad.mullvadvpn.lib.theme.AppTheme @@ -119,14 +118,9 @@ fun PrivacyDisclaimerScreen( width = Dimension.fillToConstraints } ) { - ActionButton( + PrimaryButton( text = stringResource(id = R.string.agree_and_continue), - onClick = onAcceptClicked::invoke, - colors = - ButtonDefaults.buttonColors( - contentColor = Color.White, - containerColor = colorResource(R.color.blue) - ) + onClick = onAcceptClicked::invoke ) } } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt index 140b9824df0a..8493d952a4b6 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt @@ -43,10 +43,10 @@ import net.mullvad.mullvadvpn.compose.state.WelcomeUiState import net.mullvad.mullvadvpn.compose.util.createCopyToClipboardHandle import net.mullvad.mullvadvpn.lib.common.util.groupWithSpaces import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser -import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite +import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel @Preview diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt index 13d91df68b97..dd44bb80770d 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt @@ -36,8 +36,8 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.lib.theme.MullvadBlue -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite10 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite10 private const val EMPTY_STRING = "" private const val NEWLINE_STRING = "\n" diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt index 55c0283aff08..2f743a8d2303 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt @@ -28,7 +28,7 @@ import androidx.compose.ui.tooling.preview.Preview import net.mullvad.mullvadvpn.R import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.Dimens -import net.mullvad.mullvadvpn.lib.theme.MullvadWhite10 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite10 @Preview @Composable diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt index e9490d31d4d6..4fa92f8a48fb 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt @@ -14,6 +14,15 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue20 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue40 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadDarkBlue +import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen +import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite +import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite60 +import net.mullvad.mullvadvpn.lib.theme.color.MullvadYellow import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt similarity index 81% rename from android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt rename to android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt index e55bdc605a57..f5e43cc7f4b7 100644 --- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt +++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt @@ -1,5 +1,8 @@ -package net.mullvad.mullvadvpn.lib.theme +package net.mullvad.mullvadvpn.lib.theme.color +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color internal val MullvadBeige = Color(0xFFFFCD86) @@ -59,3 +62,12 @@ const val AlphaDescription = 0.6f const val AlphaDisconnectButton = 0.6f const val AlphaTopBar = 0.8f const val AlphaInvisible = 0f + +// Custom colors, they only link to normal material 3 colors for now +val ColorScheme.variant: Color + @Composable get() = MaterialTheme.colorScheme.surface +val ColorScheme.onVariant: Color + @Composable get() = MaterialTheme.colorScheme.onSurface + +val ColorScheme.selected: Color + @Composable get() = MaterialTheme.colorScheme.surface