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 883fb95ba3f3..7ff5b7f6cfab 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 c231418ea9d6..2e72e1280147 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 d80b3e381f88..99c213271969 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,