update antd & fix rtl styles

package.json

@@ -16,7 +16,7 @@
     "@reduxjs/toolkit": "^2.2.6",
     "@types/google-libphonenumber": "^7.4.30",
     "@types/node": "^20.14.11",
-    "antd": "^5.27.4",
+    "antd": "^6.1.1",
     "dayjs": "^1.11.11",
     "google-libphonenumber": "^3.2.43",
     "i18next": "^23.15.1",

src/components/Icons/BackIcon.tsx

@@ -5,15 +5,16 @@ interface BackIconType {
   className?: string;
   onClick?: () => void;
   iconColor?: string;
+  iconSize?: number;
 }
 
-const BackIcon = ({ className, onClick, iconColor }: BackIconType) => {
+const BackIcon = ({ className, onClick, iconColor, iconSize }: BackIconType) => {
   const { themeName } = useAppSelector((state) => state.theme);
   const color = iconColor || (themeName === "dark" ? "white" : ProGray1);
   return (
     <svg
-      width="16"
-      height="16"
+      width={iconSize || 16}
+      height={iconSize || 16}
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

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

@@ -13,7 +13,7 @@ import ProText from "components/ProText";
 
 export function AddToCartButton({ item }: { item: Product }) {
   const { t } = useTranslation();
-
+  const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -162,7 +162,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           height: 45,
           position: "absolute",
           bottom: -5,
-          right: -4,
+          [isRTL ? "left" : "right"]: -4,
         }}
       >
         <svg
@@ -199,7 +199,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             height: 28,
             position: "absolute",
             bottom: 9,
-            right: 70,
+            [isRTL ? "left" : "right"]: 70,
             minWidth: 28,
           }}
         />
@@ -207,7 +207,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           style={{
             position: "absolute",
             bottom: 17,
-            right: 50,
+            [isRTL ? "left" : "right"]: 50,
             fontSize: 14,
             fontWeight: 700,
             fontStyle: "Bold",
@@ -232,7 +232,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             height: 28,
             position: "absolute",
             bottom: 9,
-            right: 10,
+            [isRTL ? "left" : "right"]: 10,
             minWidth: 28,
           }}
         />
@@ -246,7 +246,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           height: 48,
           position: "absolute",
           bottom: -11,
-          right: -2,
+          [isRTL ? "left" : " right"]: -2,
           backgroundColor: "var(--background)",
           borderRadius: "50%",
         }}
@@ -274,7 +274,7 @@ export function AddToCartButton({ item }: { item: Product }) {
             height: 36,
             position: "absolute",
             bottom: 6,
-            right: 6,
+            [isRTL ? "left" : "right"]: 6,
           }}
         />
       </div>

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

@@ -0,0 +1,11 @@
+/* Badge positioning for RTL */
+:global(.ant-app-rtl) .cartBadge :global(.ant-badge-count) {
+  right: auto !important;
+  left: -2px !important;
+}
+
+:global(.ant-app-ltr) .cartBadge :global(.ant-badge-count) {
+  right: -2px !important;
+  left: auto !important;
+}
+

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

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
+import styles from "./MenuFooter.module.css";
 
 export function MenuFooter() {
   const items = useAppSelector(selectCartItems);
@@ -72,14 +73,14 @@ export function MenuFooter() {
               <Badge
                 count={totalItems}
                 size="default"
-                offset={ isRTL ? [-2, 18] : [2, 18]}
+                offset={isRTL ? [-2, 18] : [2, 18]}
+                className={styles.cartBadge}
                 style={{
                   borderColor: colors.primary,
                   color: "white",
                   fontSize: isMobile ? 10 : 12,
                   width: isMobile ? 10 : 12,
                 }}
-  
               >
                 <span
                   style={{

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

@@ -124,7 +124,7 @@ export default function ProductCard({ item }: Props) {
                 style={{
                   position: "absolute",
                   bottom: 12,
-                  left: 12,
+                  [isRTL ? "right" : "left"]: 12,
                 }}
               >
                 {item.original_price !== item.price && (

src/pages/menu/page.tsx

@@ -32,6 +32,7 @@ import styles from "./menu.module.css";
 import NextIcon from "components/Icons/NextIcon";
 import { OpeningTimesBottomSheet } from "components/CustomBottomSheet/OpeningTimesBottomSheet";
 import { useState } from "react";
+import BackIcon from "components/Icons/BackIcon";
 
 function MenuPage() {
   const { subdomain } = useParams();
@@ -126,10 +127,17 @@ function MenuPage() {
                       : styles.closeButton
                   }
                   icon={
+                    !isRTL ? (
                       <NextIcon
                         iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
                         iconSize={9}
                       />
+                    ) : (
+                      <BackIcon
+                        iconColor={restaurant?.isOpened ? "#278655" : "#DD4143"}
+                        iconSize={9}
+                      />
+                    )
                   }
                   iconPosition="end"
                   onClick={() => setIsOpeningTimesOpen(true)}