Fix fail & success icon size

8 files changed, 73 insertions, 121 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
index 8d3def6425..aae37c3f0b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
@@ -41,6 +41,7 @@ fun MullvadCircularProgressIndicatorLarge(
 ) {
     CircularProgressIndicator(
         modifier
+            .padding(Dimens.tinyPadding)
             .size(Dimens.circularProgressBarLargeSize)
             .testTag(CIRCULAR_PROGRESS_INDICATOR_TEST_TAG),
         color,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
index a700c6cdec..528956286c 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
@@ -20,7 +20,7 @@ import com.ramcosta.composedestinations.result.ResultBackNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
-import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorMedium
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.preview.SaveApiAccessMethodUiStatePreviewParameterProvider
 import net.mullvad.mullvadvpn.compose.state.SaveApiAccessMethodUiState
 import net.mullvad.mullvadvpn.compose.state.TestApiAccessMethodState
@@ -90,18 +90,14 @@ fun SaveApiAccessMethodDialog(
                         painter =
                             painterResource(
                                 id =
-                                    if (
-                                        testingState is TestApiAccessMethodState.Result.Successful
-                                    ) {
+                                    if (testingState is TestApiAccessMethodState.Result.Successful)
                                         R.drawable.icon_success
-                                    } else {
-                                        R.drawable.icon_fail
-                                    }
+                                    else R.drawable.icon_fail
                             ),
                         contentDescription = null,
                     )
                 TestApiAccessMethodState.Testing ->
-                    MullvadCircularProgressIndicatorMedium(
+                    MullvadCircularProgressIndicatorLarge(
                         modifier = Modifier.testTag(SAVE_API_ACCESS_METHOD_LOADING_SPINNER_TEST_TAG)
                     )
             }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
index 9e64e0f037..bf9de7e449 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
@@ -19,7 +19,7 @@ import com.ramcosta.composedestinations.result.ResultBackNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
-import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorMedium
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.lib.payment.model.ProductId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -169,7 +169,7 @@ fun PaymentDialog(
                         painter = painterResource(id = R.drawable.icon_fail),
                         contentDescription = null,
                     )
-                PaymentDialogIcon.LOADING -> MullvadCircularProgressIndicatorMedium()
+                PaymentDialogIcon.LOADING -> MullvadCircularProgressIndicatorLarge()
                 else -> {}
             }
         },
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 9d0310e60c..f711938bca 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
@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -145,11 +144,15 @@ fun DeviceListScreen(
         onAccountClicked = null,
         snackbarHostState = snackbarHostState,
     ) {
-        Column(modifier = Modifier.fillMaxSize().padding(it)) {
+        Column(
+            modifier =
+                Modifier.fillMaxSize().padding(it).padding(bottom = Dimens.screenBottomMargin)
+        ) {
             val scrollState = rememberScrollState()
             Column(
                 modifier =
                     Modifier.drawVerticalScrollbar(scrollState, MaterialTheme.colorScheme.onSurface)
+                        .padding(top = Dimens.screenTopMargin)
                         .verticalScroll(scrollState)
                         .weight(1f)
                         .fillMaxWidth()
@@ -221,25 +224,17 @@ private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
                             }
                     ),
                 contentDescription = null, // No meaningful user info or action.
-                modifier =
-                    Modifier.align(Alignment.CenterHorizontally)
-                        .padding(top = Dimens.iconFailSuccessTopMargin)
-                        .size(Dimens.bigIconSize),
+                modifier = Modifier.align(Alignment.CenterHorizontally),
             )
         is DeviceListUiState.Error ->
             Image(
                 painter = painterResource(id = R.drawable.icon_fail),
                 contentDescription = null, // No meaningful user info or action.
-                modifier =
-                    Modifier.align(Alignment.CenterHorizontally)
-                        .padding(top = Dimens.iconFailSuccessTopMargin)
-                        .size(Dimens.bigIconSize),
+                modifier = Modifier.align(Alignment.CenterHorizontally),
             )
         DeviceListUiState.Loading ->
             MullvadCircularProgressIndicatorLarge(
-                modifier =
-                    Modifier.align(Alignment.CenterHorizontally)
-                        .padding(top = Dimens.iconFailSuccessTopMargin)
+                modifier = Modifier.align(Alignment.CenterHorizontally)
             )
     }
 
