import * as React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
import { ListItemIcon, ListItemText, Typography } from '@material-ui/core';
import { IconType } from '../icon/icon';
import * as classnames from "classnames";
alignItems: 'center'
},
listItemText: {
- fontWeight: 700
+ fontWeight: 400
},
active: {
color: theme.palette.primary.main,
},
hasMargin: {
- marginLeft: '18px',
- },
+ marginLeft: `${theme.spacing.unit}px`,
+ }
});
export interface ListItemTextIconDataProps {
name: string;
isActive?: boolean;
hasMargin?: boolean;
+ iconSize?: number;
}
type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
export const ListItemTextIcon = withStyles(styles)(
class extends React.Component<ListItemTextIconProps, {}> {
render() {
- const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
+ const { classes, isActive, hasMargin, name, icon: Icon, iconSize } = this.props;
return (
<Typography component='span' className={classes.root}>
<ListItemIcon className={classnames({
[classes.hasMargin]: hasMargin,
[classes.active]: isActive
})}>
- <Icon />
+
+ <Icon style={{ fontSize: `${iconSize}rem` }} />
</ListItemIcon>
<ListItemText primary={
- <Typography variant='body1' className={classnames(classes.listItemText, {
+ <Typography className={classnames(classes.listItemText, {
[classes.active]: isActive
})}>
{name}