import { Theme, Box } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; import { makeStyles, withStyles } from '@material-ui/core/styles'; export const useUploaderStyles = makeStyles((theme: Theme) => ({ uploader: { marginBottom: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', backgroundColor: theme.palette.grey[100], border: `1px solid ${theme.palette.grey[400]}`, borderStyle: 'dashed', }, uploaderItems: { padding: '10px', }, })); export const useExampleStyles = makeStyles((theme: Theme) => ({ root: { maxWidth: '400px', }, numbersBox: { border: `1px solid ${theme.palette.grey[200]}`, borderRadius: '3px', padding: '10px', }, title: { fontWeight: 'bold', fontSize: theme.typography.subtitle1.fontSize, }, })); export const StyledAlert = withStyles(() => ({ root: { marginTop: '1.5rem', }, }))(Alert); export const StyledBox = withStyles((theme: Theme) => ({ root: { border: `1px solid ${theme.palette.grey[200]}`, }, }))(Box); export default makeStyles({ maxUploadView: { width: '100%', }, shrunkUloadVoew: { marginLeft: '24px', }, });