product: fix count badge

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

@@ -493,60 +493,6 @@
   fill: #ffffff;
 }
 
-/* Cart badge styles */
-.cartBadge {
-  position: absolute;
-  top: -8px;
-  z-index: 2;
-  color: white;
-  border-radius: 50%;
-  min-width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  border: none;
-}
-
-.cartBadge:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.cartBadgeRTL {
-  left: -16px;
-}
-
-.cartBadgeLTR {
-  right: -8px;
-}
-
-/* Enhanced responsive cart badge */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .cartBadge {
-    min-width: 24px;
-    height: 24px;
-    font-size: 14px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .cartBadge {
-    min-width: 28px;
-    height: 28px;
-    font-size: 16px;
-  }
-}
-
-/* RTL support for cart badge */
-/* [dir="rtl"] .cartBadge {
-  right: auto;
-  left: -8px;
-} */
-
 /* Animation for newly added items */
 @keyframes badgePulse {
   0% {
@@ -560,9 +506,6 @@
   }
 }
 
-.cartBadge.animate {
-  animation: badgePulse 0.6s ease-in-out;
-}
 
 /* Enhanced dark theme animations */
 :global(.darkApp) .menuItem,

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

@@ -230,48 +230,40 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                               style={{ width: 24, height: 24 }}
                             />
                           )}
-
-                          <ImageWithFallback
-                            src={item.image_small || "/default.png"}
-                            fallbackSrc="/default.png"
-                            alt={item.name}
-                            className={`${styles.popularMenuItemImage} ${
-                              isMobile
-                                ? styles.popularMenuItemImageMobile
-                                : isTablet
-                                  ? styles.popularMenuItemImageTablet
-                                  : styles.popularMenuItemImageDesktop
-                            }`}
-                            width={90}
-                            height={90}
-                          />
-
-                          <AddToCartButton />
-
-                          {items.some((i) => i.id === item.id) && (
-                            <Badge
-                              count={
-                                items
-                                  .filter((i) => i.id === item.id)
-                                  .reduce((total, item) => total + item.quantity, 0)
-                              }
-                              className={
-                                styles.cartBadge +
-                                " " +
-                                (isRTL
-                                  ? styles.cartBadgeRTL
-                                  : styles.cartBadgeLTR)
-                              }
-                              style={{
-                                backgroundColor: colors.primary,
-                              }}
-                              title={`${
-                                items
-                                  .filter((i) => i.id === item.id)
-                                  .reduce((total, item) => total + item.quantity, 0)
-                              } in cart`}
+                          <Badge
+                            size="default"
+                            offset={[-3, 3]}
+                            count={items
+                              .filter((i) => i.id === item.id)
+                              .reduce(
+                                (total, item) => total + item.quantity,
+                                0,
+                              )}
+                            color={colors.primary}
+                            title={`${items
+                              .filter((i) => i.id === item.id)
+                              .reduce(
+                                (total, item) => total + item.quantity,
+                                0,
+                              )} in cart`}
+                          >
+                            <ImageWithFallback
+                              src={item.image_small || "/default.png"}
+                              fallbackSrc="/default.png"
+                              alt={item.name}
+                              className={`${styles.popularMenuItemImage} ${
+                                isMobile
+                                  ? styles.popularMenuItemImageMobile
+                                  : isTablet
+                                    ? styles.popularMenuItemImageTablet
+                                    : styles.popularMenuItemImageDesktop
+                              }`}
+                              width={90}
+                              height={90}
                             />
-                          )}
+
+                            <AddToCartButton />
+                          </Badge>
                         </div>
                       </div>
                     </Card>