refactor special request & time estimate components

src/components/ProBottomSheet/ProBottomSheet.tsx

@@ -63,7 +63,7 @@ export function ProBottomSheet({
       const deltaY = clientY - startPosRef.current;
       sheetRef.current.style.transform = `translateY(${Math.max(0, deltaY)}px)`;
     },
-    [isDragging]
+    [isDragging],
   );
 
   const endDrag = useCallback(
@@ -91,7 +91,7 @@ export function ProBottomSheet({
         sheetRef.current.style.transform = "translateY(0)";
       }
     },
-    [isDragging, currentSnap, snapPoints.length, onClose]
+    [isDragging, currentSnap, snapPoints.length, onClose],
   );
 
   // Touch event handlers
@@ -99,21 +99,21 @@ export function ProBottomSheet({
     (e: React.TouchEvent) => {
       startDrag(e.touches[0].clientY);
     },
-    [startDrag]
+    [startDrag],
   );
 
   const handleTouchMove = useCallback(
     (e: React.TouchEvent) => {
       handleDrag(e.touches[0].clientY);
     },
-    [handleDrag]
+    [handleDrag],
   );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
       endDrag(e.changedTouches[0].clientY);
     },
-    [endDrag]
+    [endDrag],
   );
 
   // Mouse event handlers
@@ -121,21 +121,21 @@ export function ProBottomSheet({
     (e: React.MouseEvent) => {
       startDrag(e.clientY);
     },
-    [startDrag]
+    [startDrag],
   );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       handleDrag(e.clientY);
     },
-    [handleDrag]
+    [handleDrag],
   );
 
   const handleMouseUp = useCallback(
     (e: MouseEvent) => {
       endDrag(e.clientY);
     },
-    [endDrag]
+    [endDrag],
   );
 
   // Mouse event listeners
