Fix incorrect text styles in info dialog

Also make the dialog implement theme for colors and text styles

2 files changed, 27 insertions, 36 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
index 6f22d65fb1..b11ef59630 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -14,20 +13,16 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.toArgb
-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.text.font.FontStyle
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.DialogProperties
+import androidx.core.text.HtmlCompat
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.HtmlText
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
+import net.mullvad.mullvadvpn.compose.button.ActionButton
+import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Preview
 @Composable
@@ -37,21 +32,21 @@ private fun PreviewChangelogDialogWithTwoLongItems() {
             "The purpose of this specific sample text is to visualize a long text that will " +
             "result in multiple lines in the changelog dialog."
 
-    InfoDialog(message = longPreviewText, additionalInfo = longPreviewText, onDismiss = {})
+    AppTheme {
+        InfoDialog(message = longPreviewText, additionalInfo = longPreviewText, onDismiss = {})
+    }
 }
 
 @Composable
 fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () -> Unit) {
-    val verticalSpacing = 24.dp
-    val iconHeight = 44.dp
     AlertDialog(
         onDismissRequest = { onDismiss() },
         title = {
             Icon(
-                modifier = Modifier.fillMaxWidth().height(iconHeight),
+                modifier = Modifier.fillMaxWidth().height(Dimens.dialogIconHeight),
                 painter = painterResource(id = R.drawable.icon_info),
                 contentDescription = "",
-                tint = MullvadWhite
+                tint = MaterialTheme.colorScheme.onBackground
             )
         },
         text = {
@@ -60,45 +55,40 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
             ) {
                 Text(
                     text = message,
-                    color = colorResource(id = R.color.white),
-                    fontSize = dimensionResource(id = R.dimen.text_small).value.sp,
-                    fontStyle = FontStyle.Normal,
-                    textAlign = TextAlign.Start,
+                    color = MaterialTheme.colorScheme.onBackground,
+                    style = MaterialTheme.typography.bodySmall,
                     modifier = Modifier.fillMaxWidth()
                 )
                 if (additionalInfo != null) {
-                    Spacer(modifier = Modifier.height(verticalSpacing))
-                    HtmlText(
-                        htmlFormattedString = additionalInfo,
-                        textColor = colorResource(id = R.color.white).toArgb(),
-                        textSize = dimensionResource(id = R.dimen.text_small).value,
+                    Spacer(modifier = Modifier.height(Dimens.verticalSpace))
+                    val htmlFormattedString =
+                        HtmlCompat.fromHtml(additionalInfo, HtmlCompat.FROM_HTML_MODE_COMPACT)
+                    Text(
+                        text = htmlFormattedString.toAnnotatedString(),
+                        color = MaterialTheme.colorScheme.onBackground,
+                        style = MaterialTheme.typography.bodySmall,
                         modifier = Modifier.fillMaxWidth()
                     )
                 }
             }
         },
         confirmButton = {
-            Button(
+            ActionButton(
                 modifier = Modifier.wrapContentHeight().fillMaxWidth(),
+                text = stringResource(R.string.changes_dialog_dismiss_button),
                 colors =
                     ButtonDefaults.buttonColors(
-                        containerColor = colorResource(id = R.color.blue),
-                        contentColor = colorResource(id = R.color.white)
+                        containerColor = MaterialTheme.colorScheme.primary,
+                        contentColor = MaterialTheme.colorScheme.onPrimary,
                     ),
-                onClick = { onDismiss() },
-                shape = MaterialTheme.shapes.small
-            ) {
-                Text(
-                    text = stringResource(R.string.changes_dialog_dismiss_button),
-                    fontSize = dimensionResource(id = R.dimen.text_medium_plus).value.sp,
-                )
-            }
+                onClick = onDismiss,
+            )
         },
         properties =
             DialogProperties(
                 dismissOnClickOutside = true,
                 dismissOnBackPress = true,
             ),
-        containerColor = colorResource(id = R.color.darkBlue)
+        containerColor = MaterialTheme.colorScheme.background
     )
 }
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 23e9910735..d80b3e381f 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
@@ -19,6 +19,7 @@ data class Dimensions(
     val connectButtonHeight: Dp = 50.dp,
     val countryRowPadding: Dp = 18.dp,
     val customPortBoxMinWidth: Dp = 80.dp,
+    val dialogIconHeight: Dp = 44.dp,
     val expandableCellChevronSize: Dp = 30.dp,
     val indentedCellStartPadding: Dp = 38.dp,
     val infoButtonVerticalPadding: Dp = 13.dp,