Skip to content

Commit dac5b90

Browse files
oliviertassinarioliviertassinari
committed
fix spacing
1 parent 1233166 commit dac5b90

File tree

8 files changed

+224
-235
lines changed

8 files changed

+224
-235
lines changed

‎docs/data/material/getting-started/templates/sign-in-side/SignInCard.js

-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ export default function SignInCard() {
102102
</Typography>
103103
<Box
104104
component="form"
105-
method="POST"
106105
onSubmit={handleSubmit}
107106
noValidate
108107
sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}

‎docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ export default function SignInCard() {
102102
</Typography>
103103
<Box
104104
component="form"
105-
method="POST"
106105
onSubmit={handleSubmit}
107106
noValidate
108107
sx={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 2 }}

‎docs/data/material/getting-started/templates/sign-in-side/SignInSide.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function SignInSide() {
7070
sx={{
7171
justifyContent: 'center',
7272
gap: { xs: 6, sm: 12 },
73-
p: '40px',
73+
p: { xs: 2, sm: 4 },
7474
m: 'auto',
7575
}}
7676
>

‎docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function SignInSide() {
7070
sx={{
7171
justifyContent: 'center',
7272
gap: { xs: 6, sm: 12 },
73-
p: '40px',
73+
p: { xs: 2, sm: 4 },
7474
m: 'auto',
7575
}}
7676
>

‎docs/data/material/getting-started/templates/sign-in/SignIn.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
3838
}));
3939

