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

4 files changed, 26 insertions, 32 deletions

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,