warp phone component & fix background color after auto fit

src/components/CustomBottomSheet/OfficeBottomSheet.tsx

@@ -44,8 +44,8 @@ export function OfficeBottomSheet({
       title={t("address.officeDetails")}
       showCloseButton={false}
       initialSnap={1}
-      height={"90vh"}
-      snapPoints={["90vh"]}
+      height={705}
+      snapPoints={[705]}
     >
       <Form
         layout="vertical"

src/components/CustomBottomSheet/RoomBottomSheet.tsx

@@ -45,8 +45,8 @@ export function RoomBottomSheet({
       title={t("address.roomDetails")}
       showCloseButton={false}
       initialSnap={1}
-      height={"85vh"}
-      snapPoints={["85vh"]}
+      height={680}
+      snapPoints={[680]}
     >
       <Form
         layout="vertical"

src/components/ProPhoneInput.tsx

@@ -0,0 +1,77 @@
+import { Form } from "antd";
+import { TitleProps } from "antd/es/typography/Title";
+import { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import PhoneInput from "react-phone-input-2";
+import { useAppSelector } from "redux/hooks";
+import { ProBlack1 } from "ThemeConstants";
+
+interface ProPhoneInput extends TitleProps {
+  phone: string;
+  setPhone: (phone: string) => void;
+}
+
+const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) => {
+  const { t } = useTranslation();
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  return (
+    <Form.Item
+      name="phone"
+      label={t("login.phone")}
+      rules={[
+        { required: true, message: "" },
+        { type: "number", message: "" },
+      ]}
+    >
+      <div className="pro-phone-input">
+        <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", // Required for accessibility & autofill
+            name: "phone",
+            required: true,
+            autoFocus: false,
+            autoComplete: "tel",
+            type: "tel",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+          }}
+        />
+      </div>
+    </Form.Item>
+  );
+};
+
+export default ProPhoneInput;