warp phone component & fix background color after auto fit

src/pages/checkout/components/GiftDetails.tsx

@@ -68,6 +68,7 @@ export const GiftDetails = () => {
               type="primary"
               size="small"
               onClick={handleOfficeBottomSheetOpen}
+              style={{ boxShadow: "none" }}
             >
               {buttonText}
             </Button>

src/pages/checkout/components/OfficeDetails.tsx

@@ -58,6 +58,7 @@ export const OfficeDetails = () => {
               type="primary"
               size="small"
               onClick={handleOfficeBottomSheetOpen}
+              style={{ boxShadow: "none" }}
             >
               {buttonText}
             </Button>

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>