Fix DPad navigation and align dialog styles

mullvad · Oct 17, 2023 · 46ed9ff · 46ed9ff
1 parent fe1f140
commit 46ed9ff
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 305 deletions.
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
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.AlertDialog
@@ -120,7 +121,7 @@ fun CustomPortDialog(
                         port.value.isNotEmpty() &&
                             allowedPortRanges.isPortInValidRanges(port.value.toIntOrNull() ?: 0),
                     maxCharLength = 5,
-                    modifier = Modifier.testTag(CUSTOM_PORT_DIALOG_INPUT_TEST_TAG)
+                    modifier = Modifier.testTag(CUSTOM_PORT_DIALOG_INPUT_TEST_TAG).fillMaxWidth()
                 )
                 Spacer(modifier = Modifier.height(Dimens.smallPadding))
                 Text(

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
@@ -1,28 +1,19 @@
 package net.mullvad.mullvadvpn.compose.dialog
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
 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.AlertDialog
 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.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-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.textfield.DnsTextField
@@ -61,58 +52,31 @@ fun DnsDialog(
     onRemove: () -> Unit,
     onDismiss: () -> Unit
 ) {
-    val buttonSize = Dimens.buttonHeight
-    val mediumPadding = Dimens.mediumPadding
-    val dialogPadding = 20.dp
-    val midPadding = 10.dp
-    val smallPadding = 5.dp
-
-    val textFieldFocusRequester = FocusRequester()
-
-    Dialog(
-        // Fix for https://issuetracker.google.com/issues/221643630
-        properties = DialogProperties(usePlatformDefaultWidth = false),
-        onDismissRequest = { onDismiss() },
-        content = {
-            Column(
-                Modifier
-                    // Related to the fix for https://issuetracker.google.com/issues/221643630
-                    .fillMaxWidth(0.8f)
-                    .background(
-                        color = MaterialTheme.colorScheme.background,
-                        shape = MaterialTheme.shapes.extraLarge
-                    )
-                    .padding(dialogPadding)
-            ) {
-                Text(
-                    text =
-                        if (stagedDns is StagedDns.NewDns) {
-                            stringResource(R.string.add_dns_server_dialog_title)
-                        } else {
-                            stringResource(R.string.update_dns_server_dialog_title)
-                        },
-                    color = Color.White,
-                    style =
-                        MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.Normal)
+    AlertDialog(
+        title = {
+            Text(
+                text =
+                    if (stagedDns is StagedDns.NewDns) {
+                        stringResource(R.string.add_dns_server_dialog_title)
+                    } else {
+                        stringResource(R.string.update_dns_server_dialog_title)
+                    },
+                color = Color.White,
+                style = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.Normal)
+            )
+        },
+        text = {
+            Column {
+                DnsTextField(
+                    value = stagedDns.item.address,
+                    isValidValue = stagedDns.isValid(),
+                    onValueChanged = { newMtuValue -> onIpAddressChanged(newMtuValue) },
+                    onSubmit = { onAttemptToSave() },
+                    isEnabled = true,
+                    placeholderText = stringResource(R.string.custom_dns_hint),
+                    modifier = Modifier.fillMaxWidth()
                 )
 
-                Box(
-                    Modifier.wrapContentSize().clickable { textFieldFocusRequester.requestFocus() }
-                ) {
-                    DnsTextField(
-                        value = stagedDns.item.address,
-                        isValidValue = stagedDns.isValid(),
-                        onValueChanged = { newMtuValue -> onIpAddressChanged(newMtuValue) },
-                        onFocusChanges = {},
-                        onSubmit = { onAttemptToSave() },
-                        isEnabled = true,
-                        placeholderText = stringResource(R.string.custom_dns_hint),
-                        modifier =
-                            Modifier.padding(top = midPadding)
-                                .focusRequester(textFieldFocusRequester)
-                    )
-                }
-
                 val errorMessage =
                     when {
                         stagedDns.validationResult is
@@ -132,16 +96,15 @@ fun DnsDialog(
                         text = errorMessage,
                         style = MaterialTheme.typography.bodySmall,
                         color = MullvadRed,
-                        modifier = Modifier.padding(top = smallPadding)
+                        modifier = Modifier.padding(top = Dimens.smallPadding)
                     )
                 }
-
+            }
+        },
+        confirmButton = {
+            Column(verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding)) {
                 ActionButton(
-                    modifier =
-                        Modifier.padding(top = mediumPadding)
-                            .height(buttonSize)
-                            .defaultMinSize(minHeight = buttonSize)
-                            .fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     colors =
                         ButtonDefaults.buttonColors(
                             containerColor = MullvadBlue,
@@ -156,11 +119,7 @@ fun DnsDialog(
 
                 if (stagedDns is StagedDns.EditDns) {
                     ActionButton(
-                        modifier =
-                            Modifier.padding(top = mediumPadding)
-                                .height(buttonSize)
-                                .defaultMinSize(minHeight = buttonSize)
-                                .fillMaxWidth(),
+                        modifier = Modifier.fillMaxWidth(),
                         colors =
                             ButtonDefaults.buttonColors(
                                 containerColor = MullvadBlue,
@@ -172,11 +131,7 @@ fun DnsDialog(
                 }
 
                 ActionButton(
-                    modifier =
-                        Modifier.padding(top = mediumPadding)
-                            .height(buttonSize)
-                            .defaultMinSize(minHeight = buttonSize)
-                            .fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     colors =
                         ButtonDefaults.buttonColors(
                             containerColor = MullvadBlue,
@@ -186,6 +141,9 @@ fun DnsDialog(
                     text = stringResource(id = R.string.cancel)
                 )
             }
-        }
+        },
+        onDismissRequest = onDismiss,
+        containerColor = MaterialTheme.colorScheme.background,
+        titleContentColor = MaterialTheme.colorScheme.onBackground,
     )
 }
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
@@ -1,28 +1,18 @@
 package net.mullvad.mullvadvpn.compose.dialog
 
-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.AlertDialog
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-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.textfield.MtuTextField
@@ -50,59 +40,37 @@ fun MtuDialog(
     onRestoreDefaultValue: () -> Unit,
     onDismiss: () -> Unit,
 ) {
-    val dialogPadding = 20.dp
-    val midPadding = 10.dp
-    val smallPadding = 5.dp
-
     val mtu = remember { mutableStateOf(mtuInitial?.toString() ?: "") }
 
-    val textFieldFocusRequester = FocusRequester()
     val isValidMtu = mtu.value.toIntOrNull()?.isValidMtu() == true
 
-    Dialog(
-        // Fix for https://issuetracker.google.com/issues/221643630
-        properties = DialogProperties(usePlatformDefaultWidth = false),
-        onDismissRequest = { onDismiss() },
-        content = {
-            Column(
-                Modifier
-                    // Related to the fix for https://issuetracker.google.com/issues/221643630
-                    .fillMaxWidth(0.8f)
-                    .background(
-                        color = MaterialTheme.colorScheme.background,
-                        shape = MaterialTheme.shapes.extraLarge
-                    )
-                    .padding(dialogPadding)
-            ) {
-                Text(
-                    text = stringResource(id = R.string.wireguard_mtu),
-                    color = MaterialTheme.colorScheme.onBackground,
-                    style = MaterialTheme.typography.headlineSmall
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = {
+            Text(
+                text = stringResource(id = R.string.wireguard_mtu),
+                color = MaterialTheme.colorScheme.onBackground,
+                style = MaterialTheme.typography.headlineSmall
+            )
+        },
+        text = {
+            Column {
+                MtuTextField(
+                    value = mtu.value,
+                    onValueChanged = { newMtuValue -> mtu.value = newMtuValue },
+                    onSubmit = { newMtuValue ->
+                        val mtuInt = newMtuValue.toIntOrNull()
+                        if (mtuInt?.isValidMtu() == true) {
+                            onSave(mtuInt)
+                        }
+                    },
+                    isEnabled = true,
+                    placeholderText = stringResource(R.string.enter_value_placeholder),
+                    maxCharLength = 4,
+                    isValidValue = isValidMtu,
+                    modifier = Modifier.fillMaxWidth()
                 )
 
-                Box(
-                    Modifier.wrapContentSize().clickable { textFieldFocusRequester.requestFocus() }
-                ) {
-                    MtuTextField(
-                        value = mtu.value,
-                        onValueChanged = { newMtuValue -> mtu.value = newMtuValue },
-                        onFocusChange = {},
-                        onSubmit = { newMtuValue ->
-                            val mtuInt = newMtuValue.toIntOrNull()
-                            if (mtuInt?.isValidMtu() == true) {
-                                onSave(mtuInt)
-                            }
-                        },
-                        isEnabled = true,
-                        placeholderText = stringResource(R.string.enter_value_placeholder),
-                        maxCharLength = 4,
-                        isValidValue = isValidMtu,
-                        modifier =
-                            Modifier.padding(top = midPadding)
-                                .focusRequester(textFieldFocusRequester)
-                    )
-                }
-
                 Text(
                     text =
                         stringResource(
@@ -112,14 +80,14 @@ fun MtuDialog(
                         ),
                     style = MaterialTheme.typography.bodySmall,
                     color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaDescription),
-                    modifier = Modifier.padding(top = smallPadding)
+                    modifier = Modifier.padding(top = Dimens.smallPadding)
                 )
-
+            }
+        },
+        confirmButton = {
+            Column {
                 ActionButton(
-                    modifier =
-                        Modifier.padding(top = Dimens.mediumPadding)
-                            .height(Dimens.buttonHeight)
-                            .fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     colors =
                         ButtonDefaults.buttonColors(
                             containerColor = MaterialTheme.colorScheme.primary,
@@ -140,11 +108,7 @@ fun MtuDialog(
                 )
 
                 ActionButton(
-                    modifier =
-                        Modifier.padding(top = Dimens.mediumPadding)
-                            .height(Dimens.buttonHeight)
-                            .defaultMinSize(minHeight = Dimens.buttonHeight)
-                            .fillMaxWidth(),
+                    modifier = Modifier.padding(top = Dimens.mediumPadding).fillMaxWidth(),
                     colors =
                         ButtonDefaults.buttonColors(
                             containerColor = MaterialTheme.colorScheme.primary,
@@ -155,11 +119,7 @@ fun MtuDialog(
                 )
 
                 ActionButton(
-                    modifier =
-                        Modifier.padding(top = Dimens.mediumPadding)
-                            .height(Dimens.buttonHeight)
-                            .defaultMinSize(minHeight = Dimens.buttonHeight)
-                            .fillMaxWidth(),
+                    modifier = Modifier.padding(top = Dimens.mediumPadding).fillMaxWidth(),
                     colors =
                         ButtonDefaults.buttonColors(
                             containerColor = MaterialTheme.colorScheme.primary,
@@ -169,6 +129,8 @@ fun MtuDialog(
                     onClick = onDismiss
                 )
             }
-        }
+        },
+        containerColor = MaterialTheme.colorScheme.background,
+        titleContentColor = MaterialTheme.colorScheme.onBackground,
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
@@ -34,6 +34,7 @@ import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.state.VoucherDialogState
 import net.mullvad.mullvadvpn.compose.state.VoucherDialogUiState
 import net.mullvad.mullvadvpn.compose.textfield.GroupedTextField
+import net.mullvad.mullvadvpn.compose.util.MAX_VOUCHER_LENGTH
 import net.mullvad.mullvadvpn.compose.util.vouchersVisualTransformation
 import net.mullvad.mullvadvpn.constant.VOUCHER_LENGTH
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -241,16 +242,12 @@ private fun EnterVoucherBody(
                 }
             },
             onValueChanged = { input -> onVoucherInputChange(input.uppercase()) },
-            isValidValue = uiState.voucherInput.isNotEmpty(),
+            isValidValue =
+                uiState.voucherInput.isEmpty() || uiState.voucherInput.length == MAX_VOUCHER_LENGTH,
             keyboardType = KeyboardType.Password,
             placeholderText = stringResource(id = R.string.voucher_hint),
-            placeHolderColor =
-                MaterialTheme.colorScheme.onPrimary
-                    .copy(alpha = AlphaDisabled)
-                    .compositeOver(MaterialTheme.colorScheme.primary),
             visualTransformation = vouchersVisualTransformation(),
             maxCharLength = VOUCHER_LENGTH,
-            onFocusChange = {},
             isDigitsOnlyAllowed = false,
             isEnabled = true,
             modifier = Modifier.focusRequester(textFieldFocusRequester),

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomPortTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomPortTextField.kt
@@ -21,7 +21,6 @@ fun CustomPortTextField(
         modifier = modifier,
         placeholderText = stringResource(id = R.string.custom_port_dialog_placeholder),
         onValueChanged = onValueChanged,
-        onFocusChange = {},
         onSubmit = onSubmit,
         isDigitsOnlyAllowed = true,
         isEnabled = true,