Remove SpacedColumn

21 files changed, 222 insertions, 257 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
index 4c412f468b..d4f51f0b21 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
@@ -1,5 +1,7 @@
 package net.mullvad.mullvadvpn.compose.button
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -7,15 +9,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.VariantButton
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewApplyButton() {
     AppTheme {
-        SpacedColumn {
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.mediumSpacer)) {
             ApplyButton(onClick = {}, isEnabled = true)
             ApplyButton(onClick = {}, isEnabled = false)
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
index b39557129c..c082a7238a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
@@ -1,19 +1,21 @@
 package net.mullvad.mullvadvpn.compose.button
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.VariantButton
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewRedeemVoucherButton() {
     AppTheme {
-        SpacedColumn {
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.mediumSpacer)) {
             RedeemVoucherButton(onClick = {}, isEnabled = true)
             RedeemVoucherButton(onClick = {}, isEnabled = false)
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
index 960d7da577..e8ffdbcaa0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
@@ -1,13 +1,12 @@
 package net.mullvad.mullvadvpn.compose.button
 
-import androidx.compose.foundation.background
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
@@ -15,10 +14,7 @@ import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 @Composable
 private fun PreviewSitePaymentButton() {
     AppTheme {
-        SpacedColumn(
-            spacing = Dimens.cellVerticalSpacing,
-            modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
-        ) {
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.mediumSpacer)) {
             SitePaymentButton(onClick = {}, isEnabled = true)
             SitePaymentButton(onClick = {}, isEnabled = false)
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
index caf35065e2..e26120a906 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
@@ -1,5 +1,7 @@
 package net.mullvad.mullvadvpn.compose.button
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -31,7 +33,6 @@ import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
@@ -39,7 +40,7 @@ import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 @Composable
 private fun PreviewConnectionButton() {
     AppTheme {
-        SpacedColumn {
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.mediumSpacer)) {
             SwitchLocationButton(
                 text = "Switch Location",
                 onSwitchLocation = {},
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
deleted file mode 100644
index f560ba4ddd..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/SpacedColumn.kt
+++ /dev/null
@@ -1,26 +0,0 @@
-package net.mullvad.mullvadvpn.compose.component
-
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.Dp
-import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
-
-@Composable
-fun SpacedColumn(
-    modifier: Modifier = Modifier,
-    spacing: Dp = Dimens.listItemDivider,
-    verticalAlignment: Alignment.Vertical = Alignment.Bottom,
-    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
-    content: @Composable ColumnScope.() -> Unit,
-) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(spacing, verticalAlignment),
-        horizontalAlignment = horizontalAlignment,
-        content = content,
-    )
-}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
index 8ac62a8b7d..af054888a0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
@@ -1,6 +1,8 @@
 package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
@@ -37,7 +39,6 @@ import com.ramcosta.composedestinations.result.ResultRecipient
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
-import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.compose.extensions.dropUnlessResumed
 import net.mullvad.mullvadvpn.compose.preview.EditCustomListUiStatePreviewParameterProvider
 import net.mullvad.mullvadvpn.compose.state.EditCustomListUiState
@@ -144,9 +145,9 @@ fun EditCustomListScreen(
             )
         },
     ) { modifier: Modifier ->
-        SpacedColumn(
+        Column(
             modifier = modifier,
-            verticalAlignment = Alignment.Top,
+            verticalArrangement = Arrangement.spacedBy(Dimens.listItemDivider),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             when (state) {
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CheckableListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CheckableListItem.kt
index fa242a1884..2fa08aa94b 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CheckableListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CheckableListItem.kt
@@ -5,49 +5,46 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Checkbox
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Hierarchy
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Composable
 @Preview
 private fun PreviewCheckableListItem() {
-    AppTheme {
-        PreviewSpacedColumn {
-            CheckableListItem(title = "Parent 1", isChecked = true, onCheckedChange = {})
-            CheckableListItem(
-                title = "Parent 2",
-                isChecked = false,
-                position = Position.Top,
-                onCheckedChange = {},
-            )
-            CheckableListItem(
-                title = "Child 1",
-                isChecked = false,
-                position = Position.Middle,
-                hierarchy = Hierarchy.Child1,
-                onCheckedChange = {},
-            )
-            CheckableListItem(
-                title = "Child 2",
-                isChecked = true,
-                position = Position.Middle,
-                hierarchy = Hierarchy.Child2,
-                isEnabled = false,
-                onCheckedChange = {},
-            )
-            CheckableListItem(
-                title = "Child 2",
-                isChecked = true,
-                position = Position.Bottom,
-                hierarchy = Hierarchy.Child2,
-                onCheckedChange = {},
-            )
-        }
+    PreviewColumn {
+        CheckableListItem(title = "Parent 1", isChecked = true, onCheckedChange = {})
+        CheckableListItem(
+            title = "Parent 2",
+            isChecked = false,
+            position = Position.Top,
+            onCheckedChange = {},
+        )
+        CheckableListItem(
+            title = "Child 1",
+            isChecked = false,
+            position = Position.Middle,
+            hierarchy = Hierarchy.Child1,
+            onCheckedChange = {},
+        )
+        CheckableListItem(
+            title = "Child 2",
+            isChecked = true,
+            position = Position.Middle,
+            hierarchy = Hierarchy.Child2,
+            isEnabled = false,
+            onCheckedChange = {},
+        )
+        CheckableListItem(
+            title = "Child 2",
+            isChecked = true,
+            position = Position.Bottom,
+            hierarchy = Hierarchy.Child2,
+            onCheckedChange = {},
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CustomPortListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CustomPortListItem.kt
index 9aad585e06..f272686d22 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CustomPortListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/CustomPortListItem.kt
@@ -13,45 +13,42 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.lib.model.Port
 import net.mullvad.mullvadvpn.lib.ui.component.DividerButton
 import net.mullvad.mullvadvpn.lib.ui.component.R
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Hierarchy
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemClickArea
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemDefaults
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.util.applyIfNotNull
 
 @Preview
 @Composable
 private fun PreviewCustomPortListItem() {
-    AppTheme {
-        PreviewSpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            CustomPortListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Custom",
-                isSelected = true,
-                port = Port(4444),
-                onPortCellClicked = {},
-                onMainCellClicked = {},
-            )
-            CustomPortListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Custom",
-                isSelected = true,
-                isEnabled = false,
-                port = Port(44449),
-                onPortCellClicked = {},
-                onMainCellClicked = {},
-            )
-            CustomPortListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Custom",
-                isSelected = false,
-                port = null,
-                onPortCellClicked = {},
-                onMainCellClicked = {},
-            )
-        }
+    PreviewColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
+        CustomPortListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Custom",
+            isSelected = true,
+            port = Port(4444),
+            onPortCellClicked = {},
+            onMainCellClicked = {},
+        )
+        CustomPortListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Custom",
+            isSelected = true,
+            isEnabled = false,
+            port = Port(44449),
+            onPortCellClicked = {},
+            onMainCellClicked = {},
+        )
+        CustomPortListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Custom",
+            isSelected = false,
+            port = null,
+            onPortCellClicked = {},
+            onMainCellClicked = {},
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ExternalLinkListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ExternalLinkListItem.kt
index 789b4a6abf..23480bab41 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ExternalLinkListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ExternalLinkListItem.kt
@@ -14,28 +14,25 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.lib.ui.component.R
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Hierarchy
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemColors
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemDefaults
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewExternalLinkListItem() {
-    AppTheme {
-        PreviewSpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            ExternalLinkListItem(title = "Navigation sample", showWarning = false, onClick = {})
-            ExternalLinkListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Navigation sample",
-                showWarning = true,
-                onClick = {},
-            )
-        }
+    PreviewColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
+        ExternalLinkListItem(title = "Navigation sample", showWarning = false, onClick = {})
+        ExternalLinkListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Navigation sample",
+            showWarning = true,
+            onClick = {},
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/IconListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/IconListItem.kt
index d32168822c..fb0a03fe69 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/IconListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/IconListItem.kt
@@ -12,30 +12,27 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemColors
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemDefaults
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewExternalLinkListItem() {
-    AppTheme {
-        PreviewSpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            IconListItem(
-                title = "Navigation sample",
-                leadingIcon = Icons.Default.Settings,
-                onClick = {},
-            )
-            IconListItem(
-                title = "Navigation sample",
-                leadingIcon = Icons.Default.AccountBalance,
-                onClick = {},
-            )
-        }
+    PreviewColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
+        IconListItem(
+            title = "Navigation sample",
+            leadingIcon = Icons.Default.Settings,
+            onClick = {},
+        )
+        IconListItem(
+            title = "Navigation sample",
+            leadingIcon = Icons.Default.AccountBalance,
+            onClick = {},
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/NavigationListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/NavigationListItem.kt
index 11c90600f5..daa4142687 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/NavigationListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/NavigationListItem.kt
@@ -13,33 +13,30 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.lib.ui.component.R
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Hierarchy
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Preview
 @Composable
 private fun PreviewNavigationListItem() {
-    AppTheme {
-        PreviewSpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            NavigationListItem(title = "Navigation sample", showWarning = false, onClick = {})
-            NavigationListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Navigation sample",
-                showWarning = true,
-                onClick = {},
-            )
-            NavigationListItem(
-                hierarchy = Hierarchy.Child1,
-                title = "Navigation sample",
-                subtitle = "Navigation sample",
-                showWarning = false,
-                onClick = {},
-            )
-        }
+    PreviewColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
+        NavigationListItem(title = "Navigation sample", showWarning = false, onClick = {})
+        NavigationListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Navigation sample",
+            showWarning = true,
+            onClick = {},
+        )
+        NavigationListItem(
+            hierarchy = Hierarchy.Child1,
+            title = "Navigation sample",
+            subtitle = "Navigation sample",
+            showWarning = false,
+            onClick = {},
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ServerIpOverridesListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ServerIpOverridesListItem.kt
index 91e729eef3..748547e2d6 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ServerIpOverridesListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/ServerIpOverridesListItem.kt
@@ -13,20 +13,19 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.lib.ui.component.R
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorSmall
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.selected
 
 @Preview
 @Composable
 private fun PreviewServerIpOverridesListItem() {
-    PreviewSpacedColumn {
-        AppTheme { ServerIpOverridesListItem(active = true) }
-        AppTheme { ServerIpOverridesListItem(active = false) }
-        AppTheme { ServerIpOverridesListItem(active = null) }
+    PreviewColumn {
+        ServerIpOverridesListItem(active = true)
+        ServerIpOverridesListItem(active = false)
+        ServerIpOverridesListItem(active = null)
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/SplitTunnelingListItem.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/SplitTunnelingListItem.kt
index 60e390f7d3..66c255948b 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/SplitTunnelingListItem.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/listitem/SplitTunnelingListItem.kt
@@ -24,42 +24,39 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.drawablepainter.rememberDrawablePainter
-import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewSpacedColumn
+import net.mullvad.mullvadvpn.lib.ui.component.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Hierarchy
 import net.mullvad.mullvadvpn.lib.ui.designsystem.ListItemDefaults
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaDisabled
 
 @Preview
 @Composable
 private fun PreviewSplitTunnelingListItem() {
-    AppTheme {
-        PreviewSpacedColumn {
-            SplitTunnelingListItem(
-                title = "Removable App",
-                isEnabled = true,
-                onCellClicked = {},
-                isSelected = true,
-                iconState = IconState.Loading,
-            )
-            SplitTunnelingListItem(
-                title = "Addable App",
-                isEnabled = true,
-                onCellClicked = {},
-                isSelected = false,
-                iconState = IconState.Loading,
-            )
-            SplitTunnelingListItem(
-                title = "Disabled App",
-                isEnabled = false,
-                onCellClicked = {},
-                isSelected = false,
-                iconState = IconState.NoIcon,
-            )
-        }
+    PreviewColumn {
+        SplitTunnelingListItem(
+            title = "Removable App",
+            isEnabled = true,
+            onCellClicked = {},
+            isSelected = true,
+            iconState = IconState.Loading,
+        )
+        SplitTunnelingListItem(
+            title = "Addable App",
+            isEnabled = true,
+            onCellClicked = {},
+            isSelected = false,
+            iconState = IconState.Loading,
+        )
+        SplitTunnelingListItem(
+            title = "Disabled App",
+            isEnabled = false,
+            onCellClicked = {},
+            isSelected = false,
+            iconState = IconState.NoIcon,
+        )
     }
 }
 
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/preview/PreviewSpacedColumn.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/preview/PreviewColumn.kt
index 1af6e7bc61..a4fd71df03 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/preview/PreviewSpacedColumn.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/preview/PreviewColumn.kt
@@ -7,20 +7,23 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
+import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 @Composable
-internal fun PreviewSpacedColumn(
+internal fun PreviewColumn(
     modifier: Modifier = Modifier,
     spacing: Dp = Dimens.listItemDivider,
     verticalAlignment: Alignment.Vertical = Alignment.Bottom,
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     content: @Composable ColumnScope.() -> Unit,
 ) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(spacing, verticalAlignment),
-        horizontalAlignment = horizontalAlignment,
-        content = content,
-    )
+    AppTheme {
+        Column(
+            modifier = modifier,
+            verticalArrangement = Arrangement.spacedBy(spacing, verticalAlignment),
+            horizontalAlignment = horizontalAlignment,
+            content = content,
+        )
+    }
 }
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Checkbox.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Checkbox.kt
index d57ab81269..7c0312e0be 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Checkbox.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Checkbox.kt
@@ -1,9 +1,6 @@
 package net.mullvad.mullvadvpn.lib.ui.designsystem
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Checkbox as Material3Checkbox
 import androidx.compose.material3.CheckboxColors
 import androidx.compose.material3.CheckboxDefaults
@@ -11,8 +8,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.color.selected
 
 @Composable
@@ -42,15 +38,10 @@ fun Checkbox(
 @Preview
 @Composable
 private fun PreviewCheckbox() {
-    AppTheme {
-        Column(
-            Modifier.background(color = MaterialTheme.colorScheme.background),
-            verticalArrangement = Arrangement.spacedBy(Dimens.smallSpacer),
-        ) {
-            Checkbox(checked = false, null)
-            Checkbox(checked = true, null)
-            Checkbox(checked = false, null, enabled = false)
-            Checkbox(checked = true, null, enabled = false)
-        }
+    PreviewColumn {
+        Checkbox(checked = false, null)
+        Checkbox(checked = true, null)
+        Checkbox(checked = false, null, enabled = false)
+        Checkbox(checked = true, null, enabled = false)
     }
 }
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/CircularProgressIndicator.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/CircularProgressIndicator.kt
index 10d5b539cd..265430e8b1 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/CircularProgressIndicator.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/CircularProgressIndicator.kt
@@ -1,7 +1,5 @@
 package net.mullvad.mullvadvpn.lib.ui.designsystem
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.CircularProgressIndicator
@@ -12,24 +10,18 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.tag.CIRCULAR_PROGRESS_INDICATOR_TEST_TAG
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.Alpha20
 
 @Preview
 @Composable
 private fun PreviewMullvadProgressIndicator() {
-    AppTheme {
-        Column(
-            modifier = Modifier.padding(16.dp),
-            verticalArrangement = Arrangement.spacedBy(16.dp),
-        ) {
-            MullvadCircularProgressIndicatorLarge()
-            MullvadCircularProgressIndicatorMedium()
-            MullvadCircularProgressIndicatorSmall()
-        }
+    PreviewColumn {
+        MullvadCircularProgressIndicatorLarge()
+        MullvadCircularProgressIndicatorMedium()
+        MullvadCircularProgressIndicatorSmall()
     }
 }
 
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FeatureChip.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FeatureChip.kt
index 7fb1d3f6ae..9d09564ede 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FeatureChip.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FeatureChip.kt
@@ -1,6 +1,5 @@
 package net.mullvad.mullvadvpn.lib.ui.designsystem
 
-import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.MaterialTheme
@@ -10,13 +9,16 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.shape.chipShape
 
 @Preview
 @Composable
 private fun PreviewMullvadFeatureChip() {
-    AppTheme { Row { MullvadFeatureChip(text = "DAITA", onClick = {}) } }
+    PreviewColumn {
+        MullvadFeatureChip(text = "DAITA", onClick = {})
+        MullvadFeatureChip(text = "Local Network Sharing", onClick = {})
+    }
 }
 
 @Composable
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FilterChip.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FilterChip.kt
index e0727033c7..7f8cfba24e 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FilterChip.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/FilterChip.kt
@@ -12,20 +12,20 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.shape.chipShape
 
 @Preview
 @Composable
-private fun PreviewEnabledMullvadFilterChip() {
-    AppTheme { MullvadFilterChip(text = "Providers:", onRemoveClick = {}, enabled = true) }
+private fun PreviewEnabledMullvadFilterChip() = PreviewColumn {
+    MullvadFilterChip(text = "Providers: 10", onRemoveClick = {}, enabled = true)
 }
 
 @Preview
 @Composable
-private fun PreviewDisabledMullvadFilterChip() {
-    AppTheme { MullvadFilterChip(text = "Providers:", onRemoveClick = {}, enabled = false) }
+private fun PreviewDisabledMullvadFilterChip() = PreviewColumn {
+    MullvadFilterChip(text = "Providers: 17", onRemoveClick = {}, enabled = false)
 }
 
 @Composable
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/ListHeader.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/ListHeader.kt
index 86bf2ad3a0..8efc33f869 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/ListHeader.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/ListHeader.kt
@@ -1,6 +1,5 @@
 package net.mullvad.mullvadvpn.lib.ui.designsystem
 
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
@@ -19,7 +18,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 
 private val LIST_HEADER_MIN_HEIGHT = 48.dp
@@ -65,18 +64,15 @@ object RelayListHeaderTokens {
 
 @Preview(backgroundColor = 0xFF192E45, showBackground = true)
 @Composable
-fun PreviewListHeader() {
-    AppTheme {
-        Column {
-            ListHeader(content = { Text("Header") })
-            ListHeader(
-                content = { Text("Header") },
-                actions = {
-                    IconButton(onClick = {}) {
-                        Icon(imageVector = Icons.Default.Edit, contentDescription = null)
-                    }
-                },
-            )
-        }
+fun PreviewListHeader() =
+    PreviewColumn(Modifier.padding(horizontal = Dimens.mediumPadding)) {
+        ListHeader(content = { Text("Header") })
+        ListHeader(
+            content = { Text("Header") },
+            actions = {
+                IconButton(onClick = {}) {
+                    Icon(imageVector = Icons.Default.Edit, contentDescription = null)
+                }
+            },
+        )
     }
-}
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Switch.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Switch.kt
index b2e6ff6b9e..01d5a91319 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Switch.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/Switch.kt
@@ -1,12 +1,9 @@
 package net.mullvad.mullvadvpn.lib.ui.designsystem
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchColors
 import androidx.compose.material3.SwitchDefaults
@@ -16,24 +13,20 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.lib.ui.designsystem.preview.PreviewColumn
 import net.mullvad.mullvadvpn.lib.ui.tag.SWITCH_TEST_TAG
-import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaDisabled
 import net.mullvad.mullvadvpn.lib.ui.theme.color.selected
 
-@Preview
+@Preview(backgroundColor = 0xFF192E45, showBackground = true)
 @Composable
 private fun PreviewMullvadSwitch() {
-    AppTheme {
-        Surface(color = MaterialTheme.colorScheme.surface) {
-            Column(modifier = Modifier.padding(Dimens.sideMargin)) {
-                MullvadSwitch(checked = true, onCheckedChange = null)
-                MullvadSwitch(checked = false, onCheckedChange = null)
-                MullvadSwitch(checked = true, onCheckedChange = null, enabled = false)
-                MullvadSwitch(checked = false, onCheckedChange = null, enabled = false)
-            }
-        }
+    PreviewColumn() {
+        MullvadSwitch(checked = true, onCheckedChange = null)
+        MullvadSwitch(checked = false, onCheckedChange = null)
+        MullvadSwitch(checked = true, onCheckedChange = null, enabled = false)
+        MullvadSwitch(checked = false, onCheckedChange = null, enabled = false)
     }
 }
 
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/preview/PreviewColumn.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/preview/PreviewColumn.kt
new file mode 100644
index 0000000000..01d0265220
--- /dev/null
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/preview/PreviewColumn.kt
@@ -0,0 +1,31 @@
+package net.mullvad.mullvadvpn.lib.ui.designsystem.preview
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+
+@Composable
+internal fun PreviewColumn(
+    @SuppressLint("ModifierParameter") modifier: Modifier = Modifier.padding(Dimens.mediumPadding),
+    spacing: Dp = Dimens.mediumSpacer,
+    verticalAlignment: Alignment.Vertical = Alignment.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    AppTheme {
+        Column(
+            modifier = modifier,
+            verticalArrangement = Arrangement.spacedBy(spacing, verticalAlignment),
+            horizontalAlignment = horizontalAlignment,
+            content = content,
+        )
+    }
+}