[docs] Migrate onepirate premium template to emotion part1 (#26671)

mui · Jun 12, 2021 · 8f7b501 · 8f7b501
1 parent 39379db
commit 8f7b501
Show file tree

Hide file tree

Showing 22 changed files with 507 additions and 850 deletions.
diff --git a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
-import { makeStyles } from '@material-ui/styles';
-
+import Box from '@material-ui/core/Box';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
@@ -12,21 +11,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function ForgotPassword() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values) => {
@@ -65,7 +50,7 @@ function ForgotPassword() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Field
                 autoFocus
                 autoComplete="email"
@@ -81,22 +66,22 @@ function ForgotPassword() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 size="large"
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Send reset link'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
       </AppForm>

diff --git a/docs/src/pages/premium-themes/onepirate/ForgotPassword.tsx b/docs/src/pages/premium-themes/onepirate/ForgotPassword.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
-import { makeStyles } from '@material-ui/styles';
-import { Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
@@ -12,21 +11,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles<Theme>((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function ForgotPassword() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values: { [index: string]: string }) => {
@@ -65,7 +50,7 @@ function ForgotPassword() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Field
                 autoFocus
                 autoComplete="email"
@@ -81,22 +66,22 @@ function ForgotPassword() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 size="large"
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Send reset link'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
       </AppForm>

diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
-import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
-
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
@@ -13,21 +12,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function SignIn() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values) => {
@@ -72,7 +57,7 @@ function SignIn() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Field
                 autoComplete="email"
                 autoFocus
@@ -100,22 +85,22 @@ function SignIn() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 size="large"
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Sign In'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
         <Typography align="center">

diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.tsx b/docs/src/pages/premium-themes/onepirate/SignIn.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Field, Form, FormSpy } from 'react-final-form';
-import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
-import { Theme } from '@material-ui/core/styles';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
@@ -13,21 +12,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles<Theme>((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function SignIn() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values: { [index: string]: string }) => {
@@ -72,7 +57,7 @@ function SignIn() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Field
                 autoComplete="email"
                 autoFocus
@@ -100,22 +85,22 @@ function SignIn() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 size="large"
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Sign In'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
         <Typography align="center">

diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
-
 import { Field, Form, FormSpy } from 'react-final-form';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
@@ -14,21 +13,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function SignUp() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values) => {
@@ -68,7 +53,7 @@ function SignUp() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Grid container spacing={2}>
                 <Grid item xs={12} sm={6}>
                   <Field
@@ -118,21 +103,21 @@ function SignUp() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Sign Up'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
       </AppForm>

diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.tsx b/docs/src/pages/premium-themes/onepirate/SignUp.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
-import { Theme } from '@material-ui/core/styles';
 import { Field, Form, FormSpy } from 'react-final-form';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
@@ -14,21 +13,7 @@ import FormButton from './modules/form/FormButton';
 import FormFeedback from './modules/form/FormFeedback';
 import withRoot from './modules/withRoot';
 
-const useStyles = makeStyles<Theme>((theme) => ({
-  form: {
-    marginTop: theme.spacing(6),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(2),
-  },
-  feedback: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 function SignUp() {
-  const classes = useStyles();
   const [sent, setSent] = React.useState(false);
 
   const validate = (values: { [index: string]: string }) => {
@@ -68,7 +53,7 @@ function SignUp() {
           validate={validate}
         >
           {({ handleSubmit: handleSubmit2, submitting }) => (
-            <form onSubmit={handleSubmit2} className={classes.form} noValidate>
+            <Box component="form" onSubmit={handleSubmit2} noValidate sx={{ mt: 6 }}>
               <Grid container spacing={2}>
                 <Grid item xs={12} sm={6}>
                   <Field
@@ -118,21 +103,21 @@ function SignUp() {
               <FormSpy subscription={{ submitError: true }}>
                 {({ submitError }) =>
                   submitError ? (
-                    <FormFeedback className={classes.feedback} error>
+                    <FormFeedback error sx={{ mt: 2 }}>
                       {submitError}
                     </FormFeedback>
                   ) : null
                 }
               </FormSpy>
               <FormButton
-                className={classes.button}
+                sx={{ mt: 3, mb: 2 }}
                 disabled={submitting || sent}
                 color="secondary"
                 fullWidth
               >
                 {submitting || sent ? 'In progress…' : 'Sign Up'}
               </FormButton>
-            </form>
+            </Box>
           )}
         </Form>
       </AppForm>