Align CircularProgressIndicator into Mullvad variant

mullvad · Oct 30, 2023 · dacd01a · dacd01a
1 parent 87ce1ee
commit dacd01a
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 68 deletions.
diff --git a/...app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt b/...app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
@@ -0,0 +1,77 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.Alpha20
+
+@Preview
+@Composable
+private fun PreviewMullvadProgressIndicator() {
+    AppTheme {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            MullvadCircularProgressIndicatorLarge()
+            MullvadCircularProgressIndicatorMedium()
+            MullvadCircularProgressIndicatorSmall()
+        }
+    }
+}
+
+@Composable
+fun MullvadCircularProgressIndicatorLarge(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onBackground,
+    trackColor: Color = color.copy(alpha = Alpha20),
+) {
+    CircularProgressIndicator(
+        modifier.size(Dimens.circularProgressBarLargeSize),
+        color,
+        Dimens.circularProgressBarLargeStrokeWidth,
+        trackColor,
+        StrokeCap.Round
+    )
+}
+
+@Composable
+fun MullvadCircularProgressIndicatorMedium(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onBackground,
+    trackColor: Color = color.copy(alpha = Alpha20),
+) {
+    CircularProgressIndicator(
+        modifier.size(Dimens.circularProgressBarMediumSize),
+        color,
+        Dimens.circularProgressBarMediumStrokeWidth,
+        trackColor,
+        StrokeCap.Round
+    )
+}
+
+@Composable
+fun MullvadCircularProgressIndicatorSmall(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onBackground,
+    trackColor: Color = color.copy(alpha = Alpha20),
+) {
+    CircularProgressIndicator(
+        modifier.size(Dimens.circularProgressBarSmallSize),
+        color,
+        Dimens.circularProgressBarSmallStrokeWidth,
+        trackColor,
+        StrokeCap.Round
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/InformationView.kt
@@ -2,10 +2,7 @@ package net.mullvad.mullvadvpn.compose.component
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -59,13 +56,7 @@ fun InformationView(
                     verticalAlignment = Alignment.CenterVertically,
                     modifier = modifier.padding(Dimens.smallPadding)
                 ) {
-                    CircularProgressIndicator(
-                        modifier =
-                            Modifier.height(Dimens.loadingSpinnerSizeMedium)
-                                .width(Dimens.loadingSpinnerSizeMedium),
-                        color = MaterialTheme.colorScheme.onSecondary
-                    )
-                    Spacer(modifier = Modifier.weight(1f))
+                    MullvadCircularProgressIndicatorSmall()
                 }
             }
         }

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
@@ -10,9 +10,7 @@ import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -125,12 +123,7 @@ fun ListItem(
                     .padding(horizontal = Dimens.loadingSpinnerPadding)
         ) {
             if (isLoading) {
-                CircularProgressIndicator(
-                    strokeWidth = Dimens.loadingSpinnerStrokeWidth,
-                    color = MaterialTheme.colorScheme.onPrimary,
-                    modifier =
-                        Modifier.height(Dimens.loadingSpinnerSize).width(Dimens.loadingSpinnerSize)
-                )
+                MullvadCircularProgressIndicatorMedium()
             } else if (iconResourceId != null) {
                 Image(
                     painter = painterResource(id = iconResourceId),

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
@@ -8,9 +8,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -28,6 +26,7 @@ import net.mullvad.mullvadvpn.BuildConfig
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.button.VariantButton
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorSmall
 import net.mullvad.mullvadvpn.compose.state.VoucherDialogState
 import net.mullvad.mullvadvpn.compose.state.VoucherDialogUiState
 import net.mullvad.mullvadvpn.compose.textfield.GroupedTextField
@@ -242,12 +241,7 @@ private fun EnterVoucherBody(
         modifier = Modifier.height(Dimens.listIconSize).fillMaxWidth()
     ) {
         if (uiState.voucherViewModelState is VoucherDialogState.Verifying) {
-            CircularProgressIndicator(
-                modifier =
-                    Modifier.height(Dimens.loadingSpinnerSizeMedium)
-                        .width(Dimens.loadingSpinnerSizeMedium),
-                color = MaterialTheme.colorScheme.onSecondary
-            )
+            MullvadCircularProgressIndicatorSmall()
             Text(
                 text = stringResource(id = R.string.verifying_voucher),
                 modifier = Modifier.padding(start = Dimens.smallPadding),

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -8,10 +8,8 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 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.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -35,6 +33,7 @@ import net.mullvad.mullvadvpn.compose.button.ConnectionButton
 import net.mullvad.mullvadvpn.compose.button.SwitchLocationButton
 import net.mullvad.mullvadvpn.compose.component.ConnectionStatusText
 import net.mullvad.mullvadvpn.compose.component.LocationInfo
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBarAndDeviceName
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.component.notificationbanner.NotificationBanner
@@ -174,18 +173,14 @@ fun ConnectScreen(
                         uiState.tunnelRealState.actionAfterDisconnect ==
                             ActionAfterDisconnect.Reconnect)
             ) {
-                CircularProgressIndicator(
+                MullvadCircularProgressIndicatorLarge(
                     color = MaterialTheme.colorScheme.onPrimary,
                     modifier =
                         Modifier.padding(
                                 start = Dimens.sideMargin,
                                 end = Dimens.sideMargin,
                                 top = Dimens.mediumPadding
                             )
-                            .size(
-                                width = Dimens.progressIndicatorSize,
-                                height = Dimens.progressIndicatorSize
-                            )
                             .align(Alignment.CenterHorizontally)
                             .testTag(CIRCULAR_PROGRESS_INDICATOR)
                 )

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
@@ -20,7 +20,6 @@ import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -40,7 +39,6 @@ import androidx.compose.ui.focus.FocusState
 import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -55,6 +53,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.button.VariantButton
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.state.LoginError
 import net.mullvad.mullvadvpn.compose.state.LoginState
@@ -257,13 +256,7 @@ private fun LoginIcon(loginState: LoginState, modifier: Modifier = Modifier) {
                 } else {
                     // If view is Idle, we display empty box to keep the same size as other states
                 }
-            is Loading ->
-                CircularProgressIndicator(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.onPrimary,
-                    strokeWidth = Dimens.loadingSpinnerStrokeWidth,
-                    strokeCap = StrokeCap.Round
-                )
+            is Loading -> MullvadCircularProgressIndicatorLarge()
             Success ->
                 Image(
                     painter = painterResource(id = R.drawable.icon_success),

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
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -23,7 +22,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
@@ -34,6 +32,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.button.VariantButton
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.dialog.ReportProblemNoEmailDialog
@@ -179,10 +178,8 @@ fun ReportProblemScreen(
 
 @Composable
 private fun ColumnScope.SendingContent() {
-    CircularProgressIndicator(
+    MullvadCircularProgressIndicatorLarge(
         modifier = Modifier.align(Alignment.CenterHorizontally),
-        strokeCap = StrokeCap.Round,
-        strokeWidth = Dimens.loadingSpinnerStrokeWidth
     )
     Spacer(modifier = Modifier.height(Dimens.problemReportIconToTitlePadding))
     Text(

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -42,6 +41,7 @@ import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.cell.RelayLocationCell
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.constant.ContentType
@@ -151,14 +151,8 @@ fun SelectLocationScreen(
             when (uiState) {
                 SelectLocationUiState.Loading -> {
                     item(contentType = ContentType.PROGRESS) {
-                        CircularProgressIndicator(
-                            color = MaterialTheme.colorScheme.onBackground,
-                            modifier =
-                                Modifier.size(
-                                        width = Dimens.progressIndicatorSize,
-                                        height = Dimens.progressIndicatorSize
-                                    )
-                                    .testTag(CIRCULAR_PROGRESS_INDICATOR)
+                        MullvadCircularProgressIndicatorLarge(
+                            Modifier.testTag(CIRCULAR_PROGRESS_INDICATOR)
                         )
                     }
                 }

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
@@ -8,17 +8,14 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusDirection
-import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -27,6 +24,7 @@ import net.mullvad.mullvadvpn.applist.AppData
 import net.mullvad.mullvadvpn.compose.cell.BaseCell
 import net.mullvad.mullvadvpn.compose.cell.HeaderSwitchComposeCell
 import net.mullvad.mullvadvpn.compose.cell.SplitTunnelingCell
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.constant.CommonContentKey
@@ -110,11 +108,7 @@ fun SplitTunnelingScreen(
             when (uiState) {
                 SplitTunnelingUiState.Loading -> {
                     item(key = CommonContentKey.PROGRESS, contentType = ContentType.PROGRESS) {
-                        CircularProgressIndicator(
-                            color = MaterialTheme.colorScheme.onBackground,
-                            modifier = Modifier.size(Dimens.progressIndicatorSize),
-                            strokeCap = StrokeCap.Round
-                        )
+                        MullvadCircularProgressIndicatorLarge()
                     }
                 }
                 is SplitTunnelingUiState.ShowAppList -> {

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
@@ -7,7 +7,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Card
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -20,6 +19,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorMedium
 import net.mullvad.mullvadvpn.compose.component.MullvadMediumTopBar
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
@@ -66,9 +66,10 @@ fun ViewLogsScreen(
                     ),
         ) {
             if (uiState.isLoading) {
-                CircularProgressIndicator(
+                MullvadCircularProgressIndicatorMedium(
                     modifier =
-                        Modifier.padding(Dimens.mediumPadding).align(Alignment.CenterHorizontally)
+                        Modifier.padding(Dimens.mediumPadding).align(Alignment.CenterHorizontally),
+                    color = MaterialTheme.colorScheme.primary
                 )
             } else {
                 SelectionContainer {

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
@@ -20,6 +20,12 @@ data class Dimensions(
     val cellVerticalSpacing: Dp = 14.dp,
     val chevronMargin: Dp = 4.dp,
     val cityRowPadding: Dp = 34.dp,
+    val circularProgressBarLargeSize: Dp = 44.dp,
+    val circularProgressBarLargeStrokeWidth: Dp = 6.dp,
+    val circularProgressBarMediumSize: Dp = 32.dp,
+    val circularProgressBarMediumStrokeWidth: Dp = 4.dp,
+    val circularProgressBarSmallSize: Dp = 24.dp,
+    val circularProgressBarSmallStrokeWidth: Dp = 3.dp,
     val countryRowPadding: Dp = 18.dp,
     val customPortBoxMinWidth: Dp = 80.dp,
     val dialogIconHeight: Dp = 44.dp,
@@ -36,7 +42,7 @@ data class Dimensions(
     val loadingSpinnerPadding: Dp = 12.dp,
     val loadingSpinnerSize: Dp = 24.dp,
     val loadingSpinnerSizeMedium: Dp = 28.dp,
-    val loadingSpinnerStrokeWidth: Dp = 6.dp,
+    val loginIconContainerSize: Dp = 44.dp,
     val mediumPadding: Dp = 16.dp,
     val notificationBannerEndPadding: Dp = 8.dp,
     val notificationBannerStartPadding: Dp = 16.dp,