From 6668c13e78e8f2b76bed50793d59e26421a4fdf2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 9 Jan 2021 18:01:39 +0100
Subject: [PATCH] Migrate away from makeStyles templates

---
 .../templates/sign-in-side/SignInSide.js      | 44 ++++++++-------
 .../templates/sign-in-side/SignInSide.tsx     | 44 ++++++++-------
 .../templates/sign-in/SignIn.js               | 54 +++++++------------
 .../templates/sign-in/SignIn.tsx              | 54 +++++++------------
 .../templates/sign-up/SignUp.js               | 54 +++++++------------
 .../templates/sign-up/SignUp.tsx              | 54 +++++++------------
 .../templates/sticky-footer/StickyFooter.js   | 51 ++++++++----------
 .../templates/sticky-footer/StickyFooter.tsx  | 51 ++++++++----------
 8 files changed, 168 insertions(+), 238 deletions(-)

diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
index d14e891afd5922..4e6dd1d0acf640 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
@@ -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() {
@@ -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
@@ -103,7 +101,7 @@ export default function SignInSide() {
               type="submit"
               fullWidth
               variant="contained"
-              className={classes.submit}
+              sx={{ mt: 3, mb: 2 }}
             >
               Sign In
             </Button>
@@ -122,8 +120,8 @@ export default function SignInSide() {
             <Box sx={{ mt: 5 }}>
               <Copyright />
             </Box>
-          </form>
-        </div>
+          </Box>
+        </Box>
       </Grid>
     </Grid>
   );
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
index d14e891afd5922..4e6dd1d0acf640 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -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() {
@@ -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
@@ -103,7 +101,7 @@ export default function SignInSide() {
               type="submit"
               fullWidth
               variant="contained"
-              className={classes.submit}
+              sx={{ mt: 3, mb: 2 }}
             >
               Sign In
             </Button>
@@ -122,8 +120,8 @@ export default function SignInSide() {
             <Box sx={{ mt: 5 }}>
               <Copyright />
             </Box>
-          </form>
-        </div>
+          </Box>
+        </Box>
       </Grid>
     </Grid>
   );
diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.js b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
index dd6385dcf4366d..ca9c0146a9d801 100644
--- a/docs/src/pages/getting-started/templates/sign-in/SignIn.js
+++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.js
@@ -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() {
@@ -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
@@ -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>
@@ -104,8 +90,8 @@ export default function SignIn() {
               </Link>
             </Grid>
           </Grid>
-        </form>
-      </div>
+        </Box>
+      </Box>
       <Box sx={{ mt: 8, mb: 4 }}>
         <Copyright />
       </Box>
diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx b/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
index dd6385dcf4366d..ca9c0146a9d801 100644
--- a/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.tsx
@@ -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() {
@@ -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
@@ -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>
@@ -104,8 +90,8 @@ export default function SignIn() {
               </Link>
             </Grid>
           </Grid>
-        </form>
-      </div>
+        </Box>
+      </Box>
       <Box sx={{ mt: 8, mb: 4 }}>
         <Copyright />
       </Box>
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
index 267f1a09b1ee96..a5ba63b27b366a 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js
@@ -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() {
@@ -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(3),
-  },
-  submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
-}));
-
 export default function SignUp() {
-  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 up
         </Typography>
-        <form className={classes.form} noValidate>
+        <Box
+          component="form"
+          noValidate
+          sx={{
+            width: '100%', // Fix IE11 issue.
+            mt: 3,
+          }}
+        >
           <Grid container spacing={2}>
             <Grid item xs={12} sm={6}>
               <TextField
@@ -110,12 +101,7 @@ export default function SignUp() {
               />
             </Grid>
           </Grid>
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            className={classes.submit}
-          >
+          <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
             Sign Up
           </Button>
           <Grid container justifyContent="flex-end">
@@ -125,8 +111,8 @@ export default function SignUp() {
               </Link>
             </Grid>
           </Grid>
-        </form>
-      </div>
+        </Box>
+      </Box>
       <Box sx={{ mt: 5 }}>
         <Copyright />
       </Box>
diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx b/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
index 267f1a09b1ee96..a5ba63b27b366a 100644
--- a/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.tsx
@@ -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() {
@@ -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(3),
-  },
-  submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
-}));
-
 export default function SignUp() {
-  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 up
         </Typography>
-        <form className={classes.form} noValidate>
+        <Box
+          component="form"
+          noValidate
+          sx={{
+            width: '100%', // Fix IE11 issue.
+            mt: 3,
+          }}
+        >
           <Grid container spacing={2}>
             <Grid item xs={12} sm={6}>
               <TextField
@@ -110,12 +101,7 @@ export default function SignUp() {
               />
             </Grid>
           </Grid>
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            className={classes.submit}
-          >
+          <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
             Sign Up
           </Button>
           <Grid container justifyContent="flex-end">
@@ -125,8 +111,8 @@ export default function SignUp() {
               </Link>
             </Grid>
           </Grid>
-        </form>
-      </div>
+        </Box>
+      </Box>
       <Box sx={{ mt: 5 }}>
         <Copyright />
       </Box>
diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
index 5a4bb92d7035c6..b2c495c906355a 100644
--- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
+++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Link from '@material-ui/core/Link';
 
@@ -18,33 +18,17 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '100vh',
-  },
-  main: {
-    marginTop: theme.spacing(8),
-    marginBottom: theme.spacing(2),
-  },
-  footer: {
-    padding: theme.spacing(3, 2),
-    marginTop: 'auto',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[200]
-        : theme.palette.grey[800],
-  },
-}));
-
 export default function StickyFooter() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+      }}
+    >
       <CssBaseline />
-      <Container component="main" className={classes.main} maxWidth="sm">
+      <Container component="main" sx={{ mt: 8, mb: 2 }} maxWidth="sm">
         <Typography variant="h2" component="h1" gutterBottom>
           Sticky footer
         </Typography>
@@ -54,14 +38,25 @@ export default function StickyFooter() {
         </Typography>
         <Typography variant="body1">Sticky footer placeholder.</Typography>
       </Container>
-      <footer className={classes.footer}>
+      <Box
+        component="footer"
+        sx={{
+          py: 3,
+          px: 2,
+          mt: 'auto',
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? theme.palette.grey[200]
+              : theme.palette.grey[800],
+        }}
+      >
         <Container maxWidth="sm">
           <Typography variant="body1">
             My sticky footer can be found here.
           </Typography>
           <Copyright />
         </Container>
-      </footer>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx
index 5a4bb92d7035c6..b2c495c906355a 100644
--- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx
+++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Link from '@material-ui/core/Link';
 
@@ -18,33 +18,17 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '100vh',
-  },
-  main: {
-    marginTop: theme.spacing(8),
-    marginBottom: theme.spacing(2),
-  },
-  footer: {
-    padding: theme.spacing(3, 2),
-    marginTop: 'auto',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[200]
-        : theme.palette.grey[800],
-  },
-}));
-
 export default function StickyFooter() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+      }}
+    >
       <CssBaseline />
-      <Container component="main" className={classes.main} maxWidth="sm">
+      <Container component="main" sx={{ mt: 8, mb: 2 }} maxWidth="sm">
         <Typography variant="h2" component="h1" gutterBottom>
           Sticky footer
         </Typography>
@@ -54,14 +38,25 @@ export default function StickyFooter() {
         </Typography>
         <Typography variant="body1">Sticky footer placeholder.</Typography>
       </Container>
-      <footer className={classes.footer}>
+      <Box
+        component="footer"
+        sx={{
+          py: 3,
+          px: 2,
+          mt: 'auto',
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? theme.palette.grey[200]
+              : theme.palette.grey[800],
+        }}
+      >
         <Container maxWidth="sm">
           <Typography variant="body1">
             My sticky footer can be found here.
           </Typography>
           <Copyright />
         </Container>
-      </footer>
-    </div>
+      </Box>
+    </Box>
   );
 }