4040
const SignInContainer = styled(Stack)(({ theme }) => ({
41-
padding: 20,
42-
marginTop: '10vh',
41+
minHeight: '100%',
42+
padding: theme.spacing(2),
43+
[theme.breakpoints.up('sm')]: {
44+
padding: theme.spacing(4),
45+
},
4346
'&::before': {
4447
content: '""',
4548
display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props) {
126129
</Typography>
127130
<Box
128131
component="form"
129-
method="POST"
130132
onSubmit={handleSubmit}
131133
noValidate
132134
sx={{

‎docs/data/material/getting-started/templates/sign-in/SignIn.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
3838
}));
3939

4040
const SignInContainer = styled(Stack)(({ theme }) => ({
41-
padding: 20,
42-
marginTop: '10vh',
41+
minHeight: '100%',
42+
padding: theme.spacing(2),
43+
[theme.breakpoints.up('sm')]: {
44+
padding: theme.spacing(4),
45+
},
4346
'&::before': {
4447
content: '""',
4548
display: 'block',
@@ -126,7 +129,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
126129
</Typography>
127130
<Box
128131
component="form"
129-
method="POST"
130132
onSubmit={handleSubmit}
131133
noValidate
132134
sx={{

‎docs/data/material/getting-started/templates/sign-up/SignUp.js

+106-112
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
3737
}));
3838

3939
const SignUpContainer = styled(Stack)(({ theme }) => ({
40-
height: '100%',
41-
padding: 4,
40+
minHeight: '100%',
41+
padding: theme.spacing(2),
42+
[theme.breakpoints.up('sm')]: {
43+
padding: theme.spacing(4),
44+
},
4245
backgroundImage:
4346
'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
4447
backgroundRepeat: 'no-repeat',
@@ -145,121 +148,112 @@ export default function SignUp() {
145148
<ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
146149
<CssBaseline enableColorScheme />
147150
<SignUpContainer direction="column" justifyContent="space-between">
148-
<Stack
149-
sx={{
150-
justifyContent: 'center',
151-
height: '100dvh',
152-
p: 2,
153-
}}
154-
>
155-
<Card variant="outlined">
156-
<SitemarkIcon />
157-
<Typography
158-
component="h1"
159-
variant="h4"
160-
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
161-
>
162-
Sign up
163-
</Typography>
164-
<Box
165-
component="form"
166-
method="POST"
167-
onSubmit={handleSubmit}
168-
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
169-
>
170-
<FormControl>
171-
<FormLabel htmlFor="name">Full name</FormLabel>
172-
<TextField
173-
autoComplete="name"
174-
name="name"
175-
required
176-
fullWidth
177-
id="name"
178-
placeholder="Jon Snow"
179-
error={nameError}
180-
helperText={nameErrorMessage}
181-
color={nameError ? 'error' : 'primary'}
182-
/>
183-
</FormControl>
184-
<FormControl>
185-
<FormLabel htmlFor="email">Email</FormLabel>
186-
<TextField
187-
required
188-
fullWidth
189-
id="email"
190-
placeholder="your@email.com"
191-
name="email"
192-
autoComplete="email"
193-
variant="outlined"
194-
error={emailError}
195-
helperText={emailErrorMessage}
196-
color={passwordError ? 'error' : 'primary'}
197-
/>
198-
</FormControl>
199-
<FormControl>
200-
<FormLabel htmlFor="password">Password</FormLabel>
201-
<TextField
202-
required
203-
fullWidth
204-
name="password"
205-
placeholder="••••••"
206-
type="password"
207-
id="password"
208-
autoComplete="new-password"
209-
variant="outlined"
210-
error={passwordError}
211-
helperText={passwordErrorMessage}
212-
color={passwordError ? 'error' : 'primary'}
213-
/>
214-
</FormControl>
215-
<FormControlLabel
216-
control={<Checkbox value="allowExtraEmails" color="primary" />}
217-
label="I want to receive updates via email."
218-
/>
219-
<Button
220-
type="submit"
151+
<Card variant="outlined">
152+
<SitemarkIcon />
153+
<Typography
154+
component="h1"
155+
variant="h4"
156+
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
157+
>
158+
Sign up
159+
</Typography>
160+
<Box
161+
component="form"
162+
onSubmit={handleSubmit}
163+
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
164+
>
165+
<FormControl>
166+
<FormLabel htmlFor="name">Full name</FormLabel>
167+
<TextField
168+
autoComplete="name"
169+
name="name"
170+
required
221171
fullWidth
222-
variant="contained"
223-
onClick={validateInputs}
224-
>
225-
Sign up
226-
</Button>
227-
<Typography sx={{ textAlign: 'center' }}>
228-
Already have an account?{' '}
229-
<span>
230-
<Link
231-
href="/material-ui/getting-started/templates/sign-in/"
232-
variant="body2"
233-
sx={{ alignSelf: 'center' }}
234-
>
235-
Sign in
236-
</Link>
237-
</span>
238-
</Typography>
239-
</Box>
240-
<Divider>
241-
<Typography sx={{ color: 'text.secondary' }}>or</Typography>
242-
</Divider>
243-
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
244-
<Button
172+
id="name"
173+
placeholder="Jon Snow"
174+
error={nameError}
175+
helperText={nameErrorMessage}
176+
color={nameError ? 'error' : 'primary'}
177+
/>
178+
</FormControl>
179+
<FormControl>
180+
<FormLabel htmlFor="email">Email</FormLabel>
181+
<TextField
182+
required
245183
fullWidth
184+
id="email"
185+
placeholder="your@email.com"
186+
name="email"
187+
autoComplete="email"
246188
variant="outlined"
247-
onClick={() => alert('Sign up with Google')}
248-
startIcon={<GoogleIcon />}
249-
>
250-
Sign up with Google
251-
</Button>
252-
<Button
189+
error={emailError}
190+
helperText={emailErrorMessage}
191+
color={passwordError ? 'error' : 'primary'}
192+
/>
193+
</FormControl>
194+
<FormControl>
195+
<FormLabel htmlFor="password">Password</FormLabel>
196+
<TextField
197+
required
253198
fullWidth
199+
name="password"
200+
placeholder="••••••"
201+
type="password"
202+
id="password"
203+
autoComplete="new-password"
254204
variant="outlined"
255-
onClick={() => alert('Sign up with Facebook')}
256-
startIcon={<FacebookIcon />}
257-
>
258-
Sign up with Facebook
259-
</Button>
260-
</Box>
261-
</Card>
262-
</Stack>
205+
error={passwordError}
206+
helperText={passwordErrorMessage}
207+
color={passwordError ? 'error' : 'primary'}
208+
/>
209+
</FormControl>
210+
<FormControlLabel
211+
control={<Checkbox value="allowExtraEmails" color="primary" />}
212+
label="I want to receive updates via email."
213+
/>
214+
<Button
215+
type="submit"
216+
fullWidth
217+
variant="contained"
218+
onClick={validateInputs}
219+
>
220+
Sign up
221+
</Button>
222+
<Typography sx={{ textAlign: 'center' }}>
223+
Already have an account?{' '}
224+
<span>
225+
<Link
226+
href="/material-ui/getting-started/templates/sign-in/"
227+
variant="body2"
228+
sx={{ alignSelf: 'center' }}
229+
>
230+
Sign in
231+
</Link>
232+
</span>
233+
</Typography>
234+
</Box>
235+
<Divider>
236+
<Typography sx={{ color: 'text.secondary' }}>or</Typography>
237+
</Divider>
238+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
239+
<Button
240+
fullWidth
241+
variant="outlined"
242+
onClick={() => alert('Sign up with Google')}
243+
startIcon={<GoogleIcon />}
244+
>
245+
Sign up with Google
246+
</Button>
247+
<Button
248+
fullWidth
249+
variant="outlined"
250+
onClick={() => alert('Sign up with Facebook')}
251+
startIcon={<FacebookIcon />}
252+
>
253+
Sign up with Facebook
254+
</Button>
255+
</Box>
256+
</Card>
263257
</SignUpContainer>
264258
</ThemeProvider>
265259
</TemplateFrame>

0 commit comments

Comments
 (0)