fix: trnslation keys and ltr style icons

src/features/authentication/components/CountryCodeSelector.tsx

@@ -7,7 +7,6 @@ import {
   Menu,
   MenuItem,
   TextField,
-  Typography,
 } from '@mui/material';
 import { useMemo, useRef, useState, type RefObject } from 'react';
 import { ArrowDown2 } from 'iconsax-react';
@@ -17,6 +16,7 @@ import { countries, type Country } from '../../../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon } from '@rkheftan/harmony-ui';
 import { LTRTypography } from '@/components/common/LTRTypography';
+
 interface CountryCodeSelectorProps {
   show: boolean;
   value: CountryCode;
@@ -41,7 +41,7 @@ export function CountryCodeSelector({
   const open = Boolean(anchorEl);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
-  const { t, i18n } = useTranslation(['country', 'common']);
+  const { t } = useTranslation(['country', 'common']);
 
   const selectedCountry =
     countries.find((c) => c.phone === value) || countries[0];
@@ -83,7 +83,7 @@ export function CountryCodeSelector({
 
   return (
     <InputAdornment
-      position={i18n.dir() === 'rtl' ? 'start' : 'end'}
+      position={'end'}
       sx={{
         mx: 0,
       }}
@@ -107,6 +107,7 @@ export function CountryCodeSelector({
           height: '100%',
           display: 'flex',
           alignItems: 'center',
+          flexDirection: 'row-reverse',
           gap: 0.25,
           pl: show ? 0.25 : 0,
 
@@ -118,14 +119,9 @@ export function CountryCodeSelector({
         {/* This inner Box prevents the content from being squeezed during the transition */}
         <Icon Component={ArrowDown2} size="medium" variant="Bold" />
 
-        <Typography
-          variant="body1"
-          color="text.primary"
-          component="div"
-          sx={{ direction: 'rtl' }} // TODO: need to fixed for both en and fa
-        >
+        <LTRTypography variant="body1" color="text.primary">
           {value}
-        </Typography>
+        </LTRTypography>
 
         <ReactCountryFlag
           countryCode={selectedCountry.code}