cart & checkout: UI enhacnements

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,5 +1,4 @@
-import { PlusOutlined } from "@ant-design/icons";
-import { Card, Divider, Space, Layout } from "antd";
+import { Card, Divider, Space, Layout, Button } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -9,8 +8,7 @@ import ProTitle from "components/ProTitle.tsx";
 import { selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
-import { Link, useParams } from "react-router-dom";
-import { colors } from "ThemeConstants.ts";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
 import { useAppSelector } from "redux/hooks.ts";
 
@@ -18,13 +16,14 @@ import { FormInstance } from "antd";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
-import CouponCard from "pages/cart/components/CouponCard.tsx";
 import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { Variant } from "utils/types/appTypes";
+import DeleteIcon from "components/Icons/DeleteIcon";
+import PlusIcon from "components/Icons/PlusIcon";
 
 interface CartMobileTabletLayoutProps {
   form: FormInstance;
@@ -39,8 +38,8 @@ export default function CartMobileTabletLayout({
   const { subdomain } = useParams();
   const { pickup_type } = useAppSelector((state) => state.order.restaurant);
   const { isMobile, isTablet } = useBreakPoint();
-
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
+  const navigate = useNavigate();
 
   const getMenuItemImageStyle = () => {
     if (isMobile) {
@@ -82,11 +81,21 @@ export default function CartMobileTabletLayout({
                 >
                   <div
                     style={{
-                      marginTop: 10,
+                      marginTop: 3,
                       boxSizing: "border-box", // Explicit box model definition
                     }}
                   >
-                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
+                    <ProTitle
+                      level={5}
+                      style={{
+                        whiteSpace: "nowrap",
+                        fontWeight: 500,
+                        fontStyle: "Medium",
+                        fontSize: 18,
+                        lineHeight: "140%",
+                        letterSpacing: 0,
+                      }}
+                    >
                       {t("cart.yourOrder")}
                     </ProTitle>
                   </div>
@@ -100,25 +109,29 @@ export default function CartMobileTabletLayout({
                       textAlign: "end",
                     }}
                   >
-                    <div
+                    <Button
+                      shape="circle"
+                      iconPlacement="start"
+                      icon={
+                        <DeleteIcon
+                          className={styles.deleteIcon}
+                          color={"#C0BFC4"}
+                          dimension={16}
+                        />
+                      }
+                      size="small"
+                      className={styles.addButton}
                       style={{
-                        color: colors.primary,
+                        width: 32,
+                        height: 32,
+                        border: "1px solid #DEDEE0",
                       }}
-                    >
-                      <PlusOutlined
-                        style={{
-                          color: colors.primary,
-                          marginLeft: 5,
-                          marginTop: 15,
-                        }}
-                      />
-                      {t("cart.addMore")}
-                    </div>
+                    />
                   </Link>
                 </div>
 
                 {items.length >= 1 && (
-                  <Divider style={{ margin: "0px 0px 10px 0px" }} />
+                  <Divider style={{ margin: "8px 0px 12px 0px" }} />
                 )}
                 {items.map((item, index) => (
                   <div key={index} style={{ position: "relative" }}>
@@ -230,6 +243,16 @@ export default function CartMobileTabletLayout({
                     )}
                   </div>
                 ))}
+                <Button
+                  style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
+                  onClick={() => {
+                    navigate(`/${subdomain}/menu?${
+                      orderType ? `orderType=${orderType}` : ""
+                    }`);
+                  }}
+                >
+                  <PlusIcon dimesion="18" /> {t("cart.addMore")}
+                </Button>
               </Card>
             </div>
           </div>