Merge branch 'update-remove-icon-color-and-size-in-too-many-devices-droid-620'

2 files changed, 131 insertions, 14 deletions

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 fa5ce34c77..c0ba529610 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
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxSize
@@ -34,6 +35,7 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.button.VariantButton
 import net.mullvad.mullvadvpn.compose.cell.BaseCell
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorMedium
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
@@ -56,7 +58,73 @@ import org.koin.androidx.compose.koinViewModel
 
 @Composable
 @Preview
-private fun PreviewDeviceListScreen() {
+private fun PreviewDeviceListScreenTooManyDevices() {
+    AppTheme {
+        DeviceListScreen(
+            state =
+                DeviceListUiState(
+                    deviceUiItems =
+                        listOf(
+                            DeviceListItemUiState(
+                                device =
+                                    Device(
+                                        id = "ID1",
+                                        name = "Name1",
+                                        pubkey = ByteArray(10),
+                                        created = "2012-12-12 12:12:12 UTC"
+                                    ),
+                                isLoading = false
+                            ),
+                            DeviceListItemUiState(
+                                device =
+                                    Device(
+                                        id = "ID2",
+                                        name = "Name2",
+                                        pubkey = ByteArray(10),
+                                        created = "2012-12-12 12:12:12 UTC"
+                                    ),
+                                isLoading = false
+                            ),
+                            DeviceListItemUiState(
+                                device =
+                                    Device(
+                                        id = "ID3",
+                                        name = "Name3",
+                                        pubkey = ByteArray(10),
+                                        created = "2012-12-12 12:12:12 UTC"
+                                    ),
+                                isLoading = false
+                            ),
+                            DeviceListItemUiState(
+                                device =
+                                    Device(
+                                        id = "ID4",
+                                        name = "Name4",
+                                        pubkey = ByteArray(10),
+                                        created = "2012-12-12 12:12:12 UTC"
+                                    ),
+                                isLoading = false
+                            ),
+                            DeviceListItemUiState(
+                                device =
+                                    Device(
+                                        id = "ID5",
+                                        name = "Name5",
+                                        pubkey = ByteArray(10),
+                                        created = "2012-12-12 12:12:12 UTC"
+                                    ),
+                                isLoading = true
+                            )
+                        ),
+                    isLoading = false
+                )
+        )
+    }
+}
+
+@Composable
+@Preview
+private fun PreviewDeviceListScreenNotTooManyDevices() {
     AppTheme {
         DeviceListScreen(
             state =
@@ -69,17 +137,33 @@ private fun PreviewDeviceListScreen() {
                                         id = "ID",
                                         name = "Name",
                                         pubkey = ByteArray(10),
-                                        created = "2002-12-12"
+                                        created = "2012-12-12 12:12:12 UTC"
                                     ),
                                 isLoading = false
                             )
                         ),
-                    isLoading = true
+                    isLoading = false
                 )
         )
     }
 }
 
+@Composable
+@Preview
+private fun PreviewDeviceListScreenEmpty() {
+    AppTheme {
+        DeviceListScreen(state = DeviceListUiState(deviceUiItems = emptyList(), isLoading = false))
+    }
+}
+
+@Composable
+@Preview
+private fun PreviewDeviceListLoading() {
+    AppTheme {
+        DeviceListScreen(state = DeviceListUiState(deviceUiItems = emptyList(), isLoading = true))
+    }
+}
+
 @Destination
 @Composable
 fun DeviceList(
@@ -146,18 +230,22 @@ fun DeviceListScreen(
                         )
                         .verticalScroll(scrollState)
                         .weight(1f)
-            ) {
-                DeviceListHeader(state = state)
-
-                state.deviceUiItems.forEachIndexed { index, deviceUiState ->
-                    DeviceListItem(
-                        deviceUiState = deviceUiState,
-                    ) {
-                        navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)
-                    }
-                    if (state.deviceUiItems.lastIndex != index) {
-                        Divider()
+                        .fillMaxWidth(),
+                verticalArrangement =
+                    if (state.isLoading) {
+                        Arrangement.Center
+                    } else {
+                        Arrangement.Top
                     }
+            ) {
+                if (state.isLoading) {
+                    DeviceListLoading()
+                } else {
+                    DeviceListContent(
+                        state = state,
+                        navigateToRemoveDeviceConfirmationDialog =
+                            navigateToRemoveDeviceConfirmationDialog
+                    )
                 }
             }
             DeviceListButtonPanel(state, onContinueWithLogin, onBackClick)
@@ -166,6 +254,32 @@ fun DeviceListScreen(
 }
 
 @Composable
+private fun ColumnScope.DeviceListLoading() {
+    MullvadCircularProgressIndicatorLarge(
+        modifier = Modifier.padding(Dimens.smallPadding).align(Alignment.CenterHorizontally)
+    )
+}
+
+@Composable
+private fun ColumnScope.DeviceListContent(
+    state: DeviceListUiState,
+    navigateToRemoveDeviceConfirmationDialog: (Device) -> Unit
+) {
+    DeviceListHeader(state = state)
+
+    state.deviceUiItems.forEachIndexed { index, deviceUiState ->
+        DeviceListItem(
+            deviceUiState = deviceUiState,
+        ) {
+            navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)
+        }
+        if (state.deviceUiItems.lastIndex != index) {
+            Divider()
+        }
+    }
+}
+
+@Composable
 private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
     Image(
         painter =
@@ -267,6 +381,8 @@ private fun DeviceListItem(
                     Icon(
                         painter = painterResource(id = R.drawable.icon_close),
                         contentDescription = stringResource(id = R.string.remove_button),
+                        tint = MaterialTheme.colorScheme.onPrimary,
+                        modifier = Modifier.size(size = Dimens.deleteIconSize)
                     )
                 }
             }
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 215f6d08a0..2e412d864e 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
@@ -33,6 +33,7 @@ data class Dimensions(
     val connectButtonExtraPadding: Dp = 4.dp,
     val countryRowPadding: Dp = 18.dp,
     val customPortBoxMinWidth: Dp = 80.dp,
+    val deleteIconSize: Dp = 24.dp,
     val dialogIconHeight: Dp = 44.dp,
     val dialogIconSize: Dp = 48.dp,
     val expandableCellChevronSize: Dp = 30.dp,