Directional icons should be mirrored in right to left languages (#999)

app/src/main/java/com/x8bit/bitwarden/ui/platform/base/util/ModifierExtensions.kt

@@ -9,9 +9,12 @@ import androidx.compose.runtime.Stable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.data.platform.annotation.OmitFromCoverage
 
@@ -69,3 +72,18 @@ fun Modifier.bottomDivider(
         }
     }
 }
+
+/**
+ * This is a [Modifier] extension for mirroring the contents of a composable when the layout
+ * direction is set to [LayoutDirection.Rtl]. Primarily used for directional icons, such as the
+ * up button and chevrons.
+ */
+@OmitFromCoverage
+@Stable
+@Composable
+fun Modifier.mirrorIfRtl(): Modifier =
+    if (LocalLayoutDirection.current == LayoutDirection.Rtl) {
+        scale(scaleX = -1f, scaleY = 1f)
+    } else {
+        this
+    }

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenGroupItem.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
+import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 
 /**
@@ -86,7 +87,9 @@ fun BitwardenGroupItem(
             painter = painterResource(id = R.drawable.ic_navigate_next),
             contentDescription = null,
             tint = MaterialTheme.colorScheme.onSurfaceVariant,
-            modifier = Modifier.size(24.dp),
+            modifier = Modifier
+                .mirrorIfRtl()
+                .size(24.dp),
         )
     }
 }

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenTopAppBar.kt

@@ -11,12 +11,14 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import com.x8bit.bitwarden.R
+import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 
 /**
@@ -83,6 +85,7 @@ fun BitwardenTopAppBar(
                     onClick = it.onNavigationIconClick,
                 ) {
                     Icon(
+                        modifier = Modifier.mirrorIfRtl(),
                         painter = it.navigationIcon,
                         contentDescription = it.navigationIconContentDescription,
                     )

app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/SettingsScreen.kt

@@ -33,6 +33,7 @@ import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
 import com.x8bit.bitwarden.ui.platform.base.util.Text
 import com.x8bit.bitwarden.ui.platform.base.util.bottomDivider
+import com.x8bit.bitwarden.ui.platform.base.util.mirrorIfRtl
 import com.x8bit.bitwarden.ui.platform.components.BitwardenMediumTopAppBar
 import com.x8bit.bitwarden.ui.platform.components.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@@ -127,7 +128,9 @@ private fun SettingsRow(
             painter = painterResource(id = R.drawable.ic_navigate_next),
             contentDescription = null,
             tint = MaterialTheme.colorScheme.onSurface,
-            modifier = Modifier.size(24.dp),
+            modifier = Modifier
+                .mirrorIfRtl()
+                .size(24.dp),
         )
     }
 }