Fix DPad navigation and align dialog styles

mullvad · Oct 20, 2023 · bed34f3 · bed34f3
1 parent 0805e5f
commit bed34f3
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 302 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
@@ -99,7 +100,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,25 +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.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.AlertDialog
 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.PrimaryButton
 import net.mullvad.mullvadvpn.compose.textfield.DnsTextField
@@ -94,57 +87,31 @@ fun DnsDialog(
     onRemove: () -> Unit,
     onDismiss: () -> Unit
 ) {
-    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
@@ -164,31 +131,37 @@ 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)) {
                 PrimaryButton(
-                    modifier = Modifier.padding(top = mediumPadding),
+                    modifier = Modifier.fillMaxWidth(),
                     onClick = onAttemptToSave,
                     isEnabled = stagedDns.isValid(),
                     text = stringResource(id = R.string.submit_button),
                 )
 
                 if (stagedDns is StagedDns.EditDns) {
                     PrimaryButton(
-                        modifier = Modifier.padding(top = mediumPadding),
+                        modifier = Modifier.fillMaxWidth(),
                         onClick = onRemove,
                         text = stringResource(id = R.string.remove_button)
                     )
                 }
 
                 PrimaryButton(
-                    modifier = Modifier.padding(top = mediumPadding),
+                    modifier = Modifier.fillMaxWidth(),
                     onClick = onDismiss,
                     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,25 +1,17 @@
 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.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.AlertDialog
 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.PrimaryButton
 import net.mullvad.mullvadvpn.compose.textfield.MtuTextField
@@ -45,59 +37,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(
@@ -107,11 +77,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 {
                 PrimaryButton(
-                    modifier = Modifier.padding(top = Dimens.mediumPadding).fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     isEnabled = isValidMtu,
                     text = stringResource(R.string.submit_button),
                     onClick = {
@@ -134,6 +107,8 @@ fun MtuDialog(
                     onClick = onDismiss
                 )
             }
-        }
+        },
+        containerColor = MaterialTheme.colorScheme.background,
+        titleContentColor = MaterialTheme.colorScheme.onBackground,
     )
 }