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

12 files changed, 68 insertions, 87 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,
                 )
     ) {
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
index 5179b5c306..8f4426a907 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -13,31 +13,28 @@ data class Dimensions(
     val buttonHeight: Dp = 44.dp,
     val buttonSpacing: Dp = 8.dp,
     val cellEndPadding: Dp = 16.dp,
-    val cellFooterTopPadding: Dp = 6.dp,
+    val cellFooterTopPadding: Dp = 4.dp,
     val cellHeight: Dp = 56.dp,
     val cellHeightTwoRows: Dp = 72.dp,
-    val cellStartPadding: Dp = 14.dp,
-    val cellStartPaddingLarge: Dp = 50.dp,
-    val cellTopPadding: Dp = 6.dp,
+    val cellStartPadding: Dp = 16.dp,
     val cellVerticalSpacing: Dp = 24.dp,
     val chipSpace: Dp = 8.dp,
     val chipVerticalPadding: Dp = 4.dp,
     val circularProgressBarLargeSize: Dp = 40.dp,
-    val circularProgressBarLargeStrokeWidth: Dp = 6.dp,
+    val circularProgressBarLargeStrokeWidth: Dp = 8.dp,
     val circularProgressBarMediumSize: Dp = 32.dp,
     val circularProgressBarMediumStrokeWidth: Dp = 4.dp,
     val circularProgressBarSmallSize: Dp = 24.dp,
-    val circularProgressBarSmallStrokeWidth: Dp = 3.dp,
+    val circularProgressBarSmallStrokeWidth: Dp = 4.dp,
     val connectButtonExtraPadding: Dp = 4.dp,
     val connectionCardMaxWidth: Dp = 480.dp,
-    val customPortBoxMinWidth: Dp = 60.dp,
+    val customPortBoxMinWidth: Dp = 56.dp,
     val deleteIconSize: Dp = 24.dp,
-    val dialogIconHeight: Dp = 44.dp,
+    val dialogIconHeight: Dp = 48.dp,
     val formTextFieldMinHeight: Dp = 72.dp,
-    val iconFailSuccessTopMargin: Dp = 30.dp,
-    val indentedCellStartPadding: Dp = 38.dp,
-    val indicatorPadding: Dp = 2.dp,
-    val indicatorSize: Dp = 6.dp,
+    val indentedCellStartPadding: Dp = 48.dp,
+    val indicatorPadding: Dp = 4.dp,
+    val indicatorSize: Dp = 8.dp,
     val largePadding: Dp = 32.dp,
     val listIconSize: Dp = 24.dp,
     val listItemDivider: Dp = 1.dp,
@@ -45,39 +42,33 @@ data class Dimensions(
     val mediumPadding: Dp = 16.dp,
     val mediumSpacer: Dp = 16.dp,
     val miniPadding: Dp = 4.dp,
-    val mullvadLogoTextHeight: Dp = 13.dp,
-    val mullvadLogoTextStartPadding: Dp = 6.dp,
     val notificationBannerEndPadding: Dp = 8.dp,
     val notificationBannerStartPadding: Dp = 16.dp,
     val notificationEndIconPadding: Dp = 4.dp,
-    val notificationIconPadding: Dp = 10.dp,
+    // This is according to the design, should be updated in the design to standard size
     val notificationStatusIconSize: Dp = 10.dp,
-    val obfuscationNavigationBoxWidth: Dp = 60.dp,
+    val obfuscationNavigationBoxWidth: Dp = 56.dp,
     val outLineButtonBorderWidth: Dp = 1.dp,
-    val payIconHeight: Dp = 20.dp,
     val privacyPolicyIconSize: Dp = 16.dp,
-    val problemReportIconToTitlePadding: Dp = 60.dp,
     val reconnectButtonMinInteractiveComponentSize: Dp = 40.dp,
     val relayCircleSize: Dp = 16.dp,
-    val relayCirclePadding: Dp = 6.dp,
+    val relayCirclePadding: Dp = 8.dp,
     val relayItemCornerRadius: Dp = 16.dp,
     val screenBottomMargin: Dp = 16.dp,
     val screenTopMargin: Dp = 24.dp,
     val searchFieldHeight: Dp = 42.dp,
     val searchFieldHeightExpanded: Dp = 72.dp,
-    val searchFieldHorizontalPadding: Dp = 22.dp,
+    val searchFieldHorizontalPadding: Dp = 20.dp,
     val searchIconSize: Dp = 24.dp,
-    val selectLocationTitlePadding: Dp = 12.dp,
-    val selectableCellTextMargin: Dp = 12.dp,
+    val selectableCellTextMargin: Dp = 8.dp,
     val settingsDetailsImageMaxWidth: Dp = 480.dp,
     val sideMargin: Dp = 24.dp,
     val smallIconSize: Dp = 16.dp,
     val smallPadding: Dp = 8.dp,
     val smallSpacer: Dp = 8.dp,
-    val spacingAboveButton: Dp = 22.dp,
     val splashLogoSize: Dp = 120.dp,
+    // Required to get the logo to look visually correct
     val splashLogoTextHeight: Dp = 18.dp,
-    val successIconVerticalPadding: Dp = 26.dp,
     val switchIconSize: Dp = 24.dp,
     val switchLocationRetryMinWidth: Dp = 48.dp,
     val thinBorderWidth: Dp = 1.dp,
@@ -86,8 +77,12 @@ data class Dimensions(
     val tvDrawerHeaderStartPadding: Dp = 12.dp,
     val tvDrawerHeaderWithFocusStartPadding: Dp = 16.dp,
     val tvDrawerHorizontalPadding: Dp = 12.dp,
-    val verticalDividerPadding: Dp = 12.dp,
-    val verticalSpace: Dp = 20.dp,
+    // Required to get the logo to look visually correct on TV
+    val tvMullvadLogoTextHeight: Dp = 13.dp,
+    // Required to get the logo to look visually correct on TV
+    val tvMullvadLogoTextStartPadding: Dp = 6.dp,
+    val verticalDividerPadding: Dp = 16.dp,
+    val verticalSpace: Dp = 16.dp,
     val verticalSpacer: Dp = 1.dp,
 )
 
diff --git a/android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt b/android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt
index 56956af406..38ad1a19ab 100644
--- a/android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt
+++ b/android/lib/tv/src/main/kotlin/net/mullvad/mullvadvpn/lib/tv/NavigationDrawerTv.kt
@@ -187,7 +187,7 @@ private fun NavigationDrawerTvHeader(
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(Dimens.mullvadLogoTextStartPadding),
+            horizontalArrangement = Arrangement.spacedBy(Dimens.tvMullvadLogoTextStartPadding),
         ) {
             Icon(
                 modifier = Modifier.size(Dimens.mediumIconSize),
@@ -197,7 +197,7 @@ private fun NavigationDrawerTvHeader(
             )
             if (isExpanded) {
                 Icon(
-                    modifier = Modifier.height(Dimens.mullvadLogoTextHeight),
+                    modifier = Modifier.height(Dimens.tvMullvadLogoTextHeight),
                     painter = painterResource(id = R.drawable.logo_text),
                     contentDescription = null, // No meaningful user info or action.
                     tint = Color.Unspecified, // Logo should not be tinted
diff --git a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/AnimatedNotificationBanner.kt b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/AnimatedNotificationBanner.kt
index 8889a37399..94a935db74 100644
--- a/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/AnimatedNotificationBanner.kt
+++ b/android/lib/ui/component/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/component/AnimatedNotificationBanner.kt
@@ -223,7 +223,7 @@ private fun NotificationAction(
         onClick = onClick,
     ) {
         Icon(
-            modifier = Modifier.padding(Dimens.notificationIconPadding),
+            modifier = Modifier.padding(Dimens.smallPadding),
             imageVector = imageVector,
             contentDescription = contentDescription,
             tint = MaterialTheme.colorScheme.onSurface,
diff --git a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/RelayListHeader.kt b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/RelayListHeader.kt
index 3dc20ff0e7..51a3d01b92 100644
--- a/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/RelayListHeader.kt
+++ b/android/lib/ui/designsystem/src/main/kotlin/net/mullvad/mullvadvpn/lib/ui/designsystem/RelayListHeader.kt
@@ -32,12 +32,11 @@ fun RelayListHeader(
 ) {
     ProvideContentColorTextStyle(
         MaterialTheme.colorScheme.onBackground,
-        MaterialTheme.typography.bodyLarge,
+        MaterialTheme.typography.labelLarge,
     ) {
         Row(
             modifier =
-                Modifier.padding(horizontal = Dimens.tinyPadding)
-                    .defaultMinSize(minHeight = LIST_HEADER_MIN_HEIGHT)
+                Modifier.defaultMinSize(minHeight = LIST_HEADER_MIN_HEIGHT)
                     .height(IntrinsicSize.Min)
                     .then(modifier),
             verticalAlignment = Alignment.CenterVertically,