Refactor and fix chevron

6 files changed, 58 insertions, 34 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
index 71c3ffc18e..3ccefe13b5 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -21,7 +21,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.text.HtmlCompat
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.ChevronButton
+import net.mullvad.mullvadvpn.compose.component.ExpandChevronIconButton
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -107,7 +107,7 @@ private fun ExpandableComposeCellBody(
             }
         }
 
-        ChevronButton(
+        ExpandChevronIconButton(
             isExpanded = isExpanded,
             onExpand = onExpand,
             color = MaterialTheme.colorScheme.onPrimary,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
index a5d2ee37f9..2ef9a22c4e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
@@ -12,12 +12,12 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 
@@ -67,7 +67,7 @@ fun NavigationComposeCell(
     showWarning: Boolean = false,
     textColor: Color = MaterialTheme.colorScheme.onPrimary,
     bodyView: @Composable () -> Unit = {
-        DefaultNavigationView(chevronContentDescription = title, tint = textColor)
+        ChevronRight(contentDescription = title, tint = textColor)
     },
     isRowEnabled: Boolean = true,
     onClick: () -> Unit,
@@ -113,16 +113,6 @@ internal fun NavigationTitleView(
 }
 
 @Composable
-internal fun DefaultNavigationView(chevronContentDescription: String, tint: Color) {
-    Icon(
-        modifier = Modifier.rotate(-90f),
-        painter = painterResource(id = R.drawable.icon_chevron),
-        contentDescription = chevronContentDescription,
-        tint = tint,
-    )
-}
-
-@Composable
 internal fun DefaultExternalLinkView(chevronContentDescription: String, tint: Color) {
     Icon(
         painter = painterResource(id = R.drawable.icon_extlink),
@@ -149,10 +139,7 @@ internal fun NavigationCellBody(
         if (isExternalLink) {
             DefaultExternalLinkView(content, tint = contentColor)
         } else {
-            DefaultNavigationView(
-                chevronContentDescription = contentBodyDescription,
-                tint = contentColor,
-            )
+            ChevronRight(tint = contentColor, contentDescription = contentBodyDescription)
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt
index 495b9d61b3..55e1a76d9d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ObfuscationModeCell.kt
@@ -2,23 +2,25 @@ package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 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.material3.Icon
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.VerticalDivider
 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.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.compose.preview.SelectObfuscationCellPreviewParameterProvider
 import net.mullvad.mullvadvpn.lib.model.Constraint
 import net.mullvad.mullvadvpn.lib.model.ObfuscationMode
@@ -88,15 +90,16 @@ fun ObfuscationModeCell(
             color = MaterialTheme.colorScheme.surface,
             modifier = Modifier.fillMaxHeight().padding(vertical = Dimens.verticalDividerPadding),
         )
-        Icon(
-            painterResource(id = R.drawable.icon_chevron),
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onPrimary,
+
+        Box(
             modifier =
-                Modifier.fillMaxHeight()
-                    .clickable { onNavigate() }
-                    .padding(horizontal = Dimens.obfuscationNavigationPadding),
-        )
+                Modifier.widthIn(min = Dimens.obfuscationNavigationBoxWidth)
+                    .fillMaxHeight()
+                    .clickable { onNavigate() },
+            contentAlignment = Alignment.Center,
+        ) {
+            ChevronRight(tint = MaterialTheme.colorScheme.onPrimary, contentDescription = null)
+        }
     }
 }
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
index ff20dd0a67..29ca1537f8 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
@@ -26,9 +26,18 @@ private fun PreviewChevron() {
 }
 
 @Composable
+@Preview
+private fun PreviewChevronRight() {
+    Column {
+        ChevronLeft(tint = MaterialTheme.colorScheme.onPrimary)
+        ChevronRight(tint = MaterialTheme.colorScheme.onPrimary)
+    }
+}
+
+@Composable
 fun Chevron(modifier: Modifier = Modifier, color: Color, isExpanded: Boolean) {
 
-    val degree = remember(isExpanded) { if (isExpanded) 180f else 0f }
+    val degree = remember(isExpanded) { if (isExpanded) UP_ROTATION else DOWN_ROTATION }
     val animatedRotation =
         animateFloatAsState(
             targetValue = degree,
@@ -45,7 +54,27 @@ fun Chevron(modifier: Modifier = Modifier, color: Color, isExpanded: Boolean) {
 }
 
 @Composable
-fun ChevronButton(
+fun ChevronLeft(modifier: Modifier = Modifier, tint: Color, contentDescription: String? = null) {
+    Icon(
+        painterResource(id = R.drawable.icon_chevron),
+        contentDescription = contentDescription,
+        tint = tint,
+        modifier = modifier.rotate(LEFT_ROTATION),
+    )
+}
+
+@Composable
+fun ChevronRight(modifier: Modifier = Modifier, tint: Color, contentDescription: String? = null) {
+    Icon(
+        painterResource(id = R.drawable.icon_chevron),
+        contentDescription = contentDescription,
+        tint = tint,
+        modifier = modifier.rotate(RIGHT_ROTATION),
+    )
+}
+
+@Composable
+fun ExpandChevronIconButton(
     modifier: Modifier = Modifier,
     color: Color,
     onExpand: (Boolean) -> Unit,
@@ -55,3 +84,8 @@ fun ChevronButton(
         Chevron(isExpanded = isExpanded, color = color)
     }
 }
+
+private const val RIGHT_ROTATION = -90f
+private const val LEFT_ROTATION = 90f
+private const val DOWN_ROTATION = 0f
+private const val UP_ROTATION = 180f
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
index afbbce2006..51214b294a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
@@ -27,8 +27,8 @@ import com.ramcosta.composedestinations.generated.destinations.EditApiAccessMeth
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
-import net.mullvad.mullvadvpn.compose.cell.DefaultNavigationView
 import net.mullvad.mullvadvpn.compose.cell.TwoRowCell
+import net.mullvad.mullvadvpn.compose.component.ChevronRight
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.constant.ContentType
@@ -188,9 +188,9 @@ private fun ApiAccessMethodItem(
         titleStyle = MaterialTheme.typography.titleMedium,
         subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
         bodyView = {
-            DefaultNavigationView(
-                chevronContentDescription = apiAccessMethodSetting.name.value,
+            ChevronRight(
                 tint = MaterialTheme.colorScheme.onPrimary,
+                contentDescription = apiAccessMethodSetting.name.value,
             )
         },
         onCellClicked = { onApiAccessMethodClick(apiAccessMethodSetting) },
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 8d2660878c..424bf0a406 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
@@ -49,7 +49,7 @@ data class Dimensions(
     val notificationBannerStartPadding: Dp = 16.dp,
     val notificationEndIconPadding: Dp = 4.dp,
     val notificationStatusIconSize: Dp = 10.dp,
-    val obfuscationNavigationPadding: Dp = 24.dp,
+    val obfuscationNavigationBoxWidth: Dp = 80.dp,
     val problemReportIconToTitlePadding: Dp = 60.dp,
     val reconnectButtonMinInteractiveComponentSize: Dp = 40.dp,
     val relayCircleSize: Dp = 16.dp,