Fix row paddings and backbutton orientation

mullvad · Oct 27, 2023 · 5b4e13a · 5b4e13a
1 parent 1de3f4e
commit 5b4e13a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 91 deletions.
diff --git a/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
@@ -1,7 +1,7 @@
 package net.mullvad.mullvadvpn.compose.component
 
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -18,23 +18,20 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.AnimatedIconButton
 import net.mullvad.mullvadvpn.lib.common.util.SdkUtils
-import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.ui.extension.copyToClipboard
 
 @Preview
 @Composable
 private fun PreviewCopyableObfuscationView() {
-    CopyableObfuscationView("1111222233334444")
+    AppTheme { CopyableObfuscationView("1111222233334444", modifier = Modifier.fillMaxWidth()) }
 }
 
 @Composable
-fun CopyableObfuscationView(content: String) {
+fun CopyableObfuscationView(content: String, modifier: Modifier = Modifier) {
     var obfuscationEnabled by remember { mutableStateOf(true) }
 
-    Row(
-        verticalAlignment = CenterVertically,
-        modifier = Modifier.padding(end = Dimens.sideMargin)
-    ) {
+    Row(verticalAlignment = CenterVertically, modifier = modifier) {
         AccountNumberView(
             accountNumber = content,
             obfuscateWithPasswordDots = obfuscationEnabled,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt
@@ -39,12 +39,7 @@ fun InformationView(
             minTextSize = MaterialTheme.typography.labelMedium.fontSize,
             maxTextSize = MaterialTheme.typography.titleSmall.fontSize,
             maxLines = maxLines,
-            modifier =
-                modifier.padding(
-                    start = Dimens.sideMargin,
-                    top = Dimens.smallPadding,
-                    bottom = Dimens.smallPadding
-                )
+            modifier = modifier.padding(vertical = Dimens.smallPadding)
         )
     } else {
         when (whenMissing) {
@@ -55,25 +50,18 @@ fun InformationView(
                     minTextSize = MaterialTheme.typography.labelMedium.fontSize,
                     maxTextSize = MaterialTheme.typography.titleSmall.fontSize,
                     maxLines = maxLines,
-                    modifier =
-                        modifier.padding(
-                            start = Dimens.sideMargin,
-                            top = Dimens.smallPadding,
-                            bottom = Dimens.smallPadding
-                        )
+                    modifier = modifier.padding(vertical = Dimens.smallPadding)
                 )
             }
             MissingPolicy.HIDE_VIEW -> {}
             MissingPolicy.SHOW_SPINNER -> {
-                Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = modifier.padding(Dimens.smallPadding)
+                ) {
                     CircularProgressIndicator(
                         modifier =
-                            Modifier.padding(
-                                    start = Dimens.sideMargin,
-                                    top = Dimens.smallPadding,
-                                    bottom = Dimens.smallPadding
-                                )
-                                .height(Dimens.loadingSpinnerSizeMedium)
+                            Modifier.height(Dimens.loadingSpinnerSizeMedium)
                                 .width(Dimens.loadingSpinnerSizeMedium),
                         color = MaterialTheme.colorScheme.onSecondary
                     )

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
@@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -34,7 +36,7 @@ import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton
 import net.mullvad.mullvadvpn.compose.component.CopyableObfuscationView
 import net.mullvad.mullvadvpn.compose.component.InformationView
 import net.mullvad.mullvadvpn.compose.component.MissingPolicy
-import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
+import net.mullvad.mullvadvpn.compose.component.NavigateBackDownIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.dialog.DeviceNameInfoDialog
 import net.mullvad.mullvadvpn.constant.IS_PLAY_BUILD
@@ -44,6 +46,7 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.util.toExpiryDateString
 import net.mullvad.mullvadvpn.viewmodel.AccountUiState
 import net.mullvad.mullvadvpn.viewmodel.AccountViewModel
+import org.joda.time.DateTime
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Preview
@@ -98,92 +101,94 @@ fun AccountScreen(
 
     ScaffoldWithMediumTopBar(
         appBarTitle = stringResource(id = R.string.settings_account),
-        navigationIcon = { NavigateBackIconButton(onBackClick) }
+        navigationIcon = { NavigateBackDownIconButton(onBackClick) }
     ) { modifier ->
         Column(
-            verticalArrangement = Arrangement.Bottom,
             horizontalAlignment = Alignment.Start,
-            modifier = modifier.animateContentSize()
+            verticalArrangement = Arrangement.spacedBy(Dimens.accountRowSpacing),
+            modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMargin)
         ) {
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.device_name),
-                modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
-            )
+            DeviceNameRow(deviceName = uiState.deviceName ?: "") { showDeviceNameInfoDialog = true }
 
-            Row(verticalAlignment = Alignment.CenterVertically) {
-                InformationView(
-                    content = uiState.deviceName ?: "",
-                    whenMissing = MissingPolicy.SHOW_SPINNER
-                )
-                IconButton(
-                    modifier = Modifier.align(Alignment.CenterVertically),
-                    onClick = { showDeviceNameInfoDialog = true }
-                ) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.icon_info),
-                        contentDescription = null,
-                        tint = MaterialTheme.colorScheme.inverseSurface
-                    )
-                }
-            }
+            AccountNumberRow(accountNumber = uiState.accountNumber ?: "")
 
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.account_number),
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        top = Dimens.smallPadding
-                    )
-            )
-            CopyableObfuscationView(content = uiState.accountNumber ?: "")
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.paid_until),
-                modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
-            )
-
-            InformationView(
-                content = uiState.accountExpiry?.toExpiryDateString() ?: "",
-                whenMissing = MissingPolicy.SHOW_SPINNER
-            )
+            PaidUntilRow(accountExpiry = uiState.accountExpiry)
 
             Spacer(modifier = Modifier.weight(1f))
