order details: fix style

src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx

@@ -3,7 +3,6 @@ import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
 import { useAppSelector } from "redux/hooks.ts";
 import ProText from "components/ProText.tsx";
 import { OrderType } from "pages/checkout/hooks/types.ts";
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import { Segmented, Button } from "antd";
 
 import DineInIcon from "./icons/dineIn.svg?react";
@@ -29,16 +28,16 @@ export function OrderDetailsBottomSheet({
       isOpen={isOpen}
       onClose={onClose}
       title={t("orderDetails.title")}
-      height={500}
-      snapPoints={["60vh"]}
+      height="70vh"
+      snapPoints={["70vh"]}
       showCloseButton={false}
     >
-      <div style={{ padding: "16px 0", position: "relative" }}>
+      <div className={styles.container}>
         {/* Order Type */}
-        <ProInputCard
-          title={t("orderDetails.fulfillmentType")}
-          dividerStyle={{ margin: "5px 0 0 0" }}
-        >
+        <div className={styles.sectionTitle}>
+          {t("orderDetails.fulfillmentType")}
+        </div>
+        <div className={styles.segmentedContent}>
           <Segmented
             options={[
               {
@@ -59,18 +58,16 @@ export function OrderDetailsBottomSheet({
             ]}
             value={orderType}
             size="small"
+            block
           />
-        </ProInputCard>
-        <ProInputCard
-          title={t("orderDetails.location")}
-          dividerStyle={{ margin: "5px 0 0 0" }}
-        >
+        </div>
+        <div className={styles.sectionTitle}>{t("orderDetails.location")}</div>
+        <div className={styles.sectionContent}>
           {!location ? (
             <div className={styles.noLocationContainer}>
               <ProText type="secondary">
                 {t("address.noLocationSelected")}
               </ProText>
-              <br />
               <ProText type="secondary" className={styles.smallTextStyle}>
                 {t("address.clickEditToSelect")}
               </ProText>
@@ -80,25 +77,24 @@ export function OrderDetailsBottomSheet({
               <GoogleMap
                 readOnly={true}
                 initialLocation={location}
-                height="160px"
+                height="100%"
               />
             </div>
           )}
-        </ProInputCard>
-        <ProInputCard
-          title={t("orderDetails.pickupTime")}
-          dividerStyle={{ margin: "5px 0 0 0" }}
-        >
+        </div>
+        <div className={styles.sectionTitle}>
+          {t("orderDetails.pickupTime")}
+        </div>
+        <div className={styles.sectionContent}>
           <div className={styles.noLocationContainer}>
             <ProText type="secondary">
               {t("address.noLocationSelected")}
             </ProText>
-            <br />
             <ProText type="secondary" className={styles.smallTextStyle}>
               {t("address.clickEditToSelect")}
             </ProText>
           </div>
-        </ProInputCard>
+        </div>
         <Button type="primary" className={styles.saveButton}>
           {t("orderDetails.save")}
         </Button>