Remove resource dimens and hardcoded colors in DeviceListScreen

3 files changed, 60 insertions, 40 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
index 883fb95ba3..7ff5b7f6cf 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -19,10 +19,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
 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.lib.theme.AlphaDescription
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemSubText
@@ -109,7 +111,10 @@ fun ListItem(
                 Text(
                     text = subText,
                     style = MaterialTheme.typography.listItemSubText,
-                    color = MaterialTheme.colorScheme.onPrimary
+                    color =
+                        MaterialTheme.colorScheme.onPrimary
+                            .copy(alpha = AlphaDescription)
+                            .compositeOver(background)
                 )
             }
         }
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 c231418ea9..2e72e12801 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
@@ -21,7 +21,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import net.mullvad.mullvadvpn.R
@@ -33,13 +32,10 @@ import net.mullvad.mullvadvpn.compose.state.DeviceListItemUiState
 import net.mullvad.mullvadvpn.compose.state.DeviceListUiState
 import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord
 import net.mullvad.mullvadvpn.lib.common.util.parseAsDateTime
+import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
-import net.mullvad.mullvadvpn.lib.theme.MullvadGreen
-import net.mullvad.mullvadvpn.lib.theme.MullvadGreen40
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite80
 import net.mullvad.mullvadvpn.model.Device
 import net.mullvad.mullvadvpn.util.formatDate
 
@@ -88,11 +84,11 @@ fun DeviceListScreen(
         )
     }
 
