Use layout direction to fix text alignment

Author: codokie

app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/pendingrequests/PendingRequestsScreen.kt

@@ -35,9 +35,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.Lifecycle
@@ -320,7 +322,11 @@ private fun PendingRequestItem(
                 text = timestamp,
                 style = BitwardenTheme.typography.labelSmall,
                 color = BitwardenTheme.colorScheme.text.secondary,
-                textAlign = TextAlign.End,
+                textAlign = if (LocalLayoutDirection.current == LayoutDirection.Rtl) {
+                    TextAlign.Left
+                } else {
+                    TextAlign.Right
+                },
             )
         }
     }

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/BitwardenTheme.kt

@@ -16,7 +16,10 @@ import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.core.view.WindowCompat
 import com.x8bit.bitwarden.ui.platform.components.field.interceptor.IncognitoInput
 import com.x8bit.bitwarden.ui.platform.feature.settings.appearance.model.AppTheme
@@ -30,6 +33,7 @@ import com.x8bit.bitwarden.ui.platform.theme.shape.bitwardenShapes
 import com.x8bit.bitwarden.ui.platform.theme.type.BitwardenTypography
 import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography
 import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography
+import com.x8bit.bitwarden.ui.platform.theme.type.updateTextAlign
 
 /**
  * Static wrapper to make accessing the theme components easier.
@@ -101,6 +105,14 @@ fun BitwardenTheme(
         else -> lightBitwardenColorScheme
     }
 
+    val textAlign =
+        if (LocalLayoutDirection.current == LayoutDirection.Rtl) {
+            TextAlign.Right
+        } else {
+            TextAlign.Left
+        }
+    val bitwardenTypography = bitwardenTypography.updateTextAlign(textAlign)
+
     // Update status bar according to scheme
     val view = LocalView.current
     if (!view.isInEditMode) {

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/type/BitwardenTypography.kt

@@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.platform.theme.type
 
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
 
 /**
  * Defines all the text-styles for the app.
@@ -28,3 +29,31 @@ data class BitwardenTypography(
     val sensitiveInfoMedium: TextStyle,
     val eyebrowMedium: TextStyle,
 )
+
+/**
+ * Updates the textAlign property of all text-styles.
+ * @param newTextAlign The new text alignment to be used.
+ */
+fun BitwardenTypography.updateTextAlign(newTextAlign: TextAlign): BitwardenTypography {
+    return this.copy(
+        displayLarge = displayLarge.copy(textAlign = newTextAlign),
+        displayMedium = displayMedium.copy(textAlign = newTextAlign),
+        displaySmall = displaySmall.copy(textAlign = newTextAlign),
+        headlineLarge = headlineLarge.copy(textAlign = newTextAlign),
+        headlineMedium = headlineMedium.copy(textAlign = newTextAlign),
+        headlineSmall = headlineSmall.copy(textAlign = newTextAlign),
+        titleLarge = titleLarge.copy(textAlign = newTextAlign),
+        titleMedium = titleMedium.copy(textAlign = newTextAlign),
+        titleSmall = titleSmall.copy(textAlign = newTextAlign),
+        bodyLarge = bodyLarge.copy(textAlign = newTextAlign),
+        bodyMedium = bodyMedium.copy(textAlign = newTextAlign),
+        bodyMediumEmphasis = bodyMediumEmphasis.copy(textAlign = newTextAlign),
+        bodySmall = bodySmall.copy(textAlign = newTextAlign),
+        labelLarge = labelLarge.copy(textAlign = newTextAlign),
+        labelMedium = labelMedium.copy(textAlign = newTextAlign),
+        labelSmall = labelSmall.copy(textAlign = newTextAlign),
+        sensitiveInfoSmall = sensitiveInfoSmall.copy(textAlign = newTextAlign),
+        sensitiveInfoMedium = sensitiveInfoMedium.copy(textAlign = newTextAlign),
+        eyebrowMedium = eyebrowMedium.copy(textAlign = newTextAlign),
+    )
+}