warp phone component & fix background color after auto fit

src/pages/login/page.tsx

@@ -3,16 +3,16 @@
 import { Button, Form, Input, message } from "antd";
 import DatePickerBottomSheet from "components/CustomBottomSheet/DatePickerBottomSheet";
 import LoginManIcon from "components/Icons/LoginManIcon";
+import ProPhoneInput from "components/ProPhoneInput";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSendOtpMutation } from "redux/api/auth";
 import { useAppSelector } from "redux/hooks";
-import { colors, DisabledColor, ProBlack1, ProGray1 } from "ThemeConstants";
+import { colors, DisabledColor, ProGray1 } from "ThemeConstants";
 import styles from "./login.module.css";
 
 export default function LoginPage() {
@@ -109,60 +109,7 @@ export default function LoginPage() {
           />
         </Form.Item>
 
-        <Form.Item
-          name="phone"
-          label={t("login.phone")}
-          rules={[
-            { required: true, message: "" },
-            { type: "number", message: "" },
-          ]}
-        >
-          <div className={styles.proPhoneNumber}>
-            <PhoneInput
-              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",
-              }}
-              placeholder={t("login.mobileNumber")}
-              value={phone}
-              buttonStyle={{
-                backgroundColor: "transparent",
-                border: 0,
-                borderLeft: "1px solid #363636",
-                borderRadius: 0,
-                position: "relative",
-                ...(isRTL && {
-                  top: -25,
-                  right: 25,
-                }),
-                ...(!isRTL && {
-                  top: -25,
-                }),
-              }}
-              onBlur={(e) => setPhone(e.target.value)}
-              autocompleteSearch
-              inputProps={{
-                id: "phone-number", // Required for accessibility & autofill
-                name: "phone-number",
-                required: true,
-                autoFocus: false,
-                autoComplete: "tel",
-                type: "tel",
-                inputMode: "numeric",
-                pattern: "[0-9]*",
-              }}
-            />
-          </div>
-        </Form.Item>
+        <ProPhoneInput phone={phone} setPhone={setPhone} />
 
         <Form.Item label={null}>
           <Button
@@ -201,7 +148,7 @@ export default function LoginPage() {
           setSelectedDate(formattedDate);
           form.setFieldValue("date", formattedDate);
         }}
-        initialDate={new Date()}
+        initialDate={new Date(1990, 0, 1)}
       />
     </div>
   );