order details: fix style

src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.module.css

@@ -1,9 +1,65 @@
+.container {
+  padding: 16px;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, auto) auto minmax(0, auto) auto minmax(
+      0,
+      auto
+    ) auto;
+  gap: 4px;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
 .saveButton {
   border-radius: 100px;
   height: 48px;
   width: 100%;
   font-size: 16px;
   box-shadow: none;
-  position: fixed;
+  margin-top: 16px;
-  bottom: 0;left: 0;
+}
+
+.noLocationContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  text-align: center;
+  min-height: 80px;
+  max-height: 120px;
+}
+
+.smallTextStyle {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.mapContainer {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  height: auto;
+  max-height: 160px;
+}
+
+.sectionTitle {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.sectionContent {
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  background-color: var(--border);
+}
+.segmentedContent {
+  width: 100%;
+  margin-bottom: 15px;
 }

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}
+      height="70vh"
-      snapPoints={["60vh"]}
+      snapPoints={["70vh"]}
       showCloseButton={false}
     >
-      <div style={{ padding: "16px 0", position: "relative" }}>
+      <div className={styles.container}>
         {/* Order Type */}
-        <ProInputCard
+        <div className={styles.sectionTitle}>
-          title={t("orderDetails.fulfillmentType")}
+          {t("orderDetails.fulfillmentType")}
-          dividerStyle={{ margin: "5px 0 0 0" }}
+        </div>
-        >
+        <div className={styles.segmentedContent}>
           <Segmented
             options={[
               {
@@ -59,18 +58,16 @@ export function OrderDetailsBottomSheet({
             ]}
             value={orderType}
             size="small"
+            block
           />
-        </ProInputCard>
+        </div>
-        <ProInputCard
+        <div className={styles.sectionTitle}>{t("orderDetails.location")}</div>
-          title={t("orderDetails.location")}
+        <div className={styles.sectionContent}>
-          dividerStyle={{ margin: "5px 0 0 0" }}
-        >
           {!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>
+        </div>
-        <ProInputCard
+        <div className={styles.sectionTitle}>
-          title={t("orderDetails.pickupTime")}
+          {t("orderDetails.pickupTime")}
-          dividerStyle={{ margin: "5px 0 0 0" }}
+        </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>