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: {