@@ -301,7 +296,6 @@ private fun DeviceListButtonPanel(
                 start = Dimens.sideMargin,
                 end = Dimens.sideMargin,
                 top = Dimens.spacingAboveButton,
-                bottom = Dimens.screenBottomMargin,
             )
     ) {
         VariantButton(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
index 966e7fd57b..4ab0fba693 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
@@ -3,21 +3,22 @@ package net.mullvad.mullvadvpn.compose.screen
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 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.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
-import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.constraintlayout.compose.Dimension
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.compose.dropUnlessResumed
 import com.ramcosta.composedestinations.annotation.Destination
@@ -29,11 +30,13 @@ import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.DeviceRevokedLoginButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
+import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.preview.DeviceRevokedUiStatePreviewParameterProvider
 import net.mullvad.mullvadvpn.compose.state.DeviceRevokedUiState
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 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.viewmodel.DeviceRevokedSideEffect
 import net.mullvad.mullvadvpn.viewmodel.DeviceRevokedViewModel
 import org.koin.androidx.compose.koinViewModel
@@ -84,75 +87,62 @@ fun DeviceRevokedScreen(
             MaterialTheme.colorScheme.error
         }
 
+    val scrollState = rememberScrollState()
     ScaffoldWithTopBar(
         topBarColor = topColor,
         onSettingsClicked = onSettingsClicked,
         onAccountClicked = null,
     ) {
-        ConstraintLayout(
+        Column(
             modifier =
                 Modifier.fillMaxSize()
                     .padding(it)
+                    .padding(
+                        top = Dimens.screenTopMargin,
+                        bottom = Dimens.screenBottomMargin,
+                        start = Dimens.screenTopMargin,
+                        end = Dimens.sideMargin,
+                    )
+                    .verticalScroll(scrollState)
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
                     .background(color = MaterialTheme.colorScheme.surface)
         ) {
-            val (icon, body, actionButtons) = createRefs()
-
             Image(
                 painter = painterResource(id = R.drawable.icon_fail),
-                contentDescription = null, // No meaningful user info or action.
+                contentDescription = null,
                 modifier =
-                    Modifier.constrainAs(icon) {
-                            top.linkTo(parent.top, margin = 30.dp)
-                            start.linkTo(parent.start)
-                            end.linkTo(parent.end)
-                        }
-                        .padding(horizontal = 12.dp)
-                        .size(Dimens.bigIconSize),
+                    Modifier.align(Alignment.CenterHorizontally)
+                        .padding(bottom = Dimens.mediumSpacer),
+            )
+            Text(
+                text = stringResource(id = R.string.device_inactive_title),
+                style = MaterialTheme.typography.headlineLarge,
+                color = MaterialTheme.colorScheme.onSurface,
             )
 
-            Column(
-                modifier =
-                    Modifier.constrainAs(body) {
-                        top.linkTo(icon.bottom, margin = 22.dp)
-                        start.linkTo(parent.start, margin = 22.dp)
-                        end.linkTo(parent.end, margin = 22.dp)
-                        width = Dimension.fillToConstraints
-                    }
-            ) {
-                Text(
-                    text = stringResource(id = R.string.device_inactive_title),
-                    style = MaterialTheme.typography.headlineLarge,
-                    color = MaterialTheme.colorScheme.onSurface,
-                )
+            Text(
+                text = stringResource(id = R.string.device_inactive_description),
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurface,
+                modifier = Modifier.padding(top = Dimens.smallPadding),
+            )
 
+            if (state == DeviceRevokedUiState.SECURED) {
                 Text(
-                    text = stringResource(id = R.string.device_inactive_description),
+                    text = stringResource(id = R.string.device_inactive_unblock_warning),
                     style = MaterialTheme.typography.bodySmall,
                     color = MaterialTheme.colorScheme.onSurface,
-                    modifier = Modifier.padding(top = 10.dp),
+                    modifier = Modifier.padding(top = Dimens.mediumPadding),
                 )
-
-                if (state == DeviceRevokedUiState.SECURED) {
-                    Text(
-                        text = stringResource(id = R.string.device_inactive_unblock_warning),
-                        style = MaterialTheme.typography.bodySmall,
-                        color = MaterialTheme.colorScheme.onSurface,
-                        modifier = Modifier.padding(top = 10.dp),
-                    )
-                }
             }
 
-            Column(
-                modifier =
-                    Modifier.constrainAs(actionButtons) {
-                        bottom.linkTo(parent.bottom, margin = 22.dp)
-                        start.linkTo(parent.start, margin = 22.dp)
-                        end.linkTo(parent.end, margin = 22.dp)
-                        width = Dimension.fillToConstraints
-                    }
-            ) {
-                DeviceRevokedLoginButton(onClick = onGoToLoginClicked, state = state)
-            }
+            Spacer(modifier = Modifier.weight(1f).defaultMinSize(minHeight = Dimens.verticalSpace))
+
+            // Button area
+            DeviceRevokedLoginButton(onClick = onGoToLoginClicked, state = state)
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
index 021fba19d5..d07fad359f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
@@ -40,7 +40,6 @@ import androidx.compose.ui.autofill.ContentType
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusProperties
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -320,14 +319,13 @@ private fun ColumnScope.LoginInput(
 
 @Composable
 private fun LoginIcon(loginState: LoginState, modifier: Modifier = Modifier) {
-    Box(contentAlignment = Alignment.Center, modifier = modifier.size(Dimens.bigIconSize)) {
+    Box(contentAlignment = Alignment.Center, modifier = modifier) {
         when (loginState) {
             is Idle ->
                 if (loginState.loginError != null) {
                     Image(
                         painter = painterResource(id = R.drawable.icon_fail),
                         contentDescription = stringResource(id = R.string.login_fail_title),
-                        contentScale = ContentScale.Inside,
                     )
                 } else {
                     // If view is Idle, we display empty box to keep the same size as other states
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
index 522c2f99c7..83febe7ea3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
@@ -2,12 +2,12 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
@@ -171,6 +171,12 @@ fun OutOfTimeScreen(
             modifier =
                 Modifier.fillMaxSize()
                     .padding(it)
+                    .padding(
+                        top = Dimens.screenTopMargin,
+                        start = Dimens.sideMargin,
+                        end = Dimens.sideMargin,
+                        bottom = Dimens.screenBottomMargin,
+                    )
                     .verticalScroll(scrollState)
                     .drawVerticalScrollbar(
                         state = scrollState,
@@ -183,16 +189,13 @@ fun OutOfTimeScreen(
                 contentDescription = null,
                 modifier =
                     Modifier.align(Alignment.CenterHorizontally)
-                        .padding(vertical = Dimens.screenTopMargin)
-                        .size(Dimens.bigIconSize),
+                        .padding(bottom = Dimens.mediumSpacer),
             )
             Text(
                 text = stringResource(id = R.string.out_of_time),
                 style = MaterialTheme.typography.headlineLarge,
                 color = MaterialTheme.colorScheme.onSurface,
-                modifier =
-                    Modifier.padding(horizontal = Dimens.sideMargin)
-                        .testTag(OUT_OF_TIME_SCREEN_TITLE_TEST_TAG),
+                modifier = Modifier.testTag(OUT_OF_TIME_SCREEN_TITLE_TEST_TAG),
             )
             Text(
                 text =
@@ -205,12 +208,7 @@ fun OutOfTimeScreen(
                     },
                 style = MaterialTheme.typography.bodySmall,
                 color = MaterialTheme.colorScheme.onSurface,
-                modifier =
-                    Modifier.padding(
-                        top = Dimens.mediumPadding,
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                    ),
+                modifier = Modifier.padding(top = Dimens.mediumPadding),
             )
             Spacer(modifier = Modifier.weight(1f).defaultMinSize(minHeight = Dimens.verticalSpace))
             // Button area
@@ -237,17 +235,11 @@ private fun ButtonPanel(
     navigateToVerificationPendingDialog: () -> Unit,
 ) {
 
-    Column {
+    Column(verticalArrangement = Arrangement.spacedBy(Dimens.buttonSpacing)) {
         if (state.tunnelState.isSecured()) {
             NegativeButton(
                 onClick = onDisconnectClick,
                 text = stringResource(id = R.string.disconnect),
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.buttonSpacing,
-                    ),
             )
         }
         state.billingPaymentState?.let {
@@ -257,35 +249,16 @@ private fun ButtonPanel(
                     onPurchaseBillingProductClick(productId)
                 },
                 onInfoClick = navigateToVerificationPendingDialog,
-                modifier =
-                    Modifier.padding(
-                            start = Dimens.sideMargin,
-                            end = Dimens.sideMargin,
-                            bottom = Dimens.buttonSpacing,
-                        )
-                        .align(Alignment.CenterHorizontally),
             )
         }
         if (state.showSitePayment) {
             SitePaymentButton(
                 onClick = onSitePaymentClick,
                 isEnabled = state.tunnelState.enableSitePaymentButton(),
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.buttonSpacing,
-                    ),
             )
         }
         RedeemVoucherButton(
             onClick = onRedeemVoucherClick,
-            modifier =
-                Modifier.padding(
-                    start = Dimens.sideMargin,
-                    end = Dimens.sideMargin,
-                    bottom = Dimens.screenBottomMargin,
-                ),
             isEnabled = state.tunnelState.enableRedeemButton(),
         )
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
index 06ed29e298..207e5cfc26 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
@@ -242,7 +242,7 @@ fun ProblemMessageTextField(
 @Composable
 private fun ColumnScope.SendingContent() {
     MullvadCircularProgressIndicatorLarge(modifier = Modifier.align(Alignment.CenterHorizontally))
-    Spacer(modifier = Modifier.height(Dimens.problemReportIconToTitlePadding))
+    Spacer(modifier = Modifier.height(Dimens.mediumSpacer))
     Text(
         text = stringResource(id = R.string.sending),
         style = MaterialTheme.typography.headlineLarge,
@@ -256,11 +256,11 @@ private fun ColumnScope.SentContent(sendingState: SendingReportUiState.Success)
     Icon(
         painter = painterResource(id = R.drawable.icon_success),
         contentDescription = stringResource(id = R.string.sent),
-        modifier = Modifier.align(Alignment.CenterHorizontally).size(Dimens.dialogIconHeight),
+        modifier = Modifier.align(Alignment.CenterHorizontally),
         tint = Color.Unspecified,
     )
 
-    Spacer(modifier = Modifier.height(Dimens.problemReportIconToTitlePadding))
+    Spacer(modifier = Modifier.height(Dimens.mediumSpacer))
     Text(
         text = stringResource(id = R.string.sent),
         style = MaterialTheme.typography.headlineLarge,
@@ -310,10 +310,10 @@ private fun ColumnScope.ErrorContent(retry: () -> Unit, onDismiss: () -> Unit) {
     Icon(
         painter = painterResource(id = R.drawable.icon_fail),
         contentDescription = stringResource(id = R.string.failed_to_send),
-        modifier = Modifier.size(Dimens.dialogIconHeight).align(Alignment.CenterHorizontally),
+        modifier = Modifier.align(Alignment.CenterHorizontally),
         tint = Color.Unspecified,
     )
-    Spacer(modifier = Modifier.height(Dimens.problemReportIconToTitlePadding))
+    Spacer(modifier = Modifier.height(Dimens.mediumSpacer))
     Text(
         text = stringResource(id = R.string.failed_to_send),
         style = MaterialTheme.typography.headlineLarge,