dark theme fixes

src/components/ProPhoneInput.tsx

@@ -2,7 +2,7 @@ import { Form } from "antd";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
 import { TitleProps } from "antd/es/typography/Title";
 import { PhoneNumberUtil } from "google-libphonenumber";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import PhoneInput from "react-phone-input-2";
 import { useAppSelector } from "redux/hooks";
@@ -22,7 +22,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
   const form = useFormInstance();
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
-  const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <Form.Item
@@ -46,6 +45,7 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
           },
         },
       ]}
+      style={{ direction: "ltr" }}
     >
       <PhoneInputWrapper
         onChange={(value) => {
@@ -54,7 +54,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
         }}
         phone={form.getFieldValue(propName)}
         themeName={themeName}
-        isRTL={isRTL}
         placeholder={t("login.mobileNumber")}
         propName={propName}
         label={label}
@@ -66,7 +65,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
 export const PhoneInputWrapper = ({
   phone,
   themeName,
-  isRTL,
   placeholder,
   value,
   onChange,
@@ -75,29 +73,34 @@ export const PhoneInputWrapper = ({
 }: {
   phone?: string;
   themeName: string;
-  isRTL: boolean;
   placeholder: string;
   value?: string;
   onChange?: (value: string) => void;
   propName?: string;
   label?: string;
 }) => {
+  const inputStyle = useMemo(
+    () => ({
+      borderRadius: 1000,
+      height: 50,
+      width: "100%",
+      color: themeName === "light" ? "#000" : "#FFF",
+      backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
+      textAlign: "left" as const,
+      direction: "ltr" as const,
+      paddingLeft: "50px",
+      paddingRight: "50px",
+      borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
+    }),
+    [themeName],
+  );
+
   return (
     <div className="pro-phone-input">
       <PhoneInput
+        key={themeName}
         country={"om"}
-        inputStyle={{
-          borderRadius: 1000,
-          height: 50,
-          width: "100%",
-          color: themeName === "light" ? "#000" : "#FFF",
-          backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
-          textAlign: isRTL ? "right" : "left",
-          direction: isRTL ? "rtl" : "ltr",
-          paddingLeft: "50px",
-          paddingRight: "50px",
-          borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
-        }}
+        inputStyle={inputStyle}
         placeholder={label || placeholder}
         value={value || phone}
         onChange={(value) => {
@@ -109,13 +112,7 @@ export const PhoneInputWrapper = ({
           borderLeft: "1px solid #363636",
           borderRadius: 0,
           position: "relative",
-          ...(isRTL && {
-            top: -25,
-            right: 25,
-          }),
-          ...(!isRTL && {
-            top: -25,
-          }),
+          top: -25,
         }}
         autocompleteSearch
         inputProps={{