Add spaced column that is useful for cell previews

8 files changed, 31 insertions, 42 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 022fb38256..ff8771452d 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
@@ -21,7 +21,7 @@ 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.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.compose.theme.AppTheme
 import net.mullvad.mullvadvpn.compose.theme.Dimens
 
@@ -29,7 +29,7 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens
 @Composable
 fun PreviewBaseCell() {
     AppTheme {
-        Column {
+        SpacedColumn {
             BaseCell(
                 title = {
                     BaseCellTitle(
@@ -38,7 +38,6 @@ fun PreviewBaseCell() {
                     )
                 }
             )
-            Spacer(modifier = Modifier.height(1.dp))
             BaseCell(
                 title = {
                     BaseCellTitle(
@@ -65,10 +64,6 @@ internal fun BaseCell(
     startPadding: Dp = Dimens.cellStartPadding,
     endPadding: Dp = Dimens.cellEndPadding
 ) {
-    val cellHeight = Dimens.cellHeight
-    val cellVerticalSpacing = Dimens.cellLabelVerticalPadding
-    val subtitleVerticalSpacing = Dimens.cellFooterTopPadding
-
     Column(modifier = Modifier.fillMaxWidth().wrapContentHeight().background(background)) {
         val rowModifier =
             Modifier.let {
@@ -81,7 +76,7 @@ internal fun BaseCell(
             horizontalArrangement = Arrangement.Start,
             modifier =
                 rowModifier
-                    .height(cellHeight)
+                    .height(Dimens.cellHeight)
                     .fillMaxWidth()
                     .padding(start = startPadding, end = endPadding)
         ) {
@@ -101,9 +96,9 @@ internal fun BaseCell(
                         .background(MaterialTheme.colorScheme.secondary)
                         .padding(
                             start = startPadding,
-                            top = subtitleVerticalSpacing,
+                            top = Dimens.cellFooterTopPadding,
                             end = endPadding,
-                            bottom = cellVerticalSpacing
+                            bottom = Dimens.cellLabelVerticalPadding
                         )
                         .fillMaxWidth()
                         .wrapContentHeight()
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
index 17a8065693..8e73679652 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -21,8 +21,8 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ChevronView
 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.AlphaVisible
 import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
 import net.mullvad.mullvadvpn.compose.theme.MullvadWhite60
 
@@ -46,7 +46,7 @@ fun ExpandableComposeCell(
     onCellClicked: (Boolean) -> Unit = {},
     onInfoClicked: (() -> Unit)? = null
 ) {
-    val titleModifier = Modifier.alpha(if (isEnabled) AlphaActive else AlphaInactive)
+    val titleModifier = Modifier.alpha(if (isEnabled) AlphaVisible else AlphaInactive)
     val bodyViewModifier = Modifier
 
     BaseCell(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
index 32ccd1365d..21a3af926e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -17,8 +17,8 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.theme.AlphaActive
 import net.mullvad.mullvadvpn.compose.theme.AlphaInactive
+import net.mullvad.mullvadvpn.compose.theme.AlphaVisible
 import net.mullvad.mullvadvpn.compose.theme.MullvadBlue
 import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
 
@@ -41,7 +41,7 @@ fun InformationComposeCell(
     onCellClicked: () -> Unit = {},
     onInfoClicked: (() -> Unit)? = null
 ) {
-    val titleModifier = Modifier.alpha(if (isEnabled) AlphaActive else AlphaInactive)
+    val titleModifier = Modifier.alpha(if (isEnabled) AlphaVisible else AlphaInactive)
     val bodyViewModifier = Modifier
 
     BaseCell(
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 e49f65f9b8..95272acf11 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,9 +1,6 @@
 package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -15,8 +12,10 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 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.component.SpacedColumn
+import net.mullvad.mullvadvpn.compose.theme.AlphaInvisible
+import net.mullvad.mullvadvpn.compose.theme.AlphaVisible
 import net.mullvad.mullvadvpn.compose.theme.AppTheme
 import net.mullvad.mullvadvpn.compose.theme.Dimens
 
@@ -24,9 +23,8 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens
 @Composable
 private fun PreviewSelectableCell() {
     AppTheme {
-        Column(Modifier.background(MaterialTheme.colorScheme.background)) {
+        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.background)) {
             SelectableCell(title = "Selected", isSelected = true)
-            Spacer(modifier = Modifier.height(1.dp))
             SelectableCell(title = "Not Selected", isSelected = false)
         }
     }
@@ -44,20 +42,14 @@ fun SelectableCell(
             tint = MaterialTheme.colorScheme.onPrimary,
             modifier =
                 Modifier.padding(end = Dimens.selectableCellTextMargin)
-                    .alpha(
-                        if (isSelected) {
-                            1f
-                        } else {
-                            0f
-                        }
-                    )
+                    .alpha(if (isSelected) AlphaVisible else AlphaInvisible)
         )
     },
     titleStyle: TextStyle = MaterialTheme.typography.labelLarge,
     startPadding: Dp = Dimens.cellStartPadding,
     selectedColor: Color = MaterialTheme.colorScheme.surface,
     backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer,
-    onCellClicked: () -> Unit = {},
+    onCellClicked: () -> Unit = {}
 ) {
     BaseCell(
         onCellClicked = onCellClicked,
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
index afbf04ec33..531af3ef46 100644
--- 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
@@ -1,10 +1,7 @@
 package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
@@ -23,6 +20,7 @@ import androidx.core.text.HtmlCompat
 import androidx.core.text.HtmlCompat.FROM_HTML_MODE_COMPACT
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.CellSwitch
+import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.compose.theme.AppTheme
@@ -32,7 +30,7 @@ import net.mullvad.mullvadvpn.compose.theme.Dimens
 @Composable
 private fun PreviewSwitchComposeCell() {
     AppTheme {
-        Column {
+        SpacedColumn {
             HeaderSwitchComposeCell(
                 title = "Checkbox Title",
                 isEnabled = true,
@@ -40,7 +38,6 @@ private fun PreviewSwitchComposeCell() {
                 onCellClicked = {},
                 onInfoClicked = {}
             )
-            Spacer(modifier = Modifier.height(1.dp))
             HeaderSwitchComposeCell(
                 title = "Checkbox Title",
                 isEnabled = true,
@@ -49,7 +46,6 @@ private fun PreviewSwitchComposeCell() {
                 onInfoClicked = {},
                 subtitle = "Subtitle"
             )
-            Spacer(modifier = Modifier.height(1.dp))
             NormalSwitchComposeCell(
                 title = "Checkbox Item",
                 isEnabled = true,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt
index 350cb6b80c..7a78d66ac1 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt
@@ -1,4 +1,4 @@
-package net.mullvad.mullvadvpn.compose.cell
+package net.mullvad.mullvadvpn.compose.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -7,13 +7,18 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.compose.theme.Dimens
 
 @Composable
 fun SpacedColumn(
-    spacing: Dp = 1.dp,
+    modifier: Modifier = Modifier,
+    spacing: Dp = Dimens.listItemDivider,
     alignment: Alignment.Vertical = Alignment.Bottom,
     content: @Composable ColumnScope.() -> Unit
 ) {
-    Column(verticalArrangement = Arrangement.spacedBy(spacing, alignment), content = content)
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(spacing, alignment),
+        content = content
+    )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
index 2c0adcf4cf..49fe9a1b26 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
@@ -21,8 +21,8 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import net.mullvad.mullvadvpn.compose.theme.AlphaActive
 import net.mullvad.mullvadvpn.compose.theme.AlphaInactive
+import net.mullvad.mullvadvpn.compose.theme.AlphaVisible
 import net.mullvad.mullvadvpn.compose.theme.MullvadGreen
 import net.mullvad.mullvadvpn.compose.theme.MullvadRed
 import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
@@ -81,7 +81,7 @@ fun CellSwitch(
         // Track
         drawRoundRect(
             color = thumbColor,
-            alpha = if (isEnabled) AlphaActive else AlphaInactive,
+            alpha = if (isEnabled) AlphaVisible else AlphaInactive,
             cornerRadius = CornerRadius(x = 15.dp.toPx(), y = 15.dp.toPx()),
             style =
                 Stroke(
@@ -94,7 +94,7 @@ fun CellSwitch(
         // Thumb
         drawCircle(
             color = if (isChecked) thumbCheckedTrackColor else thumbUncheckedTrackColor,
-            alpha = if (isEnabled) AlphaActive else AlphaInactive,
+            alpha = if (isEnabled) AlphaVisible else AlphaInactive,
             radius = thumbRadius.toPx(),
             center =
                 Offset(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
index 77e82280bb..0efd386e50 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
@@ -21,5 +21,6 @@ val MullvadWhite40 = Color(0x66FFFFFF)
 val MullvadWhite60 = Color(0x99FFFFFF)
 val MullvadWhite80 = Color(0xCCFFFFFF)
 
-const val AlphaActive = 1f
+const val AlphaVisible = 1f
 const val AlphaInactive = 0.4f
+const val AlphaInvisible = 0f