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

Refactor CategoryList component to improve styling and hover effects, enhancing visual consistency and responsiveness for mobile users. Adjusted background colors and removed unnecessary border properties for a cleaner design.

Browse Source
This commit is contained in:
seb
2025-07-04 03:28:56 +02:00
parent 9fc4286b8e
commit d2d5d884d9
1 changed files with 8 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -366,24 +366,18 @@ class CategoryList extends Component {
whiteSpace: "nowrap", whiteSpace: "nowrap",
opacity: 0.9, opacity: 0.9,
mx: isMobile ? 0 : 0.5, mx: isMobile ? 0 : 0.5,
my: 0.25, // Add consistent vertical margin to account for borders my: 0.25,
minWidth: isMobile ? "100%" : "auto", minWidth: isMobile ? "100%" : "auto",
border: "2px solid transparent", // Always have border space borderRadius: 1,
borderRadius: 1, // Always have border radius
justifyContent: isMobile ? "flex-start" : "center", justifyContent: isMobile ? "flex-start" : "center",
transition: "all 0.2s ease",
...(this.props.activeCategoryId === null && { ...(this.props.activeCategoryId === null && {
boxShadow: "0 4px 12px rgba(0,0,0,0.5)", bgcolor: "rgba(255,255,255,0.3)",
transform: "translateY(-2px)",
bgcolor: "rgba(255,255,255,0.25)",
borderColor: "rgba(255,255,255,0.6)", // Change border color instead of adding border
fontWeight: "bold",
opacity: 1, opacity: 1,
}), }),
"&:hover": { "&:hover": {
opacity: 1, opacity: 1,
bgcolor: "rgba(255,255,255,0.15)", bgcolor: "rgba(255,255,255,0.15)",
transform: "translateY(-1px)",
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
}, },
}} }}
> >
@@ -414,24 +408,18 @@ class CategoryList extends Component {
whiteSpace: "nowrap", whiteSpace: "nowrap",
opacity: 0.9, opacity: 0.9,
mx: isMobile ? 0 : 0.5, mx: isMobile ? 0 : 0.5,
my: 0.25, // Add consistent vertical margin to account for borders my: 0.25,
minWidth: isMobile ? "100%" : "auto", minWidth: isMobile ? "100%" : "auto",
border: "2px solid transparent", // Always have border space borderRadius: 1,
borderRadius: 1, // Always have border radius
justifyContent: isMobile ? "flex-start" : "center", justifyContent: isMobile ? "flex-start" : "center",
transition: "all 0.2s ease",
...(isActiveAtThisLevel && { ...(isActiveAtThisLevel && {
boxShadow: "0 4px 12px rgba(0,0,0,0.5)", bgcolor: "rgba(255,255,255,0.3)",
transform: "translateY(-2px)",
bgcolor: "rgba(255,255,255,0.25)",
borderColor: "rgba(255,255,255,0.6)", // Change border color instead of adding border
fontWeight: "bold",
opacity: 1, opacity: 1,
}), }),
"&:hover": { "&:hover": {
opacity: 1, opacity: 1,
bgcolor: "rgba(255,255,255,0.15)", bgcolor: "rgba(255,255,255,0.15)",
transform: "translateY(-1px)",
boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
}, },
}} }}
> >