diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css index a3aa3be..d8e1e5d 100644 --- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css +++ b/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 { diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx index 69ac3ad..b6e78ef 100644 --- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx +++ b/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", }} > {isRTL - ? category.name || category.nameEN + ? category.nameAR || category.name : category.nameEN || category.name} diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx index b050172..6e27038 100644 --- a/src/pages/menu/components/MenuList/MenuList.tsx +++ b/src/pages/menu/components/MenuList/MenuList.tsx @@ -67,9 +67,12 @@ export function MenuList({ data, categoryRefs }: MenuListProps) { > diff --git a/src/pages/menu/components/MenuList/ProductCard.tsx b/src/pages/menu/components/MenuList/ProductCard.tsx index 22eb370..67351de 100644 --- a/src/pages/menu/components/MenuList/ProductCard.tsx +++ b/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} {item.description && (