Add site payment button

5 files changed, 138 insertions, 70 deletions

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
new file mode 100644
index 0000000000..d3945f7069
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt
@@ -0,0 +1,70 @@
+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")
+    }
+}
+
+@Composable
+fun ExternalActionButton(
+    onClick: () -> Unit,
+    colors: ButtonColors,
+    text: String,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+) {
+    ActionButton(
+        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)
+            )
+        }
+    }
+}
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
new file mode 100644
index 0000000000..bc82bca29c
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
@@ -0,0 +1,59 @@
+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
+
+@Preview
+@Composable
+private fun PreviewSitePaymentButton() {
+    AppTheme {
+        SpacedColumn(
+            spacing = Dimens.cellVerticalSpacing,
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.background)
+        ) {
+            SitePaymentButton(onClick = {}, isEnabled = true)
+            SitePaymentButton(onClick = {}, isEnabled = false)
+        }
+    }
+}
+
+@Composable
+fun SitePaymentButton(
+    onClick: () -> Unit,
+    isEnabled: Boolean,
+    modifier: Modifier = Modifier,
+    background: Color = MaterialTheme.colorScheme.background,
+) {
+    ExternalActionButton(
+        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/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
index b36882ef41..a4004db78e 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
@@ -3,7 +3,6 @@ package net.mullvad.mullvadvpn.compose.screen
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
@@ -18,19 +17,16 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
 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.SitePaymentButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.extensions.createOpenAccountPageHook
@@ -38,7 +34,6 @@ import net.mullvad.mullvadvpn.compose.state.OutOfTimeUiState
 import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
 import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
-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.model.TunnelState
@@ -197,47 +192,16 @@ fun OutOfTimeScreen(
                 )
             }
             if (showSitePayment) {
-                ActionButton(
+                SitePaymentButton(
                     onClick = onSitePaymentClick,
+                    isEnabled = uiState.tunnelState.enableSitePaymentButton(),
                     modifier =
                         Modifier.padding(
                             start = Dimens.sideMargin,
                             end = Dimens.sideMargin,
                             bottom = Dimens.buttonSeparation
-                        ),
-                    colors =
-                        ButtonDefaults.buttonColors(
-                            contentColor = MaterialTheme.colorScheme.onPrimary,
-                            containerColor = MaterialTheme.colorScheme.surface,
-                            disabledContentColor =
-                                MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive),
-                            disabledContainerColor =
-                                MaterialTheme.colorScheme.surface.copy(alpha = AlphaDisabled)
-                        ),
-                    isEnabled = uiState.tunnelState.enableSitePaymentButton()
-                ) {
-                    Box(modifier = Modifier.fillMaxSize()) {
-                        Text(
-                            text = stringResource(id = R.string.buy_more_credit),
-                            textAlign = TextAlign.Center,
-                            fontSize = 18.sp,
-                            fontWeight = FontWeight.Bold,
-                            modifier = Modifier.align(Alignment.Center)
-                        )
-                        Image(
-                            painter = painterResource(id = R.drawable.icon_extlink),
-                            contentDescription = null,
-                            modifier =
-                                Modifier.align(Alignment.CenterEnd)
-                                    .padding(horizontal = Dimens.smallPadding)
-                                    .alpha(
-                                        if (uiState.tunnelState.enableSitePaymentButton())
-                                            AlphaVisible
-                                        else AlphaDisabled
-                                    )
                         )
-                    }
-                }
+                )
             }
             ActionButton(
                 text = stringResource(id = R.string.redeem_voucher),
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 038eb60663..ac8addaa51 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
@@ -1,10 +1,8 @@
 package net.mullvad.mullvadvpn.compose.screen
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -21,17 +19,14 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
 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.SitePaymentButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
@@ -192,37 +187,16 @@ fun WelcomeScreen(
             ) {
                 Spacer(modifier = Modifier.padding(top = Dimens.screenVerticalMargin))
                 if (showSitePayment) {
-                    ActionButton(
+                    SitePaymentButton(
                         onClick = onSitePaymentClick,
+                        isEnabled = true,
                         modifier =
                             Modifier.padding(
                                 start = Dimens.sideMargin,
                                 end = Dimens.sideMargin,
                                 bottom = Dimens.screenVerticalMargin
-                            ),
-                        colors =
-                            ButtonDefaults.buttonColors(
-                                contentColor = MaterialTheme.colorScheme.onPrimary,
-                                containerColor = MaterialTheme.colorScheme.surface
                             )
-                    ) {
-                        Box(modifier = Modifier.fillMaxSize()) {
-                            Text(
-                                text = stringResource(id = R.string.buy_credit),
-                                textAlign = TextAlign.Center,
-                                fontSize = 18.sp,
-                                fontWeight = FontWeight.Bold,
-                                modifier = Modifier.align(Alignment.Center)
-                            )
-                            Image(
-                                painter = painterResource(id = R.drawable.icon_extlink),
-                                contentDescription = null,
-                                modifier =
-                                    Modifier.align(Alignment.CenterEnd)
-                                        .padding(horizontal = Dimens.smallPadding)
-                            )
-                        }
-                    }
+                    )
                 }
                 ActionButton(
                     text = stringResource(id = R.string.redeem_voucher),
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 ab3a2f61c0..7e48417168 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
@@ -28,6 +28,7 @@ private val MullvadTypography =
                 fontSize = TypeScale.TextBig,
                 fontWeight = FontWeight.Bold
             ),
+        bodyMedium = TextStyle(fontSize = TypeScale.TextMediumPlus, fontWeight = FontWeight.Bold),
         bodySmall = TextStyle(color = MullvadWhite, fontSize = TypeScale.TextSmall),
         titleSmall =
             TextStyle(