seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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.

Browse Source
This commit is contained in:
seb
2025-07-04 03:52:38 +02:00
parent d2d5d884d9
commit 63a8d7b81b
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/header/CategoryList.js
View File

@@ -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",
},
}}
>