WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit dc23cf1

Browse files
[SignInPage] SignInPage UI tweaks (#4451)
1 parent e189558 commit dc23cf1

File tree

6 files changed

+37
-10
lines changed

6 files changed

+37
-10
lines changed

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,16 @@ export default function ThemeSignInPage() {
4141
return (
4242
// preview-start
4343
<AppProvider theme={THEME}>
44-
<SignInPage signIn={signIn} providers={providers} />
44+
<SignInPage
45+
signIn={signIn}
46+
providers={providers}
47+
sx={{
48+
'& form > .MuiStack-root': {
49+
marginTop: '2rem',
50+
rowGap: '0.5rem',
51+
},
52+
}}
53+
/>
4554
</AppProvider>
4655
// preview-end
4756
);

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,16 @@ export default function ThemeSignInPage() {
4141
return (
4242
// preview-start
4343
<AppProvider theme={THEME}>
44-
<SignInPage signIn={signIn} providers={providers} />
44+
<SignInPage
45+
signIn={signIn}
46+
providers={providers}
47+
sx={{
48+
'& form > .MuiStack-root': {
49+
marginTop: '2rem',
50+
rowGap: '0.5rem',
51+
},
52+
}}
53+
/>
4554
</AppProvider>
4655
// preview-end
4756
);

docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,14 @@ const THEME = createTheme({
1212
// ...
1313

1414
<AppProvider theme={THEME}>
15-
<SignInPage signIn={signIn} providers={providers} />
15+
<SignInPage
16+
signIn={signIn}
17+
providers={providers}
18+
sx={{
19+
'& form > .MuiStack-root': {
20+
marginTop: '2rem',
21+
rowGap: '0.5rem',
22+
},
23+
}}
24+
/>
1625
</AppProvider>

docs/data/toolpad/core/components/sign-in-page/customTheme.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -504,9 +504,9 @@ export const inputsCustomizations = {
504504
MuiInputLabel: {
505505
styleOverrides: {
506506
root: {
507-
transform: 'translate(4px, -11px) scale(0.75)',
507+
transform: 'translate(4px, -16px) scale(0.75)',
508508
[`&.${outlinedInputClasses.focused}`]: {
509-
transform: 'translate(4px, -12px) scale(0.75)',
509+
transform: 'translate(4px, -17px) scale(0.75)',
510510
},
511511
},
512512
},

docs/data/toolpad/core/components/sign-in-page/customTheme.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -535,9 +535,9 @@ export const inputsCustomizations: Components<Theme> = {
535535
MuiInputLabel: {
536536
styleOverrides: {
537537
root: {
538-
transform: 'translate(4px, -11px) scale(0.75)',
538+
transform: 'translate(4px, -16px) scale(0.75)',
539539
[`&.${outlinedInputClasses.focused}`]: {
540-
transform: 'translate(4px, -12px) scale(0.75)',
540+
transform: 'translate(4px, -17px) scale(0.75)',
541541
},
542542
},
543543
},

docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The `SignInPage` component is a quick way to generate a ready-to-use authenticat
1818

1919
The `SignInPage` component can be set up with an OAuth provider by passing in a list of providers in the `providers` prop, along with a `signIn` function that accepts the `provider` as a parameter.
2020

21-
{{"demo": "OAuthSignInPage.js", "iframe": true, "height": 500}}
21+
{{"demo": "OAuthSignInPage.js", "iframe": true, "height": 600}}
2222

2323
:::info
2424

@@ -85,7 +85,7 @@ The Credentials provider is not the most secure way to authenticate users. It's
8585

8686
To render a username password form, pass in a provider with `credentials` as the `id` property. The `signIn` function accepts a `formData` parameter in this case.
8787

88-
{{"demo": "CredentialsSignInPage.js", "iframe": true, "height": 500}}
88+
{{"demo": "CredentialsSignInPage.js", "iframe": true, "height": 600}}
8989

9090
### Alerts
9191

@@ -245,7 +245,7 @@ Make sure to pass `email` and `password` as the `name` attribute on custom email
245245

246246
You can use the `slotProps` prop to pass props to the underlying components of each slot:
247247

248-
{{"demo": "SlotPropsSignIn.js", "iframe": true, "height": 540 }}
248+
{{"demo": "SlotPropsSignIn.js", "iframe": true, "height": 600 }}
249249

250250
### 🚧 Layouts
251251

0 commit comments

Comments
 (0)