AddToCartButton: refactor and adjust desktop style

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

@@ -0,0 +1,58 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+import { addItem } from "features/order/orderSlice.ts";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { colors } from "ThemeConstants.ts";
+import { Product } from "utils/types/appTypes.ts";
+import styles from "./AddToCartButton.module.css";
+
+export function AddToCartButton({ item }: { item: Product }) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const handleQuickAdd = (item: Product) => {
+    dispatch(
+      addItem({
+        item: {
+          id: item.id,
+          name: item.name,
+          price: item.price,
+          image: item.image,
+          description: item.description,
+          variant: "None",
+          extras: [],
+          extrasgroup: [],
+        },
+        quantity: 1,
+      }),
+    );
+  };
+  return (
+    <Button
+      shape="round"
+      title="add"
+      iconPosition="start"
+      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
+      size="small"
+      onClick={(e) => {
+        if (item.isHasVarint) {
+          navigate(`/${id}/menu`);
+        } else {
+          e.preventDefault();
+          e.stopPropagation();
+          handleQuickAdd(item);
+        }
+      }}
+      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
+      style={{ backgroundColor: colors.primary }}
+    >
+      {t("common.add")}
+    </Button>
+  );
+}