diff options
Diffstat (limited to 'modern/src/DevicePage.js')
-rw-r--r-- | modern/src/DevicePage.js | 45 |
1 files changed, 39 insertions, 6 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index e882de3..24a06d1 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -1,19 +1,52 @@ import React from 'react'; import MainToobar from './MainToolbar'; -import withStyles from '@material-ui/core/styles/withStyles'; -import withWidth from '@material-ui/core/withWidth'; import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Container from '@material-ui/core/Container'; +import Button from '@material-ui/core/Button'; +import FormControl from '@material-ui/core/FormControl'; -const styles = theme => ({}); +import t from './common/localization'; + +const useStyles = makeStyles(theme => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, +})); const DevicePage = () => { const history = useHistory(); + const classes = useStyles(); return ( - <div> + <> <MainToobar history={history} /> - </div> + <Container maxWidth='xs' className={classes.container}> + <form> + <TextField margin="normal" fullWidth label={t('sharedName')} variant="filled" /> + <TextField margin="normal" fullWidth label={t('deviceIdentifier')} variant="filled" /> + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button type="button" color="primary" variant="outlined"> + {t('sharedCancel')} + </Button> + <Button type="button" color="primary" variant="contained"> + {t('sharedSave')} + </Button> + </div> + </FormControl> + </form> + </Container> + </> ); } -export default withWidth()(withStyles(styles)(DevicePage)); +export default DevicePage; |