Update design for local dns

3 files changed, 42 insertions, 14 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
index 1aacaedbc1..8fe5f32b99 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
@@ -15,7 +15,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.theme.color.warning
 
 @Preview
 @Composable
@@ -42,7 +41,7 @@ fun DnsCell(
                 Icon(
                     imageVector = Icons.Rounded.Error,
                     contentDescription = stringResource(id = R.string.confirm_local_dns),
-                    tint = MaterialTheme.colorScheme.warning,
+                    tint = MaterialTheme.colorScheme.error,
                 )
             }
         },
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
index dd08a71c3a..c2e94ded5b 100644
--- 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
@@ -92,21 +92,21 @@ fun DnsDialog(
                 onSubmit = onSaveDnsClick,
                 isEnabled = true,
                 placeholderText = stringResource(R.string.custom_dns_hint),
+                errorText =
+                    when {
+                        state.validationError is ValidationError.DuplicateAddress -> {
+                            stringResource(R.string.duplicate_address_warning)
+                        }
+                        state.isLocal && !state.isAllowLanEnabled -> {
+                            stringResource(id = R.string.confirm_local_dns)
+                        }
+                        else -> {
+                            null
+                        }
+                    },
                 modifier = Modifier.fillMaxWidth(),
             )
         },
-        message =
-            when {
-                state.validationError is ValidationError.DuplicateAddress -> {
-                    stringResource(R.string.duplicate_address_warning)
-                }
-                state.isLocal && !state.isAllowLanEnabled -> {
-                    stringResource(id = R.string.confirm_local_dns)
-                }
-                else -> {
-                    null
-                }
-            },
         onResetButtonText = stringResource(id = R.string.remove_button),
         confirmButtonEnabled = state.isValid(),
         messageTextColor = MaterialTheme.colorScheme.error,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/DnsTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/DnsTextField.kt
index a2c8877e78..d277a4d394 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/DnsTextField.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/DnsTextField.kt
@@ -1,8 +1,17 @@
 package net.mullvad.mullvadvpn.compose.textfield
 
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Error
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Composable
 fun DnsTextField(
@@ -11,6 +20,7 @@ fun DnsTextField(
     onValueChanged: (String) -> Unit = {},
     onSubmit: () -> Unit = {},
     placeholderText: String?,
+    errorText: String?,
     isEnabled: Boolean = true,
     isValidValue: Boolean = true,
 ) {
@@ -22,8 +32,27 @@ fun DnsTextField(
         onSubmit = { onSubmit() },
         isEnabled = isEnabled,
         placeholderText = placeholderText,
+        supportingText = errorText?.let { { ErrorSupportingText(errorText) } },
         maxCharLength = Int.MAX_VALUE,
         isDigitsOnlyAllowed = false,
         isValidValue = isValidValue,
     )
 }
+
+@Composable
+private fun ErrorSupportingText(text: String) {
+    Row(modifier = Modifier.padding(top = Dimens.miniPadding)) {
+        Icon(
+            imageVector = Icons.Default.Error,
+            contentDescription = null,
+            modifier = Modifier.size(Dimens.smallIconSize),
+            tint = MaterialTheme.colorScheme.error,
+        )
+        Text(
+            text = text,
+            color = MaterialTheme.colorScheme.onSecondary,
+            style = MaterialTheme.typography.bodySmall,
+            modifier = Modifier.padding(horizontal = Dimens.smallPadding),
+        )
+    }
+}