change font and primary color

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

@@ -117,7 +117,7 @@
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: position, transform, opacity, filter;
   transform-origin: top center;
-  gap: 0.5rem;
+  gap: 14px;
   padding: 0.5rem 1rem 1rem 1rem;
   user-select: none;
 }

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

@@ -190,6 +190,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
               style={{
                 borderRadius: 8,
                 border: "none",
+                backgroundColor: "none",
               }}
               styles={{
                 body: {
@@ -250,20 +251,23 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     ...(xs || md
                       ? {
                           // backgroundColor: "#fff6e0",
-                          borderBottom: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderRight: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
-                          borderLeft: isCategoriesSticky ? "solid 1px var(--primary)" : "none",
+                          borderBottom: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
+                          borderRight: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
+                          borderLeft: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : "none",
                           borderTop: isCategoriesSticky
                             ? "solid 1px var(--primary)"
                             : 0,
-                          borderStartStartRadius: isCategoriesSticky ? 8 : 0,
-                          borderStartEndRadius: isCategoriesSticky ? 8 : 0,
-                          borderEndEndRadius: 8,
-                          borderEndStartRadius: 8,
-                          backgroundColor:
-                            activeCategory === category.id
-                              ? colors.primary
-                              : undefined,
+                          borderStartStartRadius: isCategoriesSticky ? 888 : 0,
+                          borderStartEndRadius: isCategoriesSticky ? 888 : 0,
+                          borderEndEndRadius: isCategoriesSticky ? 888 : 0,
+                          borderEndStartRadius: isCategoriesSticky ? 888 : 0,
+                          backgroundColor: "var(--background)",
                         }
                       : { borderRadius: 8 }),
                     width: 104,
@@ -282,7 +286,9 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                       textAlign: "center",
 
                       color:
-                        activeCategory === category.id ? "#FFF" : undefined,
+                        activeCategory === category.id
+                          ? colors.primary
+                          : undefined,
                       fontWeight:
                         activeCategory === category.id ? "600" : "500",
                       whiteSpace: "nowrap",

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

@@ -54,6 +54,7 @@ export default function ProductCard({ item }: Props) {
             overflow: "hide",
             width: "100%",
             boxShadow: "none",
+            backgroundColor: "var(--secondary-background)",
           }}
           styles={{
             body: {

src/pages/menu/menu.module.css

@@ -53,6 +53,16 @@
   right: -10px !important;
 }
 
+:global(.darkApp) .restaurantHeader path {
+  fill: none !important;
+  stroke: #ffffff !important;
+}
+
+:global(.darkApp) .logoContainerIcon path {
+  fill: var(--background) !important;
+  stroke: var(--background) !important;
+}
+
 .timeIcon {
   position: relative;
   top: 4px;
@@ -121,10 +131,6 @@
   margin-left: 200px;
 }
 
-:global(.darkApp) .restaurantHeader path {
-  fill: none !important;
-  stroke: #ffffff !important;
-}
 
 /* Enhanced Dark theme styles */
 :global(.darkApp) .itemName {
@@ -477,7 +483,7 @@
 }
 
 .restaurantTitle {
-  font-size: 16px;
+  font-size: 24px !important;
   font-weight: bold;
   margin-bottom: 0px !important;
 }

src/pages/menu/page.tsx

@@ -113,7 +113,7 @@ function MenuPage() {
 
           <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
-              <ProTitle level={4} className={styles.restaurantTitle}>
+              <ProTitle className={styles.restaurantTitle}>
                 {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
               </ProTitle>