Refactor CustomDnsComposeCell to generic switch cell

Co-authored-by: Albin <albin@mullvad.net>

3 files changed, 161 insertions, 92 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomDnsComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomDnsComposeCell.kt
deleted file mode 100644
index 3ed13f812f..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomDnsComposeCell.kt
+++ /dev/null
@@ -1,76 +0,0 @@
-package net.mullvad.mullvadvpn.compose.cell
-
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.sp
-import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.CellSwitch
-import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
-import net.mullvad.mullvadvpn.compose.theme.MullvadWhite60
-
-@Preview
-@Composable
-private fun PreviewDnsComposeCell() {
-    CustomDnsComposeCell(checkboxDefaultState = true, onToggle = {})
-}
-
-@Composable
-fun CustomDnsComposeCell(checkboxDefaultState: Boolean, onToggle: (Boolean) -> Unit) {
-    val titleModifier = Modifier
-    val bodyViewModifier = Modifier
-    val subtitleModifier = Modifier
-
-    BaseCell(
-        title = { CustomDnsCellTitle(modifier = titleModifier) },
-        bodyView = {
-            CustomDnsCellView(
-                switchTriggered = { onToggle(it) },
-                isToggled = checkboxDefaultState,
-                modifier = bodyViewModifier
-            )
-        },
-        onCellClicked = { onToggle(!checkboxDefaultState) },
-        subtitleModifier = subtitleModifier
-    )
-}
-
-@Composable
-fun CustomDnsCellTitle(modifier: Modifier) {
-    val textSize = dimensionResource(id = R.dimen.text_medium_plus).value.sp
-    Text(
-        text = stringResource(R.string.enable_custom_dns),
-        textAlign = TextAlign.Center,
-        fontWeight = FontWeight.Bold,
-        fontSize = textSize,
-        color = MullvadWhite,
-        modifier = modifier.wrapContentWidth(align = Alignment.End).wrapContentHeight()
-    )
-}
-
-@Composable
-fun CustomDnsCellView(switchTriggered: (Boolean) -> Unit, isToggled: Boolean, modifier: Modifier) {
-    Row(modifier = modifier.wrapContentWidth().wrapContentHeight()) {
-        CellSwitch(isChecked = isToggled, onCheckedChange = null)
-    }
-}
-
-@Composable
-fun CustomDnsCellSubtitle(modifier: Modifier) {
-    val textSize = dimensionResource(id = R.dimen.text_small).value.sp
-    Text(
-        text = stringResource(R.string.custom_dns_footer),
-        fontSize = textSize,
-        color = MullvadWhite60,
-        modifier = modifier
-    )
-}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
new file mode 100644
index 0000000000..1112ae01b3
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
@@ -0,0 +1,141 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+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 net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.CellSwitch
+import net.mullvad.mullvadvpn.compose.component.HtmlText
+import net.mullvad.mullvadvpn.compose.component.textResource
+import net.mullvad.mullvadvpn.compose.theme.AlphaActive
+import net.mullvad.mullvadvpn.compose.theme.AlphaInactive
+import net.mullvad.mullvadvpn.compose.theme.MullvadBlue
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite60
+
+@Preview
+@Composable
+private fun PreviewSwitchComposeCell() {
+    SwitchComposeCell(
+        title = "Checkbox Title",
+        isEnabled = true,
+        isToggled = true,
+        onCellClicked = {},
+        onInfoClicked = {}
+    )
+}
+
+@Composable
+fun SwitchComposeCell(
+    title: String,
+    isToggled: Boolean,
+    isEnabled: Boolean = true,
+    background: Color = MullvadBlue,
+    onCellClicked: (Boolean) -> Unit = {},
+    onInfoClicked: (() -> Unit)? = null
+) {
+    val alpha = if (isEnabled) AlphaActive else AlphaInactive
+    val titleModifier = Modifier.alpha(alpha)
+    val bodyViewModifier = Modifier.alpha(alpha)
+    val subtitleModifier = Modifier
+
+    BaseCell(
+        title = { SwitchCellTitle(title = title, modifier = titleModifier) },
+        bodyView = {
+            SwitchCellView(
+                onSwitchClicked = null,
+                isEnabled = isEnabled,
+                isToggled = isToggled,
+                modifier = bodyViewModifier,
+                onInfoClicked = onInfoClicked
+            )
+        },
+        background = background,
+        onCellClicked = { onCellClicked(!isToggled) },
+        subtitleModifier = subtitleModifier
+    )
+}
+
+@Composable
+fun SwitchCellTitle(title: String, modifier: Modifier) {
+    val textSize = dimensionResource(id = R.dimen.text_medium_plus).value.sp
+    Text(
+        text = title,
+        textAlign = TextAlign.Center,
+        fontWeight = FontWeight.Bold,
+        fontSize = textSize,
+        color = MullvadWhite,
+        modifier = modifier.wrapContentWidth(align = Alignment.End).wrapContentHeight()
+    )
+}
+
+@Composable
+fun SwitchCellView(
+    isEnabled: Boolean,
+    isToggled: Boolean,
+    modifier: Modifier,
+    onSwitchClicked: ((Boolean) -> Unit)? = null,
+    onInfoClicked: (() -> Unit)? = null
+) {
+    val horizontalPadding = dimensionResource(id = R.dimen.medium_padding)
+    val verticalPadding = 13.dp
+    Row(
+        modifier = modifier.wrapContentWidth().wrapContentHeight(),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        if (onInfoClicked != null) {
+            Icon(
+                modifier =
+                    Modifier.clickable { onInfoClicked() }
+                        .padding(
+                            start = horizontalPadding,
+                            end = horizontalPadding,
+                            top = verticalPadding,
+                            bottom = verticalPadding,
+                        )
+                        .align(Alignment.CenterVertically),
+                painter = painterResource(id = R.drawable.icon_info),
+                contentDescription = null,
+                tint = MullvadWhite
+            )
+        }
+
+        CellSwitch(isChecked = isToggled, isEnabled = isEnabled, onCheckedChange = onSwitchClicked)
+    }
+}
+
+@Composable
+fun CustomDnsCellSubtitle(isCellClickable: Boolean, modifier: Modifier) {
+    val textSize = dimensionResource(id = R.dimen.text_small).value
+
+    HtmlText(
+        htmlFormattedString =
+            textResource(
+                if (isCellClickable) {
+                    R.string.custom_dns_footer
+                } else {
+                    R.string.custom_dns_disable_mode_subtitle
+                }
+            ),
+        textSize = textSize,
+        textColor = MullvadWhite60.toArgb(),
+        modifier = modifier
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
index 1b50558705..c8acdf5f6c 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AdvancedSettingScreen.kt
@@ -26,10 +26,10 @@ import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.cell.BaseCell
 import net.mullvad.mullvadvpn.compose.cell.CustomDnsCellSubtitle
-import net.mullvad.mullvadvpn.compose.cell.CustomDnsComposeCell
 import net.mullvad.mullvadvpn.compose.cell.DnsCell
 import net.mullvad.mullvadvpn.compose.cell.MtuComposeCell
 import net.mullvad.mullvadvpn.compose.cell.NavigationComposeCell
+import net.mullvad.mullvadvpn.compose.cell.SwitchComposeCell
 import net.mullvad.mullvadvpn.compose.component.CollapsableAwareToolbarScaffold
 import net.mullvad.mullvadvpn.compose.component.CollapsingTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
@@ -65,7 +65,7 @@ private fun PreviewAdvancedSettings() {
         onSaveDnsClick = {},
         onRemoveDnsClick = {},
         onCancelDnsDialogClick = {},
-        onBackClick = {},
+        onBackClick = {}
     )
 }
 
@@ -108,7 +108,7 @@ fun AdvancedSettingScreen(
                 onIpAddressChanged = { onDnsInputChange(it) },
                 onAttemptToSave = { onSaveDnsClick() },
                 onRemove = { onRemoveDnsClick() },
-                onDismiss = { onCancelDnsDialogClick() },
+                onDismiss = { onCancelDnsDialogClick() }
             )
         }
         else -> {
@@ -142,7 +142,7 @@ fun AdvancedSettingScreen(
                     title = stringResource(id = R.string.settings_advanced),
                     progress = progress,
                     modifier = scaffoldModifier,
-                    backTitle = stringResource(id = R.string.settings),
+                    backTitle = stringResource(id = R.string.settings)
                 )
             }
         ) {
@@ -164,9 +164,11 @@ fun AdvancedSettingScreen(
                 }
 
                 itemWithDivider {
-                    CustomDnsComposeCell(
-                        checkboxDefaultState = uiState.isCustomDnsEnabled,
-                        onToggle = { newValue -> onToggleDnsClick(newValue) }
+                    SwitchComposeCell(
+                        title = stringResource(R.string.enable_custom_dns),
+                        isEnabled = true,
+                        isToggled = uiState.isCustomDnsEnabled,
+                        onCellClicked = { newValue -> onToggleDnsClick(newValue) }
                     )
                 }
 
@@ -177,7 +179,7 @@ fun AdvancedSettingScreen(
                             isUnreachableLocalDnsWarningVisible =
                                 item.isLocal && uiState.isAllowLanEnabled.not(),
                             onClick = { onDnsClick(index) },
-                            modifier = Modifier.animateItemPlacement(),
+                            modifier = Modifier.animateItemPlacement()
                         )
                         Divider()
                     }
@@ -188,7 +190,7 @@ fun AdvancedSettingScreen(
                             title = {
                                 Text(
                                     text = stringResource(id = R.string.add_a_server),
-                                    color = Color.White
+                                    color = Color.White,
                                 )
                             },
                             bodyView = {},
@@ -201,13 +203,15 @@ fun AdvancedSettingScreen(
 
                 item {
                     CustomDnsCellSubtitle(
-                        Modifier.background(MullvadDarkBlue)
-                            .padding(
-                                start = cellHorizontalSpacing,
-                                top = topPadding,
-                                end = cellHorizontalSpacing,
-                                bottom = cellVerticalSpacing
-                            )
+                        isCellClickable = true,
+                        modifier =
+                            Modifier.background(MullvadDarkBlue)
+                                .padding(
+                                    start = cellHorizontalSpacing,
+                                    top = topPadding,
+                                    end = cellHorizontalSpacing,
+                                    bottom = cellVerticalSpacing
+                                )
                     )
                 }
             }