Adjust most dimensions to a 8pt grid systems in most cases

8 files changed, 42 insertions, 55 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
index 972a8dc3dd..2545656282 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
@@ -49,7 +49,7 @@ fun DnsCell(
         iconView = {
             Icon(
                 modifier =
-                    Modifier.padding(end = Dimens.verticalDividerPadding)
+                    Modifier.padding(end = Dimens.smallPadding)
                         .alpha(
                             when {
                                 isUnreachableLocalDnsWarningVisible ||
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterRow.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterRow.kt
index 710c4a5cac..508d4af359 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterRow.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/FilterRow.kt
@@ -1,13 +1,13 @@
 package net.mullvad.mullvadvpn.compose.cell
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -24,11 +24,14 @@ import net.mullvad.mullvadvpn.usecase.FilterChip
 @Composable
 private fun PreviewFilterCell() {
     AppTheme {
-        FilterRow(
-            filters = listOf(FilterChip.Ownership(Ownership.MullvadOwned), FilterChip.Provider(2)),
-            onRemoveOwnershipFilter = {},
-            onRemoveProviderFilter = {},
-        )
+        Column(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
+            FilterRow(
+                filters =
+                    listOf(FilterChip.Ownership(Ownership.MullvadOwned), FilterChip.Provider(2)),
+                onRemoveOwnershipFilter = {},
+                onRemoveProviderFilter = {},
+            )
+        }
     }
 }
 
@@ -36,27 +39,15 @@ private fun PreviewFilterCell() {
 fun FilterRow(
     filters: List<FilterChip>,
     modifier: Modifier = Modifier,
-    showTitle: Boolean = true,
     onRemoveOwnershipFilter: () -> Unit,
     onRemoveProviderFilter: () -> Unit,
 ) {
     val scrollState = rememberScrollState()
     Row(
         verticalAlignment = Alignment.CenterVertically,
-        modifier =
-            modifier
-                .padding(horizontal = Dimens.searchFieldHorizontalPadding)
-                .fillMaxWidth()
-                .horizontalScroll(scrollState),
+        modifier = modifier.fillMaxWidth().horizontalScroll(scrollState),
         horizontalArrangement = Arrangement.spacedBy(Dimens.chipSpace),
     ) {
-        if (showTitle) {
-            Text(
-                text = stringResource(id = R.string.filters),
-                color = MaterialTheme.colorScheme.onPrimary,
-                style = MaterialTheme.typography.labelLarge,
-            )
-        }
         filters.forEach {
             when (it) {
                 is FilterChip.Ownership ->
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
index 62b9cf57c4..293d24af78 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
@@ -212,7 +212,7 @@ private fun RedeemSuccessBody(message: String) {
     Text(
         text = stringResource(id = R.string.voucher_success_title),
         modifier =
-            Modifier.padding(start = Dimens.smallPadding, top = Dimens.successIconVerticalPadding)
+            Modifier.padding(start = Dimens.smallPadding, top = Dimens.mediumPadding)
                 .fillMaxWidth(),
         color = MaterialTheme.colorScheme.onSurface,
         style = MaterialTheme.typography.titleMedium,
@@ -221,8 +221,7 @@ private fun RedeemSuccessBody(message: String) {
     Text(
         text = message,
         modifier =
-            Modifier.padding(start = Dimens.smallPadding, top = Dimens.cellTopPadding)
-                .fillMaxWidth(),
+            Modifier.padding(start = Dimens.smallPadding, top = Dimens.smallPadding).fillMaxWidth(),
         color = MaterialTheme.colorScheme.onSurfaceVariant,
         style = MaterialTheme.typography.labelLarge,
     )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
index 114bc1a030..afa585d29f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
@@ -156,7 +156,7 @@ fun CustomListLocationsScreen(
                 modifier =
                     Modifier.fillMaxWidth()
                         .height(Dimens.searchFieldHeight)
-                        .padding(horizontal = Dimens.searchFieldHorizontalPadding),
+                        .padding(horizontal = Dimens.mediumPadding),
                 backgroundColor = MaterialTheme.colorScheme.tertiaryContainer,
                 textColor = MaterialTheme.colorScheme.onTertiaryContainer,
             ) { searchString ->
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index fa2a30bc83..e1a7857819 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -289,7 +289,7 @@ private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
                         top = Dimens.smallPadding,
                         start = Dimens.sideMargin,
                         end = Dimens.sideMargin,
-                        bottom = Dimens.spacingAboveButton,
+                        bottom = Dimens.cellVerticalSpacing,
                     ),
         )
     }
@@ -306,7 +306,7 @@ private fun DeviceListButtonPanel(
             Modifier.padding(
                 start = Dimens.sideMargin,
                 end = Dimens.sideMargin,
-                top = Dimens.spacingAboveButton,
+                top = Dimens.mediumPadding,
             )
     ) {
         VariantButton(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
index cb495a3ba6..a997b39ad4 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
@@ -566,7 +566,7 @@ fun VpnSettingsContent(
                             },
                             bodyView = {},
                             background = MaterialTheme.colorScheme.surfaceContainerHighest,
-                            startPadding = Dimens.cellStartPaddingLarge,
+                            startPadding = Dimens.indentedCellStartPadding,
                         )
                     }
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt
index a14788584d..3026314b36 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt
@@ -37,6 +37,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -72,6 +73,7 @@ import net.mullvad.mullvadvpn.lib.model.RelayItemId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.ui.designsystem.RelayListHeader
 import net.mullvad.mullvadvpn.usecase.FilterChip
 import net.mullvad.mullvadvpn.util.Lce
 import net.mullvad.mullvadvpn.viewmodel.location.SearchLocationSideEffect
@@ -311,7 +313,6 @@ fun SearchLocationScreen(
             ) {
                 filterRow(
                     filters = state.contentOrNull()?.filterChips ?: emptyList(),
-                    onBackgroundColor = onBackgroundColor,
                     onRemoveOwnershipFilter = onRemoveOwnershipFilter,
                     onRemoveProviderFilter = onRemoveProviderFilter,
                 )
@@ -336,15 +337,23 @@ fun SearchLocationScreen(
                                 locationBottomSheetState = newSheetState
                             },
                             customListHeader = {
-                                Title(
-                                    text = stringResource(R.string.custom_lists),
-                                    onBackgroundColor = onBackgroundColor,
+                                RelayListHeader(
+                                    content = {
+                                        Text(
+                                            text = stringResource(R.string.custom_lists),
+                                            overflow = TextOverflow.Ellipsis,
+                                        )
+                                    }
                                 )
                             },
                             locationHeader = {
-                                Title(
-                                    text = stringResource(R.string.locations),
-                                    onBackgroundColor = onBackgroundColor,
+                                RelayListHeader(
+                                    content = {
+                                        Text(
+                                            text = stringResource(R.string.locations),
+                                            overflow = TextOverflow.Ellipsis,
+                                        )
+                                    }
                                 )
                             },
                         )
@@ -413,18 +422,13 @@ private fun SearchBar(
 
 private fun LazyListScope.filterRow(
     filters: List<FilterChip>,
-    onBackgroundColor: Color,
     onRemoveOwnershipFilter: () -> Unit,
     onRemoveProviderFilter: () -> Unit,
 ) {
     if (filters.isNotEmpty()) {
         item {
-            Title(text = stringResource(R.string.filters), onBackgroundColor = onBackgroundColor)
-        }
-        item {
             FilterRow(
                 filters = filters,
-                showTitle = false,
                 onRemoveOwnershipFilter = onRemoveOwnershipFilter,
                 onRemoveProviderFilter = onRemoveProviderFilter,
             )
@@ -432,18 +436,6 @@ private fun LazyListScope.filterRow(
     }
 }
 
-@Composable
-private fun Title(text: String, onBackgroundColor: Color) {
-    Text(
-        text = text,
-        color = onBackgroundColor,
-        modifier =
-            Modifier.fillMaxWidth()
-                .padding(horizontal = Dimens.sideMargin, vertical = Dimens.smallPadding),
-        style = MaterialTheme.typography.labelLarge,
-    )
-}
-
 private fun LazyListScope.loading() {
     item(contentType = ContentType.PROGRESS) { MullvadCircularProgressIndicatorLarge() }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt
index 754a162029..7e83680499 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt
@@ -412,7 +412,12 @@ fun SelectLocationScreen(
                     ) { filterChips ->
                         if (filterChips.isNotEmpty()) {
                             FilterRow(
-                                modifier = Modifier.padding(bottom = Dimens.smallPadding),
+                                modifier =
+                                    Modifier.padding(
+                                        bottom = Dimens.smallPadding,
+                                        start = Dimens.mediumPadding,
+                                        end = Dimens.mediumPadding,
+                                    ),
                                 filters = filterChips,
                                 onRemoveOwnershipFilter = removeOwnershipFilter,
                                 onRemoveProviderFilter = removeProviderFilter,
@@ -515,8 +520,8 @@ private fun MultihopBar(
         modifier =
             Modifier.fillMaxWidth()
                 .padding(
-                    start = Dimens.sideMargin,
-                    end = Dimens.sideMargin,
+                    start = Dimens.mediumPadding,
+                    end = Dimens.mediumPadding,
                     bottom = Dimens.smallPadding,
                 )
     ) {