menu: fix footer icons

src/components/FloatingButton/FloatingButton.module.css

@@ -13,7 +13,6 @@
 :global(.darkApp) .scrollToTopButton {
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
-  color: #000000 !important;
 }
 
 :global(.darkApp) .scrollToTopButton:hover {

src/components/Icons/cart/CartIcon.tsx

@@ -6,9 +6,9 @@ interface CartType {
 const CartIcon = ({ className, onClick }: CartType) => {
   return (
     <svg
-      width="17"
+      width="22px"
-      height="16"
+      height="22px"
-      viewBox="0 0 17 16"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}

src/pages/menu/components/CartButton/CartButton.tsx

@@ -1,7 +1,6 @@
 import { Badge, Button } from "antd";
 import CartIcon from "components/Icons/cart/CartIcon";
 import { selectCartItems } from "features/order/orderSlice";
-import useBreakPoint from "hooks/useBreakPoint";
 import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
@@ -11,7 +10,6 @@ import styles from "./CartButton.module.css";
 export function CartButton() {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { themeName } = useAppSelector((state) => state.theme);
-  const { isMobile, isTablet } = useBreakPoint();
   const { id } = useParams();
   const navigate = useNavigate();
   const items = useAppSelector(selectCartItems);
@@ -23,34 +21,33 @@ export function CartButton() {
   const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
 
   return (
-    <>
+    <div
-      <Button
+      style={{
-        type="primary"
+        position: "fixed",
-        shape="circle"
+        bottom: "20px",
-        size={"large"}
+        right: !isRTL ? "auto" : "20px",
-        icon={<CartIcon />}
+        left: !isRTL ? "20px" : "auto",
-        onClick={onCartClick}
+      }}
-        className={`${styles.scrollToTopButton}`}
+    >
-        style={{
+      <Badge count={totalItems} size="default">
-          position: "fixed",
+        <Button
-          bottom: isMobile ? "100px" : isTablet ? "120px" : "20px",
+          type="primary"
-          right: !isRTL ? "auto" : "20px",
+          shape="circle"
-          left: !isRTL ? "20px" : "auto",
+          size={"large"}
-          zIndex: 1000,
+          icon={<CartIcon />}
-          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          onClick={onCartClick}
-          backgroundColor:
+          className={`${styles.scrollToTopButton}`}
-            themeName === "dark" ? colors.primary : colors.primary,
+          style={{
-          borderColor: themeName === "dark" ? colors.primary : colors.primary,
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-          width: isMobile ? 48 : 56,
+            backgroundColor:
-          height: isMobile ? 48 : 56,
+              themeName === "dark" ? colors.primary : colors.primary,
-        }}
+            borderColor: themeName === "dark" ? colors.primary : colors.primary,
-      >
+            width: 56,
-        <Badge
+            height: 56,
-          count={totalItems}
+            gap: "0", // this overrides antd's gap that is preventing centering icon
-          size="default"
+          }}
-          style={{ position: "absolute", top: -35, right: -18 }}
         />
-      </Button>
+      </Badge>
-    </>
+    </div>
   );
 }

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -73,7 +73,7 @@ export function MenuFooter() {
                 <span
                   style={{
                     position: "relative",
-                    top: 2,
+                    top: 4,
                   }}
                 >
                   <CartIcon />