menu: updates

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

@@ -120,6 +120,7 @@
   gap: 14px;
   padding: 0.5rem 1rem 1rem 1rem;
   user-select: none;
+  margin-bottom: 0.5rem;
 }
 
 .categoriesContainer::-webkit-scrollbar {

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

@@ -265,13 +265,16 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                           borderStartEndRadius: isCategoriesSticky ? 888 : 0,
                           borderEndEndRadius: isCategoriesSticky ? 888 : 0,
                           borderEndStartRadius: isCategoriesSticky ? 888 : 0,
-                          backgroundColor: "var(--background)",
+                          backgroundColor:
+                          isCategoriesSticky && activeCategory === category.id
+                              ? "#FFB70014"
+                              : "var(--background)",
                         }
                       : { borderRadius: 8 }),
                     width: 104,
                     height: 30,
                     marginBottom: 1,
-                    border: "none"
+                    border: "none",
                   }}
                 >
                   <ProText
@@ -311,7 +314,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                       }}
                     >
                       {isRTL
-                        ? category.name || category.nameEN
+                        ? category.nameAR || category.name
                         : category.nameEN || category.name}
                     </span>
                   </ProText>

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

@@ -67,9 +67,12 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
             >
               <ProTitle
                 style={{
-                  fontSize: "1.25rem",
-                  fontWeight: "bold",
-                  color: themeName === "dark" ? "#fff" : "#000044",
+                  fontWeight: 600,
+                  fontStyle: "SemiBold",
+                  fontSize: "16px",
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                  color: themeName === "dark" ? "#fff" : "#070707",
                 }}
                 level={5}
               >

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

@@ -11,7 +11,6 @@ import { useAppSelector } from "redux/hooks.ts";
 import { useParams, useNavigate } from "react-router-dom";
 import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
 import { useState } from "react";
-import StarIcon from "components/Icons/StarIcon";
 
 type Props = {
   item: Product;
@@ -96,7 +95,7 @@ export default function ProductCard({ item }: Props) {
                   letterSpacing: "0%",
                 }}
               >
-                {isRTL ? item.name : item.nameOther}
+                {isRTL ? item.nameOther : item.name}
               </ProText>
               {item.description && (
                 <ProText