From f580653ef2865289b4a508f52330ede840c1079e Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 21 Dec 2025 23:00:41 +0300
Subject: [PATCH] menu: enhance styles

---
 src/index.css                                 |  4 ++--
 src/pages/checkout/page.tsx                   |  3 ++-
 .../AddToCartButton/AddToCartButton.tsx       | 19 +++++++++++-------
 .../menu/components/MenuList/ProductCard.tsx  | 20 ++++++++++++-------
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/index.css b/src/index.css
index fe6269c..2dd1e87 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,8 @@
 /* Import Ant Design reset */
 @import "antd/dist/reset.css";
 
-/* Import Nunito Sans from Google Fonts */
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
+/* Import Outfit from Google Fonts */
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
 
 :root {
   --background: #f7f7f7;
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index 4589af5..83c3b8c 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -18,6 +18,7 @@ export default function CheckoutPage() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const { phone, order, orderType } = useAppSelector(selectCart);
+  const { token } = useAppSelector((state) => state.auth);
   return (
     <>
       <Form
@@ -31,7 +32,7 @@ export default function CheckoutPage() {
           <ProHeader>{t("checkout.title")}</ProHeader>
           <Layout.Content className={styles.checkoutContainer}>
             <AddressSummary />
-            <PhoneCard />
+            {!token && <PhoneCard />}
             {orderType === OrderType.ToRoom && (
               <InputCard
                 title={t("address.roomNo")}
diff --git a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
index 5ab5d4e..c7b605a 100644
--- a/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
+++ b/src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
@@ -44,7 +44,9 @@ export function AddToCartButton({ item }: { item: Product }) {
       (!cartItem.extrasgroupnew || cartItem.extrasgroupnew.length === 0),
   );
 
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
       return;
@@ -115,7 +117,9 @@ export function AddToCartButton({ item }: { item: Product }) {
     }
   };
 
-  const handlePlusClick = () => {
+  const handlePlusClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
     if (restaurant && !restaurant.isOpened) {
       message.warning(t("menu.restaurantIsClosed"));
       return;
@@ -163,9 +167,8 @@ export function AddToCartButton({ item }: { item: Product }) {
           position: "absolute",
           bottom: 3,
           [isRTL ? "left" : "right"]: 1,
-          backgroundColor: "var(--secondary-background)",
+          background: "#FAFAFA",
           borderRadius: 888,
-          opacity: 0.8,
         }}
       >
         <Button
@@ -215,7 +218,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             height: 28,
             position: "absolute",
             bottom: 1,
-            [isRTL ? "left" : "right"]: 3,
+            [isRTL ? "left" : "right"]: 2,
             minWidth: 28,
           }}
         />
@@ -236,7 +239,7 @@ export function AddToCartButton({ item }: { item: Product }) {
         size="small"
         icon={
           hasOptions ? (
-            <NextIcon iconColor="#fff" iconSize={16} />
+            <NextIcon iconColor="#302E3E" iconSize={16} />
           ) : (
             <PlusOutlined title="add" />
           )
@@ -244,13 +247,15 @@ export function AddToCartButton({ item }: { item: Product }) {
         onClick={handleClick}
         className={styles.addButton}
         style={{
-          backgroundColor: colors.primary,
+          color: "#302E3E",
           width: 28,
           height: 28,
           position: "absolute",
           bottom: 16,
           [isRTL ? "left" : "right"]: 7,
           minWidth: 28,
+          boxShadow:
+            "0px 1px 2px 0px #8585851A, 0px 3px 3px 0px #85858517, -1px 7px 4px 0px #8585850D, -1px 13px 5px 0px #85858503, -2px 20px 6px 0px #85858500",
         }}
       />
     </div>
diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx
index 3d3b565..412c84f 100644
--- a/src/pages/menu/components/MenuList/ProductCard.tsx
+++ b/src/pages/menu/components/MenuList/ProductCard.tsx
@@ -11,6 +11,7 @@ import { useAppSelector } from "redux/hooks.ts";
 import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
 import { useState } from "react";
 import { AddToCartButton } from "../AddToCartButton/AddToCartButton";
+import { useNavigate, useParams } from "react-router-dom";
 
 type Props = {
   item: Product;
@@ -20,6 +21,8 @@ export default function ProductCard({ item }: Props) {
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const { items } = useAppSelector((state) => state.order);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const navigate = useNavigate();
+  const { subdomain } = useParams();
 
   // Handle dialog close
   const handleDialogClose = () => {
@@ -31,10 +34,9 @@ export default function ProductCard({ item }: Props) {
     localStorage.setItem("productId", item.id.toString());
     if (isDesktop) {
       setIsDialogOpen(true);
+    } else {
+      navigate(`/${subdomain}/product/${item.id}`);
     }
-    //  else {
-    //   navigate(`/${subdomain}/product/${item.id}`);
-    // }
   };
 
   return (
@@ -134,7 +136,7 @@ export default function ProductCard({ item }: Props) {
                     style={{
                       fontSize: "1rem",
                       fontWeight: 700,
-                      color: colors.primary,
+                      color: "#333333",
                       textDecoration: "line-through",
                       marginRight: isRTL ? 0 : 10,
                       marginLeft: isRTL ? 10 : 0,
@@ -145,9 +147,13 @@ export default function ProductCard({ item }: Props) {
                   price={item.price}
                   strong
                   style={{
-                    fontSize: "1rem",
-                    fontWeight: 700,
-                    color: colors.primary,
+                    color: "#333333",
+                    fontFamily: "Outfit",
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "14px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
                   }}
                 />
                 <div