go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 11:15:53 +08:00
Code Issues Projects Releases Wiki Activity

Update ListItemLink selected style

Browse Source
This commit is contained in:
Ken Hibino 2020-12-24 16:22:00 -08:00
parent 1a3c3ffbdd
commit 2a19d616bf
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/components/ListItemLink.tsx
View File

@ -10,18 +10,22 @@ import {
LinkProps as RouterLinkProps, LinkProps as RouterLinkProps,
} from "react-router-dom"; } from "react-router-dom";
const useStyles = makeStyles({ const useStyles = makeStyles((theme) => ({
listItem: { listItem: {
borderTopRightRadius: "24px", borderTopRightRadius: "24px",
borderBottomRightRadius: "24px", borderBottomRightRadius: "24px",
}, },
selected: { selected: {
backgroundColor: "rgba(0, 0, 0, 0.07)", backgroundColor: `${theme.palette.primary.main}30`,
}, },
boldText: { selectedText: {
fontWeight: 600, fontWeight: 600,
color: theme.palette.primary.main,
}, },
}); selectedIcon: {
color: theme.palette.primary.main,
},
}));
interface Props { interface Props {
to: string; to: string;
@ -53,11 +57,15 @@ function ListItemLink(props: Props): ReactElement {
component={renderLink} component={renderLink}
className={clsx(classes.listItem, isMatch && classes.selected)} className={clsx(classes.listItem, isMatch && classes.selected)}
> >
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null} {icon && (
<ListItemIcon className={clsx(isMatch && classes.selectedIcon)}>
{icon}
</ListItemIcon>
)}
<ListItemText <ListItemText
primary={primary} primary={primary}
classes={{ classes={{
primary: isMatch ? classes.boldText : undefined, primary: isMatch ? classes.selectedText : undefined,
}} }}
/> />
</ListItem> </ListItem>