@@ -212,8 +212,6 @@ export function ProBottomSheet({
     alignItems: "center",
     justifyContent: "space-between",
     minHeight: 60,
-    backgroundColor:
-      themeName === "dark" ? "rgba(42, 42, 42, 0.8)" : "transparent",
     backdropFilter: themeName === "dark" ? "blur(8px)" : "none",
   };
 

src/pages/cart/components/specialRequest/Dialog.tsx

@@ -41,13 +41,6 @@ export function Dialog({
       open={isOpen}
       onCancel={handleCancel}
       footer={[
-        <Button
-          key="cancel"
-          onClick={handleCancel}
-          className={styles.actionButton}
-        >
-          {t("cart.cancel")}
-        </Button>,
         <Button
           key="save"
           type="primary"
@@ -61,7 +54,6 @@ export function Dialog({
       destroyOnHidden
     >
       <div className="space-y-4">
-        <div>
         <TextArea
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -71,7 +63,6 @@ export function Dialog({
           className={styles.textArea}
         />
       </div>
-      </div>
     </Modal>
   );
 }

src/pages/cart/components/specialRequest/SpecialRequestCard.module.css

@@ -3,14 +3,16 @@
 }
 
 .editButton {
-  color: var(--primary, #FFB700);
+  color: var(--primary, #ffb700);
   font-size: 14px;
   cursor: pointer;
 }
 .textArea {
   border-radius: 24px;
+  margin: 40px 0;
 }
 .actionButton {
   border-radius: 24px;
-  width: 100px;
+  width: 100% !important;
+  height: 48px !important;
 }

src/pages/cart/components/timeEstimate/BottomSheet.tsx

@@ -1,6 +1,6 @@
-import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
 import Content from "pages/cart/components/timeEstimate/Content.tsx";
+import { useTranslation } from "react-i18next";
 
 interface EstimateTimeBottomSheetProps {
   isOpen: boolean;
@@ -24,8 +24,8 @@ export function BottomSheet({
       title={t("cart.selectTimeEstimate")}
       showCloseButton={true}
       initialSnap={1}
-      height={"50vh"}
+      height={"510px"}
-      snapPoints={["50vh", "60vh"]}
+      snapPoints={["65vh"]}
     >
       <Content onSave={onSave} initialDate={initialDate} onClose={onClose} />
     </ProBottomSheet>

src/pages/cart/components/timeEstimate/Content.tsx

@@ -1,9 +1,10 @@
 import { Button, Divider } from "antd";
-import NextIcon from "components/Icons/NextIcon.tsx";
-import styles from "components/CustomBottomSheet/CustomBottomSheet.module.css";
 import BackIcon from "components/Icons/BackIcon.tsx";
-import { useState, useEffect } from "react";
+import NextIcon from "components/Icons/NextIcon.tsx";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./TimeEstimateCard.module.css";
 
 const timeSlots = [
   "12:00",
@@ -31,10 +32,10 @@ export default function Content({
   onClose,
 }: EstimateTimeContentProps) {
   const { t } = useTranslation();
-  const isRTL = false; // Default to LTR
   const [selectedDate, setSelectedDate] = useState(initialDate);
   const [selectedTime, setSelectedTime] = useState("12:00");
   const [isAM, setIsAM] = useState(true);
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   useEffect(() => {
     setSelectedDate(initialDate);
@@ -79,7 +80,7 @@ export default function Content({
   };
 
   return (
-    <div style={{ padding: "0 20px" }}>
+    <div style={{ padding: "0 20px", marginTop: 30 }}>
       {/* Day Selection */}
       <div style={{ marginBottom: 30 }}>
         <div
@@ -157,32 +158,14 @@ export default function Content({
           }}
         >
           <Button
-            type={isAM ? "primary" : "default"}
             onClick={() => setIsAM(true)}
-            style={{
+            className={styles.toggleButton + " " + (isAM ? styles.active : "")}
-              height: 32,
-              borderRadius: 888,
-              fontWeight: 600,
-              backgroundColor: isAM ? "rgba(255, 183, 0, 0.12)" : "transparent",
-              color: isAM ? "rgba(204, 147, 0, 1)" : "rgba(95, 108, 123, 1)",
-              border: "none",
-            }}
           >
             AM
           </Button>
           <Button
-            type={!isAM ? "primary" : "default"}
             onClick={() => setIsAM(false)}
-            style={{
+            className={styles.toggleButton + " " + (!isAM ? styles.active : "")}
-              height: 32,
-              borderRadius: 888,
-              fontWeight: 600,
-              backgroundColor: !isAM
-                ? "rgba(255, 183, 0, 0.12)"
-                : "rgba(95, 108, 123, 0.05)",
-              color: !isAM ? "rgba(204, 147, 0, 1)" : "rgba(95, 108, 123, 1)",
-              border: "none",
-            }}
           >
             PM
           </Button>
@@ -200,24 +183,12 @@ export default function Content({
           {timeSlots.map((time) => (
             <Button
               key={time}
-              type={selectedTime === time ? "primary" : "default"}
               onClick={() => handleTimeSelect(time)}
-              style={{
+              className={
-                height: 32,
+                styles.timeButton +
-                width: 70,
+                " " +
-                borderRadius: 888,
+                (selectedTime === time ? styles.active : "")
-                fontWeight: 600,
+              }
-                fontSize: 16,
-                border: "none",
-                backgroundColor:
-                  selectedTime === time
-                    ? "rgba(255, 183, 0, 0.12)"
-                    : "rgba(95, 108, 123, 0.05)",
-                color:
-                  selectedTime === time
-                    ? "rgba(204, 147, 0, 1)"
-                    : "rgba(95, 108, 123, 1)",
-              }}
             >
               {time}
             </Button>

src/pages/cart/components/timeEstimate/Dialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal } from "antd";
+import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 
 import Content from "pages/cart/components/timeEstimate/Content.tsx";
@@ -23,11 +23,7 @@ export function Dialog({
       title={t("cart.selectTimeEstimate")}
       open={isOpen}
       onCancel={onClose}
-      footer={[
+      footer={[]}
-        <Button key="cancel" onClick={onClose}>
-          {t("cart.cancel")}
-        </Button>,
-      ]}
       width={500}
       destroyOnHidden
     >

src/pages/cart/components/timeEstimate/TimeEstimateCard.module.css

@@ -0,0 +1,27 @@
+.timeButton {
+  height: 32px !important;
+  width: 100% !important;
+  border-radius: 888px !important;
+  font-weight: 600 !important;
+  font-size: 16 !important;
+  border: none;
+  background-color: rgba(95, 108, 123, 0.05);
+  color: rgba(95, 108, 123, 1);
+  box-shadow: none;
+}
+
+.toggleButton {
+  height: 32px !important;
+  border-radius: 888px !important;
+  font-weight: 600 !important;
+  font-size: 16 !important;
+  border: none;
+  background-color: rgba(95, 108, 123, 0.05);
+  color: rgba(95, 108, 123, 1);
+  box-shadow: none;
+}
+
+.active {
+  background-color: rgba(255, 183, 0, 0.12) !important;
+  color: rgba(204, 147, 0, 1) !important;
+}

src/pages/checkout/components/BriefMenu.tsx

@@ -11,8 +11,6 @@ import styles from "../../address/address.module.css";
 export default function BriefMenu() {
   const { tables, items } = useAppSelector(selectCart);
   const { t } = useTranslation();
-  const { isRTL } = useAppSelector((state) => state.locale);
-
   const orderType = useMemo(() => localStorage.getItem("orderType"), []);
 
   const menuItems = useMemo(

src/pages/split-bill/page.tsx

@@ -128,7 +128,7 @@ export default function SplitBillPage() {
           backgroundColor: themeName === "light" ? "white" : ProBlack2,
         }}
       >
-        <Link to={`${id}/order`} style={{ width: "100%" }}>
+        <Link to={`/${id}/order`} style={{ width: "100%" }}>
           <Button
             type="primary"
             shape="round"