Unify button appearance

- Make almost all button depend on 3 standard buttons - Replace surface and onSurface with our own custom theme color
mullvad · Oct 1, 2023 · edaea32 · edaea32
1 parent f9706c3
commit edaea32
Show file tree

Hide file tree

Showing 34 changed files with 412 additions and 477 deletions.
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
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
@@ -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/...oid/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/DeviceRevokedLoginButton.kt b/...oid/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
@@ -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
@@ -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)
+                )
+            }
+        }
+    }
+}