fix spacing

mui · Sep 21, 2024 · dac5b90 · dac5b90
1 parent 1233166
commit dac5b90
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 235 deletions.
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -102,7 +102,6 @@ export default function SignInCard() {
  </Typography>
  <Box
  component="form"
- method="POST"
  onSubmit={handleSubmit}
  noValidate
  sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -102,7 +102,6 @@ export default function SignInCard() {
  </Typography>
  <Box
  component="form"
- method="POST"
  onSubmit={handleSubmit}
  noValidate
  sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -70,7 +70,7 @@ export default function SignInSide() {
  sx={{
  justifyContent: 'center',
  gap: { xs: 6, sm: 12 },
- p: '40px',
+ p: { xs: 2, sm: 4 },
  m: 'auto',
  }}
  >

diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -70,7 +70,7 @@ export default function SignInSide() {
  sx={{
  justifyContent: 'center',
  gap: { xs: 6, sm: 12 },
- p: '40px',
+ p: { xs: 2, sm: 4 },
  m: 'auto',
  }}
  >

diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
- padding: 20,
- marginTop: '10vh',
+ minHeight: '100%',
+ padding: theme.spacing(2),
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ },
  '&::before': {
  content: '""',
  display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props) {
  </Typography>
  <Box
  component="form"
- method="POST"
  onSubmit={handleSubmit}
  noValidate
  sx={{

diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
- padding: 20,
- marginTop: '10vh',
+ minHeight: '100%',
+ padding: theme.spacing(2),
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ },
  '&::before': {
  content: '""',
  display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
  </Typography>
  <Box
  component="form"
- method="POST"
  onSubmit={handleSubmit}
  noValidate
  sx={{

diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -37,8 +37,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
- height: '100%',
- padding: 4,
+ minHeight: '100%',
+ padding: theme.spacing(2),
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ },
  backgroundImage:
  'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
  backgroundRepeat: 'no-repeat',
@@ -145,121 +148,112 @@ export default function SignUp() {
  <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
  <CssBaseline enableColorScheme />
  <SignUpContainer direction="column" justifyContent="space-between">
- <Stack
- sx={{
- justifyContent: 'center',
- height: '100dvh',
- p: 2,
- }}
- >
- <Card variant="outlined">
- <SitemarkIcon />
- <Typography
- component="h1"
- variant="h4"
- sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
- >
- Sign up
- </Typography>
- <Box
- component="form"
- method="POST"
- onSubmit={handleSubmit}
- sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
- >
- <FormControl>
- <FormLabel htmlFor="name">Full name</FormLabel>
- <TextField
- autoComplete="name"
- name="name"
- required
- fullWidth
- id="name"
- placeholder="Jon Snow"
- error={nameError}
- helperText={nameErrorMessage}
- color={nameError ? 'error' : 'primary'}
- />
- </FormControl>
- <FormControl>
- <FormLabel htmlFor="email">Email</FormLabel>
- <TextField
- required
- fullWidth
- id="email"
- placeholder="your@email.com"
- name="email"
- autoComplete="email"
- variant="outlined"
- error={emailError}
- helperText={emailErrorMessage}
- color={passwordError ? 'error' : 'primary'}
- />
- </FormControl>
- <FormControl>
- <FormLabel htmlFor="password">Password</FormLabel>
- <TextField
- required
- fullWidth
- name="password"
- placeholder="••••••"
- type="password"
- id="password"
- autoComplete="new-password"
- variant="outlined"
- error={passwordError}
- helperText={passwordErrorMessage}
- color={passwordError ? 'error' : 'primary'}
- />
- </FormControl>
- <FormControlLabel
- control={<Checkbox value="allowExtraEmails" color="primary" />}
- label="I want to receive updates via email."
- />
- <Button
- type="submit"
+ <Card variant="outlined">
+ <SitemarkIcon />
+ <Typography
+ component="h1"
+ variant="h4"
+ sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+ >
+ Sign up
+ </Typography>
+ <Box
+ component="form"
+ onSubmit={handleSubmit}
+ sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+ >
+ <FormControl>
+ <FormLabel htmlFor="name">Full name</FormLabel>
+ <TextField
+ autoComplete="name"
+ name="name"
+ required
  fullWidth
- variant="contained"
- onClick={validateInputs}
- >
- Sign up
- </Button>
- <Typography sx={{ textAlign: 'center' }}>
- Already have an account?{' '}
- <span>
- <Link
- href="/material-ui/getting-started/templates/sign-in/"
- variant="body2"
- sx={{ alignSelf: 'center' }}
- >
- Sign in
- </Link>
- </span>
- </Typography>
- </Box>
- <Divider>
- <Typography sx={{ color: 'text.secondary' }}>or</Typography>
- </Divider>
- <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
- <Button
+ id="name"
+ placeholder="Jon Snow"
+ error={nameError}
+ helperText={nameErrorMessage}
+ color={nameError ? 'error' : 'primary'}
+ />
+ </FormControl>
+ <FormControl>
+ <FormLabel htmlFor="email">Email</FormLabel>
+ <TextField
+ required
  fullWidth
+ id="email"
+ placeholder="your@email.com"
+ name="email"
+ autoComplete="email"
  variant="outlined"
- onClick={() => alert('Sign up with Google')}
- startIcon={<GoogleIcon />}
- >
- Sign up with Google
- </Button>
- <Button
+ error={emailError}
+ helperText={emailErrorMessage}
+ color={passwordError ? 'error' : 'primary'}
+ />
+ </FormControl>
+ <FormControl>
+ <FormLabel htmlFor="password">Password</FormLabel>
+ <TextField
+ required
  fullWidth
+ name="password"
+ placeholder="••••••"
+ type="password"
+ id="password"
+ autoComplete="new-password"
  variant="outlined"
- onClick={() => alert('Sign up with Facebook')}
- startIcon={<FacebookIcon />}
- >
- Sign up with Facebook
- </Button>
- </Box>
- </Card>
- </Stack>
+ error={passwordError}
+ helperText={passwordErrorMessage}
+ color={passwordError ? 'error' : 'primary'}
+ />
+ </FormControl>
+ <FormControlLabel
+ control={<Checkbox value="allowExtraEmails" color="primary" />}
+ label="I want to receive updates via email."
+ />
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ onClick={validateInputs}
+ >
+ Sign up
+ </Button>
+ <Typography sx={{ textAlign: 'center' }}>
+ Already have an account?{' '}
+ <span>
+ <Link
+ href="/material-ui/getting-started/templates/sign-in/"
+ variant="body2"
+ sx={{ alignSelf: 'center' }}
+ >
+ Sign in
+ </Link>
+ </span>
+ </Typography>
+ </Box>
+ <Divider>
+ <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+ </Divider>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+ <Button
+ fullWidth
+ variant="outlined"
+ onClick={() => alert('Sign up with Google')}
+ startIcon={<GoogleIcon />}
+ >
+ Sign up with Google
+ </Button>
+ <Button
+ fullWidth
+ variant="outlined"
+ onClick={() => alert('Sign up with Facebook')}
+ startIcon={<FacebookIcon />}
+ >
+ Sign up with Facebook
+ </Button>
+ </Box>
+ </Card>
  </SignUpContainer>
  </ThemeProvider>
  </TemplateFrame>