From 3aeaa0a9f3e275a9418c2b8b68c772b839fc5dc9 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Thu, 23 Oct 2025 17:24:12 +0300
Subject: [PATCH] warp phone component & fix background color after auto fit

---
 .../CustomBottomSheet/OfficeBottomSheet.tsx   |  4 +-
 .../CustomBottomSheet/RoomBottomSheet.tsx     |  4 +-
 src/components/ProPhoneInput.tsx              | 77 +++++++++++++++++++
 src/index.css                                 | 50 +++++++++++-
 src/pages/checkout/components/GiftDetails.tsx |  1 +
 .../checkout/components/OfficeDetails.tsx     |  1 +
 src/pages/checkout/components/RoomDetails.tsx |  7 +-
 src/pages/login/login.module.css              |  5 +-
 src/pages/login/page.tsx                      | 61 +--------------
 9 files changed, 142 insertions(+), 68 deletions(-)
 create mode 100644 src/components/ProPhoneInput.tsx

diff --git a/src/components/CustomBottomSheet/OfficeBottomSheet.tsx b/src/components/CustomBottomSheet/OfficeBottomSheet.tsx
index 4f769e5..ea3d094 100644
--- a/src/components/CustomBottomSheet/OfficeBottomSheet.tsx
+++ b/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"
diff --git a/src/components/CustomBottomSheet/RoomBottomSheet.tsx b/src/components/CustomBottomSheet/RoomBottomSheet.tsx
index 76ada0b..fda63d5 100644
--- a/src/components/CustomBottomSheet/RoomBottomSheet.tsx
+++ b/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"
diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx
new file mode 100644
index 0000000..8333306
--- /dev/null
+++ b/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;
diff --git a/src/index.css b/src/index.css
index 6a2fb2b..569f250 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,7 +11,7 @@
   --secondary-background: #ffffff;
   --secondary-foreground: #0a0a0a;
   --primary-dark: #0a0a0a;
-  --primary: #FFD633;
+  --primary: #ffd633;
   --primary2: #ffc600;
   --secondary: #09237d;
   --text-color: #fff;
@@ -330,3 +330,51 @@ label {
   padding: 16px 16px 8px 16px !important;
   box-shadow: none !important;
 }
+
+/* Override PhoneInput autofill background styles */
+.pro-phone-input :where(.react-tel-input input) {
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+.pro-phone-input :where(.react-tel-input input:-webkit-autofill),
+.pro-phone-input :where(.react-tel-input input:-webkit-autofill:hover),
+.pro-phone-input :where(.react-tel-input input:-webkit-autofill:focus),
+.pro-phone-input :where(.react-tel-input input:-webkit-autofill:active) {
+  -webkit-box-shadow: 0 0 0 30px var(--secondary-background) inset !important;
+  -webkit-text-fill-color: var(--secondary-foreground) !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* Dark theme PhoneInput autofill overrides */
+:where(.darkApp)
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill),
+:where(.darkApp)
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:hover),
+:where(.darkApp)
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:focus),
+:where(.darkApp)
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:active),
+:where([data-theme="dark"])
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill),
+:where([data-theme="dark"])
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:hover),
+:where([data-theme="dark"])
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:focus),
+:where([data-theme="dark"])
+  .pro-phone-input
+  :where(.react-tel-input input:-webkit-autofill:active) {
+  -webkit-box-shadow: 0 0 0 30px var(--background) inset !important;
+  -webkit-text-fill-color: var(--secondary-foreground) !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
diff --git a/src/pages/checkout/components/GiftDetails.tsx b/src/pages/checkout/components/GiftDetails.tsx
index 20eb6f0..088061d 100644
--- a/src/pages/checkout/components/GiftDetails.tsx
+++ b/src/pages/checkout/components/GiftDetails.tsx
@@ -68,6 +68,7 @@ export const GiftDetails = () => {
               type="primary"
               size="small"
               onClick={handleOfficeBottomSheetOpen}
+              style={{ boxShadow: "none" }}
             >
               {buttonText}
             </Button>
diff --git a/src/pages/checkout/components/OfficeDetails.tsx b/src/pages/checkout/components/OfficeDetails.tsx
index aaeb9fe..bc2d40c 100644
--- a/src/pages/checkout/components/OfficeDetails.tsx
+++ b/src/pages/checkout/components/OfficeDetails.tsx
@@ -58,6 +58,7 @@ export const OfficeDetails = () => {
               type="primary"
               size="small"
               onClick={handleOfficeBottomSheetOpen}
+              style={{ boxShadow: "none" }}
             >
               {buttonText}
             </Button>
diff --git a/src/pages/checkout/components/RoomDetails.tsx b/src/pages/checkout/components/RoomDetails.tsx
index fcf0afa..961b387 100644
--- a/src/pages/checkout/components/RoomDetails.tsx
+++ b/src/pages/checkout/components/RoomDetails.tsx
@@ -5,9 +5,9 @@ import GoldenHouseIcon from "components/Icons/address/GoldenHouseIcon";
 import RoomServiceIcon from "components/Icons/address/RoomServiceIcon";
 import ProText from "components/ProText";
 import {
-    RoomDetailsType,
-    selectCart,
-    updateRoomDetails,
+  RoomDetailsType,
+  selectCart,
+  updateRoomDetails,
 } from "features/order/orderSlice";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -57,6 +57,7 @@ export const RoomDetails = () => {
               type="primary"
               size="small"
               onClick={handleRoomBottomSheetOpen}
+              style={{ boxShadow: "none" }}
             >
               {buttonText}
             </Button>
diff --git a/src/pages/login/login.module.css b/src/pages/login/login.module.css
index 57b5778..2623d1c 100644
--- a/src/pages/login/login.module.css
+++ b/src/pages/login/login.module.css
@@ -1,8 +1,7 @@
 .loginPage {
-    background-color: #FFF;
+  background-color: var(--secondary-background);
 }
 
 :global(.darkApp) .loginPage {
-    background-color: var(--background);
+  background-color: var(--background);
 }
-
diff --git a/src/pages/login/page.tsx b/src/pages/login/page.tsx
index eca1458..0b9cc18 100644
--- a/src/pages/login/page.tsx
+++ b/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>
   );