enhnace items styles

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

@@ -300,9 +300,20 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                       display: "inline-block",
                     }}
                   >
-                    {isRTL
-                      ? category.name || category.nameEN
-                      : category.nameEN || category.name}
+                    <span
+                      style={{
+                        display: "inline-block",
+                        borderBottom:
+                          activeCategory === category.id && !isCategoriesSticky
+                            ? `2px solid ${colors.primary}`
+                            : "none",
+                        paddingBottom: activeCategory === category.id ? 8 : 0,
+                      }}
+                    >
+                      {isRTL
+                        ? category.name || category.nameEN
+                        : category.nameEN || category.name}
+                    </span>
                   </ProText>
                 </Space>
               </div>

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

@@ -68,15 +68,14 @@
   overflow: hidden;
 }
 
-.loyaltyButton {
+/* .loyaltyButton {
   position: absolute;
   top: 1px;
   left: 1px;
   z-index: 99;
-  background-color: var(--primary) !important;
   color: white !important;
   border: none !important;
-}
+} */
 
 :global(.ant-app-rtl) .loyaltyButton {
   right: 1px !important;

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

@@ -1,10 +1,9 @@
 import styles from "pages/menu/components/MenuList/ProductCard.module.css";
-import { Card, Button, Badge } from "antd";
+import { Card, Badge } from "antd";
 import ProText from "components/ProText.tsx";
 import ArabicPrice from "components/ArabicPrice";
 import { colors } from "ThemeConstants.ts";
 import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
-import { StarOutlined } from "@ant-design/icons";
 import ImageWithFallback from "components/ImageWithFallback";
 import { Product } from "utils/types/appTypes.ts";
 import useBreakPoint from "hooks/useBreakPoint.ts";
@@ -12,13 +11,13 @@ 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;
 };
 export default function ProductCard({ item }: Props) {
   const { isRTL } = useAppSelector((state) => state.locale);
-  const { themeName } = useAppSelector((state) => state.theme);
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const { items } = useAppSelector((state) => state.order);
   const { subdomain } = useParams();
@@ -86,15 +85,17 @@ export default function ProductCard({ item }: Props) {
                 gap: "0.5rem",
               }}
             >
+              <StarIcon />
               <ProText
                 style={{
                   margin: 0,
                   display: "inline-block",
-                  fontSize: "1rem",
                   fontWeight: 600,
-                  letterSpacing: "-0.01em",
-                  lineHeight: 1.2,
-                  color: themeName === "dark" ? "#fff" : "#000044",
+                  fontStyle: "SemiBold",
+                  fontSize: "16px",
+                  // leadingTrim: "NONE",
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
                 }}
               >
                 {isRTL ? item.name : item.nameOther}
@@ -111,10 +112,13 @@ export default function ProductCard({ item }: Props) {
                     textOverflow: "ellipsis",
                     wordWrap: "break-word",
                     overflowWrap: "break-word",
-                    lineHeight: "1.5rem",
                     maxHeight: "3em",
-                    fontSize: "1rem",
-                    letterSpacing: "0.01em",
+                    fontWeight: 500,
+                    fontStyle: "Medium",
+                    fontSize: "12px",
+                    // leadingTrim: "NONE",
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
                   }}
                 >
                   {item.description}
@@ -157,13 +161,9 @@ export default function ProductCard({ item }: Props) {
               </div>
             </div>
             <div style={{ position: "relative" }}>
-              {item.isHasLoyalty && (
-                <Button
-                  className={styles.loyaltyButton}
-                  icon={<StarOutlined />}
-                  style={{ width: 24, height: 24 }}
-                />
-              )}
+              {/* {item.isHasLoyalty && (
+              <StarIcon  className={styles.loyaltyButton} />
+              )} */}
               <Badge
                 size="default"
                 offset={[-3, 3]}