AddToCartButton: refactor and adjust desktop style

src/pages/menu/components/AddToCartButton/AddToCartButton.module.css

@@ -0,0 +1,23 @@
+.plusIcon {
+  position: relative;
+  top: -1px;
+}
+
+.addButton {
+  position: absolute;
+  bottom: -10px;
+  z-index: 1;
+  font-weight: 600;
+  border: 0;
+  color: #FFF;
+  font-size: 1rem; width: 82px;
+  height: 32px;
+}
+
+.addButtonRTL {
+  right: 5%;
+}
+
+.addButtonLTR {
+  left: 5%;
+}

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -1,18 +1,18 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { Button } from "antd";
-import { addItem } from "features/order/orderSlice";
+import { addItem } from "features/order/orderSlice.ts";
-import useBreakPoint from "hooks/useBreakPoint";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import { colors } from "ThemeConstants";
+import { colors } from "ThemeConstants.ts";
-import { Product } from "utils/types/appTypes";
+import { Product } from "utils/types/appTypes.ts";
+import styles from "./AddToCartButton.module.css";
 
-export function AddToCart({ item }: { item: Product }) {
+export function AddToCartButton({ item }: { item: Product }) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { isMobile, isTablet } = useBreakPoint();
+
   const { id } = useParams();
   const navigate = useNavigate();
 
@@ -38,16 +38,8 @@ export function AddToCart({ item }: { item: Product }) {
       shape="round"
       title="add"
       iconPosition="start"
-      icon={
+      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
-        <PlusOutlined
+      size="small"
-          title="add"
-          style={{
-            position: "relative",
-            top: "-1px",
-          }}
-        />
-      }
-      size={isMobile || isTablet ? "small" : "middle"}
       onClick={(e) => {
         if (item.isHasVarint) {
           navigate(`/${id}/menu`);
@@ -57,19 +49,8 @@ export function AddToCart({ item }: { item: Product }) {
           handleQuickAdd(item);
         }
       }}
-      style={{
+      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
-        position: "absolute",
+      style={{ backgroundColor: colors.primary }}
-        bottom: -10,
-        [isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
-        zIndex: 1,
-        width: isMobile ? 82 : 100,
-        height: isMobile ? 32 : 44,
-        fontSize: isMobile ? "1rem" : 18,
-        fontWeight: 600,
-        border: 0,
-        backgroundColor: colors.primary,
-        color: "#FFF",
-      }}
     >
       {t("common.add")}
     </Button>

src/pages/menu/components/MenuList/MenuList.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { colors } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
-import { AddToCart } from "../AddToCart";
+import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
 import styles from "./MenuList.module.css";
 
 interface MenuListProps {
@@ -241,7 +241,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                             height={90}
                           />
 
-                          <AddToCart item={item} />
+                          <AddToCartButton item={item} />
 
                           {items.find((i) => i.id === item.id) && (
                             <Badge