general updates

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

@@ -3,7 +3,6 @@ import { Button, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
-import { colors } from "ThemeConstants.ts";
 import styles from "./AddToCartButton.module.css";
 import { useAppSelector, useAppDispatch } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
@@ -215,7 +214,7 @@ export function AddToCartButton({ item }: { item: Product }) {
           onClick={handlePlusClick}
           className={styles.addButton}
           style={{
-            backgroundColor: colors.primary,
+            backgroundColor: "#FFC600",
             width: 28,
             height: 28,
             position: "absolute",

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

@@ -118,9 +118,9 @@
   will-change: position, transform, opacity, filter;
   transform-origin: top center;
   gap: 14px;
-  padding: 0.5rem 1rem 1rem 1rem;
+  padding: 0.5rem 24px 1rem 24px;
   user-select: none;
-  margin-bottom: 0.5rem;
+  margin-bottom: 16px;
 }
 
 .categoriesContainer::-webkit-scrollbar {

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -291,8 +291,8 @@ export function CategoriesList({ categories }: CategoriesListProps) {
 
                       color:
                         activeCategory === category.id
-                          ? colors.primary
-                          : undefined,
+                          ? "#FFC600"
+                          : "#86858E",
                       fontWeight:
                         activeCategory === category.id ? "600" : "500",
                       whiteSpace: "nowrap",
@@ -309,7 +309,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                         display: "inline-block",
                         borderBottom:
                           activeCategory === category.id && !isCategoriesSticky
-                            ? `2px solid ${colors.primary}`
+                            ? `2px solid #FFC600`
                             : "none",
                         paddingBottom: activeCategory === category.id ? 8 : 0,
                         marginTop: isCategoriesSticky ? 0 : 4,

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

@@ -20,7 +20,6 @@
   margin-bottom: 105px !important;
   display: flex;
   flex-direction: column;
-  gap: 12px;
   padding: 0 1rem;
 }
 
@@ -36,7 +35,7 @@
 .menuItemsGrid {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 12px;
 }
 
 /* Enhanced responsive menu section headers */

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

@@ -54,7 +54,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
   return (
     <>
       <div className={styles.menuSections}>
-        {data?.categories?.map((category) => {
+        {data?.categories?.map((category, index) => {
           const categoryProducts = productsByCategory?.[category.id] || [];
           if (categoryProducts.length === 0) return null;
 
@@ -66,21 +66,24 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                   categoryRefs.current[category.id] = el;
                 }
               }}
-              style={{ marginBottom: "1rem" }}
+              style={{ marginBottom: "2rem" }}
             >
-              <ProTitle
-                style={{
-                  fontWeight: 600,
-                  fontStyle: "SemiBold",
-                  fontSize: "16px",
-                  lineHeight: "140%",
-                  letterSpacing: "0%",
-                  color: themeName === "dark" ? "#fff" : "#070707",
-                }}
-                level={5}
-              >
-                {isRTL ? category.name : category.name}
-              </ProTitle>
+              {index !== 0 && (
+                <ProTitle
+                  style={{
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    fontSize: "16px",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: themeName === "dark" ? "#fff" : "#070707",
+                    marginBottom: 16,
+                  }}
+                  level={5}
+                >
+                  {isRTL ? category.name : category.name}
+                </ProTitle>
+              )}
               <div className={styles.menuItemsGrid}>
                 {categoryProducts.map((item: Product) => (
                   <ProductCard

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

@@ -188,7 +188,7 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
                 count={items
                   .filter((i) => i.id === item.id)
                   .reduce((total, item) => total + item.quantity, 0)}
-                color={colors.primary}
+                color="#FFC600"
                 title={`${items
                   .filter((i) => i.id === item.id)
                   .reduce((total, item) => total + item.quantity, 0)} in cart`}