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

Refactor CategoryList component to improve text styling and hover effects. Removed bold font weight, added text shadow for better visual hierarchy, and implemented a dual-text approach for category names to enhance readability and user experience on mobile devices.

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

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

@@ -361,7 +361,6 @@ class CategoryList extends Component {
onClick={isMobile ? this.handleMobileCategoryClick : undefined} onClick={isMobile ? this.handleMobileCategoryClick : undefined}
sx={{ sx={{
fontSize: "0.75rem", fontSize: "0.75rem",
fontWeight: "bold",
textTransform: "none", textTransform: "none",
whiteSpace: "nowrap", whiteSpace: "nowrap",
opacity: 0.9, opacity: 0.9,
@@ -371,20 +370,64 @@ class CategoryList extends Component {
borderRadius: 1, borderRadius: 1,
justifyContent: isMobile ? "flex-start" : "center", justifyContent: isMobile ? "flex-start" : "center",
transition: "all 0.2s ease", transition: "all 0.2s ease",
textShadow: "0 1px 2px rgba(0,0,0,0.3)",
position: "relative",
...(this.props.activeCategoryId === null && { ...(this.props.activeCategoryId === null && {
bgcolor: "#fff", bgcolor: "#fff",
color: "#2e7d32", textShadow: "none",
opacity: 1, opacity: 1,
}), }),
"&:hover": { "&:hover": {
opacity: 1, opacity: 1,
bgcolor: "#fff", bgcolor: "#fff",
color: "#2e7d32", textShadow: "none",
"& .MuiSvgIcon-root": {
color: "#2e7d32 !important",
},
"& .bold-text": {
color: "#2e7d32 !important",
},
"& .thin-text": {
color: "transparent !important",
},
}, },
}} }}
> >
<HomeIcon sx={{ fontSize: "1rem", mr: isMobile ? 1 : 0 }} /> <HomeIcon sx={{
{isMobile && "Startseite"} fontSize: "1rem",
mr: isMobile ? 1 : 0,
color: this.props.activeCategoryId === null ? "#2e7d32" : "inherit"
}} />
{isMobile && (
<Box sx={{ position: "relative", display: "inline-block" }}>
{/* Bold text (always rendered to set width) */}
<Box
className="bold-text"
sx={{
fontWeight: "bold",
color: this.props.activeCategoryId === null ? "#2e7d32" : "transparent",
position: "relative",
zIndex: 2,
}}
>
Startseite
</Box>
{/* Thin text (positioned on top) */}
<Box
className="thin-text"
sx={{
fontWeight: "400",
color: this.props.activeCategoryId === null ? "transparent" : "inherit",
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
}}
>
Startseite
</Box>
</Box>
)}
</Button> </Button>
)} )}
{this.state.fetchedCategories && categories.length > 0 ? ( {this.state.fetchedCategories && categories.length > 0 ? (
@@ -405,7 +448,6 @@ class CategoryList extends Component {
onClick={isMobile ? this.handleMobileCategoryClick : undefined} onClick={isMobile ? this.handleMobileCategoryClick : undefined}
sx={{ sx={{
fontSize: "0.75rem", fontSize: "0.75rem",
fontWeight: "bold",
textTransform: "none", textTransform: "none",
whiteSpace: "nowrap", whiteSpace: "nowrap",
opacity: 0.9, opacity: 0.9,
@@ -415,19 +457,54 @@ class CategoryList extends Component {
borderRadius: 1, borderRadius: 1,
justifyContent: isMobile ? "flex-start" : "center", justifyContent: isMobile ? "flex-start" : "center",
transition: "all 0.2s ease", transition: "all 0.2s ease",
textShadow: "0 1px 2px rgba(0,0,0,0.3)",
position: "relative",
...(isActiveAtThisLevel && { ...(isActiveAtThisLevel && {
bgcolor: "#fff", bgcolor: "#fff",
color: "#2e7d32", textShadow: "none",
opacity: 1, opacity: 1,
}), }),
"&:hover": { "&:hover": {
opacity: 1, opacity: 1,
bgcolor: "#fff", bgcolor: "#fff",
color: "#2e7d32", textShadow: "none",
"& .bold-text": {
color: "#2e7d32 !important",
},
"& .thin-text": {
color: "transparent !important",
},
}, },
}} }}
>
<Box sx={{ position: "relative", display: "inline-block" }}>
{/* Bold text (always rendered to set width) */}
<Box
className="bold-text"
sx={{
fontWeight: "bold",
color: isActiveAtThisLevel ? "#2e7d32" : "transparent",
position: "relative",
zIndex: 2,
}}
> >
{category.name} {category.name}
</Box>
{/* Thin text (positioned on top) */}
<Box
className="thin-text"
sx={{
fontWeight: "400",
color: isActiveAtThisLevel ? "transparent" : "inherit",
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
}}
>
{category.name}
</Box>
</Box>
</Button> </Button>
); );
})} })}
@@ -526,7 +603,10 @@ class CategoryList extends Component {
} }
}} }}
> >
<Typography variant="subtitle2" color="inherit" sx={{ fontWeight: "bold" }}> <Typography variant="subtitle2" color="inherit" sx={{
fontWeight: "bold",
textShadow: "0 1px 2px rgba(0,0,0,0.3)"
}}>
Kategorien Kategorien
</Typography> </Typography>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>