uuid: string;
}
-type CssRules = "item" | "label" | "icon" | "frozenIcon";
+type CssRules = "item" | "chevron" | "label" | "buttonLabel" | "icon" | "frozenIcon";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
item: {
borderRadius: '16px',
- backgroundColor: theme.customs.colors.grey300,
+ height: '32px',
+ minWidth: '36px',
+ color: theme.customs.colors.grey700,
'&.parentItem': {
- backgroundColor: `${theme.customs.colors.grey300}99`,
- },
- '&:hover': {
- backgroundColor: theme.customs.colors.grey400,
- },
- '&.parentItem:hover': {
- backgroundColor: `${theme.customs.colors.grey400}99`,
+ color: `${theme.palette.primary.main}`,
},
},
+ chevron: {
+ color: grey["600"],
+ },
label: {
textTransform: "none",
paddingRight: '3px',
paddingLeft: '3px',
+ lineHeight: '1.4',
+ },
+ buttonLabel: {
+ overflow: 'hidden',
+ justifyContent: 'flex-start',
},
icon: {
fontSize: 20,
isLastItem ? null : 'parentItem',
classes.item
)}
+ classes={{
+ label: classes.buttonLabel
+ }}
+ color="inherit"
onClick={() => onClick(item)}
onContextMenu={event => onContextMenu(event, item)}>
<Icon className={classes.icon} />
}
</Button>
</Tooltip>
- {!isLastItem && <ChevronRightIcon color="inherit" className={'parentItem'} />}
+ {!isLastItem && <ChevronRightIcon color="inherit" className={classNames('parentItem', classes.chevron)} />}
</React.Fragment>
);
})