const Dot = ({ classes, size, color, theme, className }) => ( <div className={cn(classes.dotBase, { [className]: Boolean(className), [classes.dotLarge]: size === 'large', [classes.dotSmall]: size === 'small' })} style={{ backgroundColor: color && theme.palette[color] && theme.palette[color].main }} /> )
const CardIcon = ({ ...props }) => { const { classes, className, children, color, ...rest } = props; const cardIconClasses = cn({ [classes.cardIcon]: true, [classes[`${color}CardHeader`]]: color, [className]: className !== undefined }); return ( <div className={cardIconClasses} {...rest}> {children} </div> ); }
const AppNavigationBar = ({ classes, className }) => { const { env, mode, directory, activePage } = useMappedState(mapState); const dispatch = useDispatch(); const setActivePageHandler = page => dispatch( setActivePage({ page, paused: true }) ); return ( <div className={cn(classes.root, { [className]: className !== undefined })} > <NavigationBar mode={mode} directory={directory} env={env} activePage={activePage} setActivePage={setActivePageHandler} /> </div> ); }
const AppLoader = ({ loading, classes, className, children, message, relative, mini }) => loading ? ( <div className={cn(classes.loader, { [classes.relative]: relative, [className]: className })} > <CircularProgress className={classes.progress} color={relative ? 'primary' : 'secondary'} size={mini ? 20 : 30} /> {message && ( <Typography variant="inherit" component="span" color="textSecondary" className={classes.message}> {message} </Typography> )} </div> ) : ( children )
const Card = ({ ...props }) => { const { classes, className, children, plain, profile, chart, ...rest } = props; const cardClasses = cn({ [classes.card]: true, [classes.cardPlain]: plain, [classes.cardProfile]: profile, [classes.cardChart]: chart, [className]: className !== undefined }); return ( <div className={cardClasses} {...rest}> {children} </div> ); }
<IconButton disableRipple className={cn(classes.expand, { [classes.expandOpen]: expanded })}
<Toolbar disableGutters className={cn({ [classes.highlight]: hasNotificationsSelected && hasNotificationsSelected.length
<MuiThemeProvider theme={appTheme}> <div className={cn({ [classes.root]: true, [classes.shiftContent]: true
</div> </Tooltip> <div className={cn(classes.flexContainer, classes.padTop)}> <Typography variant="subtitle1" component="div" color="textSecondary"> {mode === 'local'
<Table aria-labelledby="notifications-list" className={cn(classes.table, { [classes.hasFilterBlur]: loading })}
const CardHeader = ({ ...props }) => { const { classes, className, children, color, plain, stats, icon, ...rest } = props; const cardHeaderClasses = cn({ [classes.cardHeader]: true, [classes[`${color}CardHeader`]]: color, [classes.cardHeaderPlain]: plain, [classes.cardHeaderStats]: stats, [classes.cardHeaderIcon]: icon, [className]: className !== undefined }); return ( <div className={cardHeaderClasses} {...rest}> {children} </div> ); }
className={cn(classes.root, { [className]: className !== undefined })}
{title && <Divider />} <div className={cn(classes.widgetBody, { [classes.noPadding]: noBodyPadding, [bodyClass]: bodyClass
color="textSecondary" variant="subtitle1" className={cn(classes.noData, classes.withPadding)}