From 63a8d7b81b8e14fd4f89d6b5475de7ebd8ded8a5 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Fri, 4 Jul 2025 03:52:38 +0200
Subject: [PATCH] Update CategoryList component styles to enhance visual
 hierarchy and consistency. Changed font weight to bold and adjusted
 background and text colors for active and hover states, improving overall
 user experience.

---
 src/components/header/CategoryList.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/header/CategoryList.js b/src/components/header/CategoryList.js
index e4cf298..ffce9bd 100644
--- a/src/components/header/CategoryList.js
+++ b/src/components/header/CategoryList.js
@@ -361,7 +361,7 @@ class CategoryList extends Component {
             onClick={isMobile ? this.handleMobileCategoryClick : undefined}
             sx={{
               fontSize: "0.75rem",
-              fontWeight: "normal",
+              fontWeight: "bold",
               textTransform: "none",
               whiteSpace: "nowrap",
               opacity: 0.9,
@@ -372,12 +372,14 @@ class CategoryList extends Component {
               justifyContent: isMobile ? "flex-start" : "center",
               transition: "all 0.2s ease",
               ...(this.props.activeCategoryId === null && {
-                bgcolor: "rgba(255,255,255,0.3)",
+                bgcolor: "#fff",
+                color: "#2e7d32",
                 opacity: 1,
               }),
               "&:hover": {
                 opacity: 1,
-                bgcolor: "rgba(255,255,255,0.15)",
+                bgcolor: "#fff",
+                color: "#2e7d32",
               },
             }}
           >
@@ -403,7 +405,7 @@ class CategoryList extends Component {
                   onClick={isMobile ? this.handleMobileCategoryClick : undefined}
                   sx={{
                     fontSize: "0.75rem",
-                    fontWeight: "normal",
+                    fontWeight: "bold",
                     textTransform: "none",
                     whiteSpace: "nowrap",
                     opacity: 0.9,
@@ -414,12 +416,14 @@ class CategoryList extends Component {
                     justifyContent: isMobile ? "flex-start" : "center",
                     transition: "all 0.2s ease",
                     ...(isActiveAtThisLevel && {
-                      bgcolor: "rgba(255,255,255,0.3)",
+                      bgcolor: "#fff",
+                      color: "#2e7d32",
                       opacity: 1,
                     }),
                     "&:hover": {
                       opacity: 1,
-                      bgcolor: "rgba(255,255,255,0.15)",
+                      bgcolor: "#fff",
+                      color: "#2e7d32",
                     },
                   }}
                 >