fix: trnslation keys and ltr style icons

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { ArrowLeft, Edit2, Eye, EyeSlash } from 'iconsax-react';
+import { ArrowLeft, ArrowRight, Edit2, Eye, EyeSlash } from 'iconsax-react';
 import {
   Box,
   Button,
@@ -51,7 +51,7 @@ export const EnterPasswordForm = ({
   countryCode,
   authFactory,
 }: EnterPasswordFormProps) => {
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const [passValue, setPassValue] = useState<string>('');
   const [inputTouched, setInputTouched] = useState<boolean>(false);
   const [showPassword, setShowPassword] = useState<boolean>(false);
@@ -184,7 +184,9 @@ export const EnterPasswordForm = ({
         sx={{ width: 'auto', mb: 2 }}
         variant="text"
         loading={emailResendLoading || smsResendLoading}
-        endIcon={<Icon Component={ArrowLeft} />}
+        endIcon={
+          <Icon Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight} />
+        }
       >
         {t('enterPassword.loginWithOneTimeCode')}
       </Button>

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -42,7 +42,7 @@ export function LoginRegisterForm({
   onGoogleAuthenticated,
   authFactory,
 }: LoginRegisterFormProps) {
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState<string>();
@@ -167,7 +167,16 @@ export function LoginRegisterForm({
           slotProps={{
             htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
             input: {
-              endAdornment: (
+              endAdornment: i18n.dir() === 'rtl' && (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  show={showAdornment}
+                  menuAnchor={menuAnchorEl}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+              startAdornment: i18n.dir() === 'ltr' && (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}