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>