menu: enhance styles

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>

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