+
             if (IS_PLAY_BUILD.not()) {
                 ExternalButton(
                     text = stringResource(id = R.string.manage_account),
                     onClick = onManageAccountClick,
-                    modifier =
-                        Modifier.padding(
-                            start = Dimens.sideMargin,
-                            end = Dimens.sideMargin,
-                            bottom = Dimens.screenVerticalMargin
-                        )
+                    modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin)
                 )
             }
 
             RedeemVoucherButton(
                 onClick = onRedeemVoucherClick,
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.screenVerticalMargin
-                    ),
+                modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin),
                 isEnabled = true
             )
 
             NegativeButton(
                 text = stringResource(id = R.string.log_out),
                 onClick = onLogoutClick,
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.screenVerticalMargin
-                    )
+                modifier = Modifier.padding(bottom = Dimens.screenVerticalMargin)
+            )
+        }
+    }
+}
+
+@Composable
+private fun DeviceNameRow(deviceName: String, onInfoClick: () -> Unit) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Text(
+            style = MaterialTheme.typography.labelMedium,
+            text = stringResource(id = R.string.device_name),
+        )
+
+        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+            InformationView(content = deviceName, whenMissing = MissingPolicy.SHOW_SPINNER)
+            IconButton(onClick = onInfoClick) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icon_info),
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.inverseSurface
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun AccountNumberRow(accountNumber: String) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Text(
+            style = MaterialTheme.typography.labelMedium,
+            text = stringResource(id = R.string.account_number),
+        )
+        CopyableObfuscationView(
+            content = accountNumber,
+            modifier = Modifier.heightIn(min = Dimens.accountRowMinHeight).fillMaxWidth()
+        )
+    }
+}
+
+@Composable
+private fun PaidUntilRow(accountExpiry: DateTime?) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Text(
+            style = MaterialTheme.typography.labelMedium,
+            text = stringResource(id = R.string.paid_until),
+        )
+
+        Row(
+            modifier = Modifier.heightIn(min = Dimens.accountRowMinHeight),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            InformationView(
+                content = accountExpiry?.toExpiryDateString() ?: "",
+                whenMissing = MissingPolicy.SHOW_SPINNER
             )
         }
     }

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
@@ -4,6 +4,8 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 data class Dimensions(
+    val accountRowMinHeight: Dp = 48.dp,
+    val accountRowSpacing: Dp = 24.dp,
     val backButtonSideMargin: Dp = 30.dp,
     val buttonHeight: Dp = 44.dp,
     val buttonSeparation: Dp = 18.dp,