enable add to cart always but if product has variant redirect user to the details

src/index.css

@@ -25,8 +25,9 @@
   );
 
   /* Typography */
-  --font-roboto: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont,
+  --font-roboto:
-    "Segoe UI", Roboto, sans-serif;
+    "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;

src/pages/menu/components/AddToCart.tsx

@@ -1,18 +1,20 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Button, Grid } from "antd";
+import { Button } from "antd";
 import { addItem } from "features/order/orderSlice";
+import useBreakPoint from "hooks/useBreakPoint";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
 
-const { useBreakpoint } = Grid;
-
 export function AddToCart({ item }: { item: Product }) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { xs, sm } = useBreakpoint();
+  const { isMobile, isTablet } = useBreakPoint();
+  const { id } = useParams();
+  const navigate = useNavigate();
 
   const handleQuickAdd = (item: Product) => {
     dispatch(
@@ -28,7 +30,7 @@ export function AddToCart({ item }: { item: Product }) {
           extrasgroup: [],
         },
         quantity: 1,
-      })
+      }),
     );
   };
   return (
@@ -36,7 +38,6 @@ export function AddToCart({ item }: { item: Product }) {
       shape="round"
       title="add"
       iconPosition="start"
-      disabled={item.isHasVarint}
       icon={
         <PlusOutlined
           title="add"
@@ -46,30 +47,28 @@ export function AddToCart({ item }: { item: Product }) {
           }}
         />
       }
-      size={xs || sm ? "small" : "middle"}
+      size={isMobile || isTablet ? "small" : "middle"}
       onClick={(e) => {
+        if (item.isHasVarint) {
+          navigate(`/${id}/menu`);
+        } else {
           e.preventDefault();
           e.stopPropagation();
           handleQuickAdd(item);
+        }
       }}
       style={{
         position: "absolute",
         bottom: -10,
-        [isRTL ? "right" : "left"]: xs || sm ? "5%" : "15%",
+        [isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
         zIndex: 1,
-        width: xs || sm ? 82 : 100,
+        width: isMobile ? 82 : 100,
-        height: xs || sm ? 32 : 44,
+        height: isMobile ? 32 : 44,
-        fontSize: xs || sm ? "1rem" : 18,
+        fontSize: isMobile ? "1rem" : 18,
         fontWeight: 600,
         border: 0,
-        backgroundColor: item.isHasVarint
+        backgroundColor: colors.primary,
-          ? "rgba(233, 233, 233, 1)"
-          : colors.primary,
         color: "#FFF",
-        // boxShadow:
-        //   theme === "light"
-        //     ? "0 2px 0 rgba(0,0,0,0.02)"
-        //     : "0 2px 0 #6b6b6b",
       }}
     >
       {t("common.add")}

src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx

@@ -129,6 +129,7 @@ const MenuSkeleton = ({
             border: "3px solid var(--background)",
             zIndex: 10,
             overflow: "hidden",
+            padding: 10
           }}
         />
 
@@ -213,6 +214,7 @@ const MenuSkeleton = ({
                       height: "32px",
                       borderRadius: "50%",
                       overflow: "hidden",
+                      padding: 5,
                     }}
                   />
                 ))}
@@ -240,7 +242,7 @@ const MenuSkeleton = ({
               display: "flex",
               gap: 8,
               overflow: "hidden",
-              marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
+              marginBottom: isMobile ? "1rem" : isTablet ? "8px" : "16px",
             }}
           >
             {Array.from({