Skip to content

Commit

Permalink
Migrate away from makeStyles templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Jan 9, 2021
1 parent ab0df30 commit 6668c13
Show file tree
Hide file tree
Showing 8 changed files with 168 additions and 238 deletions.
44 changes: 21 additions & 23 deletions docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
View file
Expand Up @@ -40,23 +40,6 @@ const useStyles = makeStyles((theme) => ({
backgroundSize: 'cover',
backgroundPosition: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));

export default function SignInSide() {
Expand All @@ -67,14 +50,29 @@ export default function SignInSide() {
<CssBaseline />
<Grid item xs={false} sm={4} md={7} className={classes.image} />
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<Box
component="form"
noValidate
sx={{
width: '100%', // Fix IE11 issue.
mt: 1,
}}
>
<TextField
margin="normal"
required
Expand Down Expand Up @@ -103,7 +101,7 @@ export default function SignInSide() {
type="submit"
fullWidth
variant="contained"
className={classes.submit}
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
Expand All @@ -122,8 +120,8 @@ export default function SignInSide() {
<Box sx={{ mt: 5 }}>
<Copyright />
</Box>
</form>
</div>
</Box>
</Box>
</Grid>
</Grid>
);
Expand Down
44 changes: 21 additions & 23 deletions docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
View file
Expand Up @@ -40,23 +40,6 @@ const useStyles = makeStyles((theme) => ({
backgroundSize: 'cover',
backgroundPosition: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));

export default function SignInSide() {
Expand All @@ -67,14 +50,29 @@ export default function SignInSide() {
<CssBaseline />
<Grid item xs={false} sm={4} md={7} className={classes.image} />
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<Box
component="form"
noValidate
sx={{
width: '100%', // Fix IE11 issue.
mt: 1,
}}
>
<TextField
margin="normal"
required
Expand Down Expand Up @@ -103,7 +101,7 @@ export default function SignInSide() {
type="submit"
fullWidth
variant="contained"
className={classes.submit}
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
Expand All @@ -122,8 +120,8 @@ export default function SignInSide() {
<Box sx={{ mt: 5 }}>
<Copyright />
</Box>
</form>
</div>
</Box>
</Box>
</Grid>
</Grid>
);
Expand Down
54 changes: 20 additions & 34 deletions docs/src/pages/getting-started/templates/sign-in/SignIn.js
View file
Expand Up @@ -10,7 +10,6 @@ import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

function Copyright() {
Expand All @@ -26,40 +25,32 @@ function Copyright() {
);
}

const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));

export default function SignIn() {
const classes = useStyles();

return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<Box
component="form"
noValidate
sx={{
width: '100%', // Fix IE11 issue.
mt: 1,
}}
>
<TextField
margin="normal"
required
Expand All @@ -84,12 +75,7 @@ export default function SignIn() {
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
className={classes.submit}
>
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
Sign In
</Button>
<Grid container>
Expand All @@ -104,8 +90,8 @@ export default function SignIn() {
</Link>
</Grid>
</Grid>
</form>
</div>
</Box>
</Box>
<Box sx={{ mt: 8, mb: 4 }}>
<Copyright />
</Box>
Expand Down
54 changes: 20 additions & 34 deletions docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
View file
Expand Up @@ -10,7 +10,6 @@ import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

function Copyright() {
Expand All @@ -26,40 +25,32 @@ function Copyright() {
);
}

const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));

export default function SignIn() {
const classes = useStyles();

return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<Box
component="form"
noValidate
sx={{
width: '100%', // Fix IE11 issue.
mt: 1,
}}
>
<TextField
margin="normal"
required
Expand All @@ -84,12 +75,7 @@ export default function SignIn() {
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
className={classes.submit}
>
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
Sign In
</Button>
<Grid container>
Expand All @@ -104,8 +90,8 @@ export default function SignIn() {
</Link>
</Grid>
</Grid>
</form>
</div>
</Box>
</Box>
<Box sx={{ mt: 8, mb: 4 }}>
<Copyright />
</Box>
Expand Down

0 comments on commit 6668c13

Please sign in to comment.