import * as React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '~/common/custom-theme';
-import { Grid, Typography, Switch } from '@material-ui/core';
+import { Typography, Switch } from '@material-ui/core';
-type CssRules = 'grid' | 'label' | 'value' | 'switch';
+type CssRules = 'container' | 'label' | 'value';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- grid: {
+ container: {
display: 'flex',
- height: '20px',
- paddingTop: '0px!important',
- paddingBottom: '0px!important',
- marginBottom: theme.spacing.unit
+ alignItems: 'center',
+ height: '20px'
},
label: {
width: '86px',
value: {
width: '24px',
paddingLeft: theme.spacing.unit,
- },
- switch: {
- height: '20px',
- '& span:first-child': {
- height: '18px'
- }
}
});
export const SubprocessFilter = withStyles(styles)(
({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
- <Grid item className={classes.grid} md={12} lg={6} >
+ <div className={classes.container} >
<Typography component="span" className={classes.label}>{label}:</Typography>
<Typography component="span" className={classes.value}>{value}</Typography>
- {onToggle && <Switch classes={{ root: classes.switch }}
+ {onToggle && <Switch
checked={checked}
onChange={onToggle}
value={key}
color="primary" />
}
- </Grid>
+ </div>
);
\ No newline at end of file