-    val topColor = MaterialTheme.colorScheme.primary
     ScaffoldWithTopBar(
-        topBarColor = topColor,
-        statusBarColor = topColor,
+        topBarColor = MaterialTheme.colorScheme.primary,
+        statusBarColor = MaterialTheme.colorScheme.primary,
         navigationBarColor = MaterialTheme.colorScheme.background,
+        iconTintColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
         onSettingsClicked = onSettingsClicked,
         onAccountClicked = null,
     ) {
@@ -101,7 +97,7 @@ fun DeviceListScreen(
                 Modifier.fillMaxHeight()
                     .fillMaxWidth()
                     .padding(it)
-                    .background(MaterialTheme.colorScheme.secondary)
+                    .background(MaterialTheme.colorScheme.background)
         ) {
             val (content, buttons) = createRefs()
 
@@ -131,22 +127,28 @@ fun DeviceListScreen(
                         contentDescription = null, // No meaningful user info or action.
                         modifier =
                             Modifier.constrainAs(icon) {
-                                    top.linkTo(parent.top, margin = 30.dp)
+                                    top.linkTo(parent.top)
                                     start.linkTo(parent.start)
                                     end.linkTo(parent.end)
                                 }
-                                .width(64.dp)
-                                .height(64.dp)
+                                .padding(top = Dimens.iconFailSuccessTopMargin)
+                                .width(Dimens.iconFailSuccessSize)
+                                .height(Dimens.iconFailSuccessSize)
                     )
 
                     Column(
                         modifier =
                             Modifier.constrainAs(message) {
-                                top.linkTo(icon.bottom, margin = 16.dp)
-                                start.linkTo(parent.start, margin = 22.dp)
-                                end.linkTo(parent.end, margin = 22.dp)
-                                width = Dimension.fillToConstraints
-                            },
+                                    top.linkTo(icon.bottom)
+                                    start.linkTo(parent.start)
+                                    end.linkTo(parent.end)
+                                    width = Dimension.fillToConstraints
+                                }
+                                .padding(
+                                    start = Dimens.sideMargin,
+                                    end = Dimens.sideMargin,
+                                    top = Dimens.screenVerticalMargin
+                                ),
                     ) {
                         Text(
                             text =
@@ -158,7 +160,8 @@ fun DeviceListScreen(
                                             R.string.max_devices_resolved_title
                                         }
                                 ),
-                            style = MaterialTheme.typography.headlineSmall
+                            style = MaterialTheme.typography.headlineSmall,
+                            color = MaterialTheme.colorScheme.onBackground
                         )
 
                         Text(
@@ -172,20 +175,22 @@ fun DeviceListScreen(
                                         }
                                 ),
                             style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onBackground,
                             modifier =
                                 Modifier.wrapContentHeight()
                                     .animateContentSize()
-                                    .padding(top = 8.dp)
+                                    .padding(top = Dimens.smallPadding)
                         )
                     }
 
                     Box(
                         modifier =
                             Modifier.constrainAs(list) {
-                                top.linkTo(message.bottom, margin = 20.dp)
-                                height = Dimension.wrapContent
-                                width = Dimension.matchParent
-                            }
+                                    top.linkTo(message.bottom)
+                                    height = Dimension.wrapContent
+                                    width = Dimension.matchParent
+                                }
+                                .padding(top = Dimens.spacingAboveButton)
                     ) {
                         Column {
                             state.deviceUiItems.forEach { deviceUiState ->
@@ -215,11 +220,16 @@ fun DeviceListScreen(
             Column(
                 modifier =
                     Modifier.constrainAs(buttons) {
-                        bottom.linkTo(parent.bottom, margin = 22.dp)
-                        start.linkTo(parent.start, margin = 22.dp)
-                        end.linkTo(parent.end, margin = 22.dp)
-                        width = Dimension.fillToConstraints
-                    }
+                            bottom.linkTo(parent.bottom)
+                            start.linkTo(parent.start)
+                            end.linkTo(parent.end)
+                            width = Dimension.fillToConstraints
+                        }
+                        .padding(
+                            start = Dimens.sideMargin,
+                            end = Dimens.sideMargin,
+                            bottom = Dimens.screenVerticalMargin
+                        )
             ) {
                 ActionButton(
                     text = stringResource(id = R.string.continue_login),
@@ -227,10 +237,12 @@ fun DeviceListScreen(
                     isEnabled = state.hasTooManyDevices.not() && state.isLoading.not(),
                     colors =
                         ButtonDefaults.buttonColors(
-                            containerColor = MullvadGreen,
-                            disabledContainerColor = MullvadGreen40,
-                            disabledContentColor = MullvadWhite80,
-                            contentColor = MullvadWhite
+                            containerColor = MaterialTheme.colorScheme.inversePrimary,
+                            contentColor = MaterialTheme.colorScheme.onPrimary,
+                            disabledContentColor =
+                                MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive),
+                            disabledContainerColor =
+                                MaterialTheme.colorScheme.inversePrimary.copy(alpha = AlphaInactive)
                         )
                 )
 
@@ -239,10 +251,10 @@ fun DeviceListScreen(
                     onClick = onBackClick,
                     colors =
                         ButtonDefaults.buttonColors(
-                            containerColor = MullvadBlue,
-                            contentColor = MullvadWhite
+                            containerColor = MaterialTheme.colorScheme.primary,
+                            contentColor = MaterialTheme.colorScheme.onPrimary,
                         ),
-                    modifier = Modifier.padding(top = 16.dp)
+                    modifier = Modifier.padding(top = Dimens.mediumPadding)
                 )
             }
         }
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 d80b3e381f..99c2132719 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
@@ -21,8 +21,11 @@ data class Dimensions(
     val customPortBoxMinWidth: Dp = 80.dp,
     val dialogIconHeight: Dp = 44.dp,
     val expandableCellChevronSize: Dp = 30.dp,
+    val iconFailSuccessSize: Dp = 60.dp,
+    val iconFailSuccessTopMargin: Dp = 30.dp,
     val indentedCellStartPadding: Dp = 38.dp,
     val infoButtonVerticalPadding: Dp = 13.dp,
+    val largePadding: Dp = 32.dp,
     val listIconSize: Dp = 24.dp,
     val listItemDivider: Dp = 1.dp,
     val listItemHeight: Dp = 50.dp,
@@ -32,11 +35,9 @@ data class Dimensions(
     val loadingSpinnerSizeMedium: Dp = 28.dp,
     val loadingSpinnerStrokeWidth: Dp = 6.dp,
     val loginIconContainerSize: Dp = 60.dp,
-    val smallPadding: Dp = 8.dp,
     val mediumPadding: Dp = 16.dp,
-    val largePadding: Dp = 32.dp,
-    val notificationBannerStartPadding: Dp = 16.dp,
     val notificationBannerEndPadding: Dp = 12.dp,
+    val notificationBannerStartPadding: Dp = 16.dp,
     val notificationEndIconPadding: Dp = 4.dp,
     val notificationStatusIconSize: Dp = 10.dp,
     val progressIndicatorSize: Dp = 48.dp,
@@ -50,6 +51,8 @@ data class Dimensions(
     val selectLocationTitlePadding: Dp = 12.dp,
     val selectableCellTextMargin: Dp = 12.dp,
     val sideMargin: Dp = 22.dp,
+    val smallPadding: Dp = 8.dp,
+    val spacingAboveButton: Dp = 22.dp,
     val titleIconSize: Dp = 24.dp,
     val topBarHeight: Dp = 64.dp,
     val verticalSpace: Dp = 20.dp,