Add account button to compose top bar

10 files changed, 86 insertions, 27 deletions

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 fb9e3b380b..2cfe0c65d9 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
@@ -3,11 +3,12 @@ package net.mullvad.mullvadvpn.compose.component
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -22,14 +23,16 @@ 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
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ScaffoldWithTopBar(
     topBarColor: Color,
     statusBarColor: Color,
     navigationBarColor: Color,
+    iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
     onSettingsClicked: (() -> Unit)?,
+    onAccountClicked: (() -> Unit)?,
     isIconAndLogoVisible: Boolean = true,
     content: @Composable (PaddingValues) -> Unit,
 ) {
@@ -41,7 +44,9 @@ fun ScaffoldWithTopBar(
         topBar = {
             TopBar(
                 backgroundColor = topBarColor,
+                iconTintColor = iconTintColor,
                 onSettingsClicked = onSettingsClicked,
+                onAccountClicked = onAccountClicked,
                 isIconAndLogoVisible = isIconAndLogoVisible
             )
         },
@@ -81,7 +86,7 @@ fun CollapsableAwareToolbarScaffold(
         toolbarModifier = toolbarModifier,
         toolbar = toolbar,
         body = {
-            var bodyHeight by remember { mutableStateOf(0) }
+            var bodyHeight by remember { mutableIntStateOf(0) }
 
             BoxWithConstraints(
                 modifier = Modifier.onGloballyPositioned { bodyHeight = it.size.height }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
index 3e42faba80..234bcbace8 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
@@ -9,60 +9,92 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
+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.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.constraintlayout.compose.ConstraintLayout
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewTopBar() {
-    TopBar(backgroundColor = colorResource(R.color.blue), onSettingsClicked = {})
+    AppTheme {
+        TopBar(
+            backgroundColor = MaterialTheme.colorScheme.inversePrimary,
+            iconTintColor = MaterialTheme.colorScheme.onPrimary,
+            onSettingsClicked = null,
+            onAccountClicked = {}
+        )
+    }
 }
 
 @Composable
 fun TopBar(
     backgroundColor: Color,
     onSettingsClicked: (() -> Unit)?,
+    onAccountClicked: (() -> Unit)?,
     modifier: Modifier = Modifier,
+    iconTintColor: Color,
     isIconAndLogoVisible: Boolean = true
 ) {
     ConstraintLayout(
         modifier =
             Modifier.fillMaxWidth()
-                .height(dimensionResource(id = R.dimen.top_bar_height))
+                .height(Dimens.topBarHeight)
                 .background(backgroundColor)
                 .then(modifier),
     ) {
-        val (logo, appName, settingsIcon) = createRefs()
+        val (logo, appName, accountIcon, settingsIcon) = createRefs()
 
         if (isIconAndLogoVisible) {
             Image(
                 painter = painterResource(id = R.drawable.logo_icon),
                 contentDescription = null, // No meaningful user info or action.
                 modifier =
-                    Modifier.width(44.dp).height(44.dp).constrainAs(logo) {
-                        centerVerticallyTo(parent)
-                        start.linkTo(parent.start, margin = 16.dp)
-                    }
+                    Modifier.padding(start = Dimens.mediumPadding)
+                        .width(Dimens.buttonHeight)
+                        .height(Dimens.buttonHeight)
+                        .constrainAs(logo) {
+                            centerVerticallyTo(parent)
+                            start.linkTo(parent.start)
+                        }
             )
 
             Icon(
                 painter = painterResource(id = R.drawable.logo_text),
-                tint = colorResource(id = R.color.white80),
+                tint = iconTintColor,
                 contentDescription = null, // No meaningful user info or action.
                 modifier =
-                    Modifier.height(16.dp).constrainAs(appName) {
-                        centerVerticallyTo(parent)
-                        start.linkTo(logo.end, margin = 8.dp)
-                    }
+                    Modifier.padding(start = Dimens.smallPadding)
+                        .height(Dimens.mediumPadding)
+                        .constrainAs(appName) {
+                            centerVerticallyTo(parent)
+                            start.linkTo(logo.end)
+                        }
+            )
+        }
+
+        if (onAccountClicked != null) {
+            Image(
+                painter = painterResource(R.drawable.icon_account),
+                contentDescription = stringResource(id = R.string.settings_account),
+                modifier =
+                    Modifier.clickable { onAccountClicked() }
+                        .fillMaxHeight()
+                        .padding(horizontal = Dimens.mediumPadding)
+                        .constrainAs(accountIcon) {
+                            if (onSettingsClicked != null) {
+                                end.linkTo(settingsIcon.start)
+                            } else {
+                                end.linkTo(parent.end)
+                            }
+                        }
             )
         }
 
@@ -73,7 +105,7 @@ fun TopBar(
                 modifier =
                     Modifier.clickable { onSettingsClicked() }
                         .fillMaxHeight()
-                        .padding(horizontal = 16.dp)
+                        .padding(horizontal = Dimens.mediumPadding)
                         .constrainAs(settingsIcon) { end.linkTo(parent.end) }
             )
         }
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 160ae532c8..48e7ef2a0b 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
@@ -95,7 +95,8 @@ fun DeviceListScreen(
         topBarColor = topColor,
         statusBarColor = topColor,
         navigationBarColor = colorResource(id = R.color.darkBlue),
-        onSettingsClicked = onSettingsClicked
+        onSettingsClicked = onSettingsClicked,
+        onAccountClicked = null,
     ) {
         ConstraintLayout(
             modifier =
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 68a445f3a9..004ce137cd 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
@@ -54,6 +54,7 @@ fun DeviceRevokedScreen(
         statusBarColor = topColor,
         navigationBarColor = colorResource(id = R.color.darkBlue),
         onSettingsClicked = onSettingsClicked,
+        onAccountClicked = null
     ) {
         ConstraintLayout(
             modifier =
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
index 6c5b5324ec..0b5fc8c245 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
@@ -37,6 +37,7 @@ fun LoadingScreen(onSettingsCogClicked: () -> Unit = {}) {
         statusBarColor = backgroundColor,
         navigationBarColor = backgroundColor,
         onSettingsClicked = onSettingsCogClicked,
+        onAccountClicked = null,
         isIconAndLogoVisible = false,
         content = {
             Box(
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 c7abfe72fc..2ae1b0893f 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
@@ -50,6 +50,7 @@ fun PrivacyDisclaimerScreen(
         topBarColor = topColor,
         statusBarColor = topColor,
         navigationBarColor = colorResource(id = R.color.darkBlue),
+        onAccountClicked = null,
         onSettingsClicked = null
     ) {
         ConstraintLayout(
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 5e19291649..038eb60663 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
@@ -35,11 +35,12 @@ import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
-import net.mullvad.mullvadvpn.lib.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.common.util.SdkUtils
 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.ui.extension.copyToClipboard
 import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel
 
@@ -54,6 +55,7 @@ private fun PreviewWelcomeScreen() {
             onSitePaymentClick = {},
             onRedeemVoucherClick = {},
             onSettingsClick = {},
+            onAccountClick = {},
             openConnectScreen = {}
         )
     }
@@ -67,6 +69,7 @@ fun WelcomeScreen(
     onSitePaymentClick: () -> Unit,
     onRedeemVoucherClick: () -> Unit,
     onSettingsClick: () -> Unit,
+    onAccountClick: () -> Unit,
     openConnectScreen: () -> Unit
 ) {
     val context = LocalContext.current
@@ -94,7 +97,15 @@ fun WelcomeScreen(
                 MaterialTheme.colorScheme.error
             },
         navigationBarColor = MaterialTheme.colorScheme.background,
-        onSettingsClicked = onSettingsClick
+        iconTintColor =
+            if (uiState.tunnelState.isSecured()) {
+                    MaterialTheme.colorScheme.onPrimary
+                } else {
+                    MaterialTheme.colorScheme.onError
+                }
+                .copy(alpha = AlphaTopBar),
+        onSettingsClicked = onSettingsClick,
+        onAccountClicked = onAccountClick
     ) {
         Column(
             verticalArrangement = Arrangement.Bottom,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/WelcomeFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/WelcomeFragment.kt
index 5d0eb3b690..706bbc4858 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/WelcomeFragment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/WelcomeFragment.kt
@@ -9,8 +9,8 @@ import androidx.compose.ui.platform.ComposeView
 import net.mullvad.mullvadvpn.BuildConfig
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.screen.WelcomeScreen
-import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.common.constant.BuildTypes
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.ui.MainActivity
 import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel
 import org.koin.androidx.viewmodel.ext.android.viewModel
@@ -33,9 +33,10 @@ class WelcomeFragment : BaseFragment() {
                         uiState = state,
                         viewActions = vm.viewActions,
                         onSitePaymentClick = vm::onSitePaymentClick,
-                        onRedeemVoucherClick = { openRedeemVoucherFragment() },
-                        onSettingsClick = { openSettingsView() },
-                        openConnectScreen = { advanceToConnectScreen() }
+                        onRedeemVoucherClick = ::openRedeemVoucherFragment,
+                        onSettingsClick = ::openSettingsView,
+                        onAccountClick = ::openAccountView,
+                        openConnectScreen = ::advanceToConnectScreen
                     )
                 }
             }
@@ -58,4 +59,8 @@ class WelcomeFragment : BaseFragment() {
     private fun openSettingsView() {
         (context as? MainActivity)?.openSettings()
     }
+
+    private fun openAccountView() {
+        (context as? MainActivity)?.openAccount()
+    }
 }
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.kt
index 391189c406..639b183e86 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.kt
@@ -61,4 +61,5 @@ const val Alpha20 = 0.2f
 const val AlphaInactive = 0.4f
 const val AlphaDescription = 0.6f
 const val AlphaDisconnectButton = 0.6f
+const val AlphaTopBar = 0.8f
 const val AlphaInvisible = 0f
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
index fa922eac9e..9013fb6a28 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -44,6 +44,7 @@ data class Dimensions(
     val sideMargin: Dp = 22.dp,
     val smallPadding: Dp = 8.dp,
     val titleIconSize: Dp = 24.dp,
+    val topBarHeight: Dp = 64.dp,
     val verticalSpace: Dp = 20.dp,
     val verticalSpacer: Dp = 1.dp
 )