ProBottomSheet: enhance UI

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -44,6 +44,11 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
     // }
   };
 
+  const hasOptions =
+    (item.extras && item.extras.length > 0) ||
+    (item.variants && item.variants.length > 0) ||
+    (item.theExtrasGroups && item.theExtrasGroups.length > 0);
+
   return (
     <>
       <div
@@ -206,22 +211,24 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
               </Badge>
             </div>
           </div>
-          <ProText
-            style={{
-              fontWeight: 400,
-              fontStyle: "Regular",
-              fontSize: "12px",
-              lineHeight: "140%",
-              letterSpacing: "0%",
-              textAlign: "center",
-              position: "absolute",
-              bottom: 19,
-              [isRTL ? "left" : "right"]: 26,
-              color: "#A4A3AA",
-            }}
-          >
-            {t("menu.customizable")}
-          </ProText>
+          {hasOptions && (
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                position: "absolute",
+                bottom: 19,
+                [isRTL ? "left" : "right"]: 26,
+                color: "#A4A3AA",
+              }}
+            >
+              {t("menu.customizable")}
+            </ProText>
+          )}
         </Card>
       </div>
 

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 {