ProBottomSheet: enhance UI

src/pages/product/page.tsx

@@ -4,14 +4,13 @@ import ProText from "components/ProText";
 import { useAppSelector } from "redux/hooks";
 import { default_image } from "utils/constants";
 // import PageTransition from "components/PageTransition/PageTransition";
-import { Space } from "antd";
+import { Divider, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
 import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGetMenuQuery } from "redux/api/others.ts";
-import { colors } from "ThemeConstants";
 import { Extra, Product } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
 import ExtraComponent from "./components/Extra";
@@ -217,7 +216,7 @@ export default function ProductDetailPage({
     <div
       style={{
         height:
-          viewportHeight > 0
+        isBottomSheetView ? "calc(90vh - 285px)" : viewportHeight > 0
             ? `${viewportHeight - 195}px`
             : "calc(100dvh - 195px)",
         overflow: "auto",
@@ -262,6 +261,7 @@ export default function ProductDetailPage({
             <div className={styles.productInfoSection}>
               <div className={styles.productHeader}>
                 <div className={styles.productDetails}>
+                  <Divider style={{ margin: "8px 0 16px 0" }} />
                   <ProText
                     style={{
                       fontWeight: 400,
@@ -316,12 +316,14 @@ export default function ProductDetailPage({
                     price={product?.price}
                     style={{
                       fontSize: isDesktop ? "1.2rem" : "1rem",
-                      color: colors.primary,
                       marginTop: "12px",
                     }}
                   />
                 </div>
               </div>
+              {!hasCustomizationOptions && (
+                <Divider style={{ margin: "0 0 16px 0" }} />
+              )}
             </div>
 
             {isDesktop && (
@@ -344,7 +346,7 @@ export default function ProductDetailPage({
               <Space
                 orientation="vertical"
                 size="middle"
-                style={{ width: "100%", padding: "0 1rem" }}
+                style={{ width: "100%", padding: "0 1rem", gap: 0 }}
               >
                 {product?.variants?.length > 0 && variantLevels.length > 0 && (
                   <Variants

src/pages/product/product.module.css

@@ -220,7 +220,7 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: 0px;
-  margin: 16px 0 24px 0;
+  margin: 16px 0 16px 0;
 }
 
 .productDetails {