Add checkmark icon to selected obfuscation mode

3 files changed, 42 insertions, 14 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
index 47d1c8c894..022fb38256 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
@@ -17,16 +17,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.text.TextStyle
 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.dp
-import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.theme.AppTheme
-import net.mullvad.mullvadvpn.compose.theme.MullvadBlue
-import net.mullvad.mullvadvpn.compose.theme.MullvadDarkBlue
+import net.mullvad.mullvadvpn.compose.theme.Dimens
 
 @Preview
 @Composable
@@ -57,19 +54,20 @@ fun PreviewBaseCell() {
 @Composable
 internal fun BaseCell(
     modifier: Modifier = Modifier,
+    iconView: @Composable () -> Unit = {},
     title: @Composable () -> Unit,
     bodyView: @Composable () -> Unit = {},
     isRowEnabled: Boolean = true,
     onCellClicked: () -> Unit = {},
     subtitle: @Composable (() -> Unit)? = null,
     subtitleModifier: Modifier = Modifier,
-    background: Color = MullvadBlue,
-    startPadding: Dp = dimensionResource(id = R.dimen.cell_left_padding),
-    endPadding: Dp = dimensionResource(id = R.dimen.cell_right_padding)
+    background: Color = MaterialTheme.colorScheme.primary,
+    startPadding: Dp = Dimens.cellStartPadding,
+    endPadding: Dp = Dimens.cellEndPadding
 ) {
-    val cellHeight = dimensionResource(id = R.dimen.cell_height)
-    val cellVerticalSpacing = dimensionResource(id = R.dimen.cell_label_vertical_padding)
-    val subtitleVerticalSpacing = dimensionResource(id = R.dimen.cell_footer_top_padding)
+    val cellHeight = Dimens.cellHeight
+    val cellVerticalSpacing = Dimens.cellLabelVerticalPadding
+    val subtitleVerticalSpacing = Dimens.cellFooterTopPadding
 
     Column(modifier = Modifier.fillMaxWidth().wrapContentHeight().background(background)) {
         val rowModifier =
@@ -87,6 +85,8 @@ internal fun BaseCell(
                     .fillMaxWidth()
                     .padding(start = startPadding, end = endPadding)
         ) {
+            iconView()
+
             title()
 
             Spacer(modifier = Modifier.weight(1.0f))
@@ -98,7 +98,7 @@ internal fun BaseCell(
             Row(
                 modifier =
                     subtitleModifier
-                        .background(MullvadDarkBlue)
+                        .background(MaterialTheme.colorScheme.secondary)
                         .padding(
                             start = startPadding,
                             top = subtitleVerticalSpacing,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
index cead89cc63..8910f63bb7 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
@@ -1,18 +1,41 @@
 package net.mullvad.mullvadvpn.compose.cell
 
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
+import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.theme.Dimens
 
 @Composable
 fun SelectableCell(
     title: String,
     isSelected: Boolean,
+    iconContentDescription: String? = null,
+    selectedIcon: @Composable () -> Unit = {
+        Icon(
+            painter = painterResource(id = R.drawable.icon_tick),
+            contentDescription = iconContentDescription,
+            tint = MaterialTheme.colorScheme.onPrimary,
+            modifier =
+                Modifier.padding(end = Dimens.selectableCellTextMargin)
+                    .alpha(
+                        if (isSelected) {
+                            1f
+                        } else {
+                            0f
+                        }
+                    )
+        )
+    },
     titleStyle: TextStyle = MaterialTheme.typography.labelLarge,
-    startPadding: Dp = Dimens.indentedCellStartPadding,
+    startPadding: Dp = Dimens.cellStartPadding,
     selectedColor: Color = MaterialTheme.colorScheme.surface,
     backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer,
     onCellClicked: () -> Unit = {},
@@ -26,6 +49,7 @@ fun SelectableCell(
             } else {
                 backgroundColor
             },
-        startPadding = startPadding
+        startPadding = startPadding,
+        iconView = selectedIcon
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
index 04236760d3..a017b6e4b2 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
@@ -16,7 +16,11 @@ data class Dimensions(
     val cellEndPadding: Dp = 16.dp,
     val listIconSize: Dp = 24.dp,
     val progressIndicatorSize: Dp = 60.dp,
-    val indentedCellStartPadding: Dp = 38.dp
+    val indentedCellStartPadding: Dp = 38.dp,
+    val cellHeight: Dp = 52.dp,
+    val cellLabelVerticalPadding: Dp = 14.dp,
+    val cellFooterTopPadding: Dp = 6.dp,
+    val selectableCellTextMargin: Dp = 12.dp
 )
 
 val defaultDimensions = Dimensions()