From 36e95e2b2a2664f66e1ba0e6ba212ca8405eb1d5 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Tue, 16 Apr 2024 13:17:56 -0300 Subject: [PATCH] [material-ui][docs] Simplify components styling on templates (#41845) --- .../templates/checkout/PaymentForm.js | 128 ++++++++---------- .../templates/checkout/PaymentForm.tsx | 128 ++++++++---------- .../landing-page/components/Features.js | 35 +++-- .../landing-page/components/Features.tsx | 39 ++++-- .../templates/landing-page/components/Hero.js | 53 ++++---- .../landing-page/components/Hero.tsx | 53 ++++---- .../templates/sign-in-side/SignInCard.js | 36 +++-- .../templates/sign-in-side/SignInCard.tsx | 36 +++-- .../templates/sign-in/SignIn.js | 68 +++++----- .../templates/sign-in/SignIn.tsx | 68 +++++----- .../templates/sign-up/SignUp.js | 67 ++++----- .../templates/sign-up/SignUp.tsx | 67 ++++----- 12 files changed, 406 insertions(+), 372 deletions(-) diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/PaymentForm.js index 3c8e573a1e3005..5c067d125c0d57 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.js +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import CardActionArea from '@mui/material/CardActionArea'; import CardContent from '@mui/material/CardContent'; import Checkbox from '@mui/material/Checkbox'; @@ -14,12 +14,63 @@ import RadioGroup from '@mui/material/RadioGroup'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded'; import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded'; import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded'; import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; -import { styled } from '@mui/system'; +const Card = styled(MuiCard)(({ theme, selected }) => ({ + border: '1px solid', + borderColor: theme.palette.divider, + width: '100%', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + [theme.breakpoints.up('md')]: { + flexGrow: 1, + maxWidth: `calc(50% - ${theme.spacing(1)})`, + }, + ...(selected && { + backgroundColor: theme.palette.action.selected, + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + }), +})); + +const PaymentContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + width: '100%', + height: 375, + padding: theme.spacing(3), + borderRadius: '20px', + border: '1px solid ', + borderColor: theme.palette.divider, + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', + [theme.breakpoints.up('xs')]: { + height: 300, + }, + [theme.breakpoints.up('sm')]: { + height: 350, + }, +})); const FormGrid = styled('div')(() => ({ display: 'flex', @@ -68,35 +119,12 @@ export default function PaymentForm() { value={paymentType} onChange={handlePaymentTypeChange} sx={{ - flexDirection: { sm: 'column', md: 'row' }, + display: 'flex', + flexDirection: { xs: 'column', sm: 'row' }, gap: 2, }} > - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'creditCard' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('creditCard')} sx={{ @@ -122,31 +150,7 @@ export default function PaymentForm() { - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'bankTransfer' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('bankTransfer')} sx={{ @@ -182,21 +186,7 @@ export default function PaymentForm() { gap: 2, }} > - + Credit card @@ -269,7 +259,7 @@ export default function PaymentForm() { /> - + } label="Remember credit card details for next time" diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx index d6db3289ae9970..02d4e8d78919ea 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import CardActionArea from '@mui/material/CardActionArea'; import CardContent from '@mui/material/CardContent'; import Checkbox from '@mui/material/Checkbox'; @@ -14,12 +14,63 @@ import RadioGroup from '@mui/material/RadioGroup'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded'; import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded'; import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded'; import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; -import { styled } from '@mui/system'; +const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme, selected }) => ({ + border: '1px solid', + borderColor: theme.palette.divider, + width: '100%', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + [theme.breakpoints.up('md')]: { + flexGrow: 1, + maxWidth: `calc(50% - ${theme.spacing(1)})`, + }, + ...(selected && { + backgroundColor: theme.palette.action.selected, + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + }), +})); + +const PaymentContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + width: '100%', + height: 375, + padding: theme.spacing(3), + borderRadius: '20px', + border: '1px solid ', + borderColor: theme.palette.divider, + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', + [theme.breakpoints.up('xs')]: { + height: 300, + }, + [theme.breakpoints.up('sm')]: { + height: 350, + }, +})); const FormGrid = styled('div')(() => ({ display: 'flex', @@ -70,35 +121,12 @@ export default function PaymentForm() { value={paymentType} onChange={handlePaymentTypeChange} sx={{ - flexDirection: { sm: 'column', md: 'row' }, + display: 'flex', + flexDirection: { xs: 'column', sm: 'row' }, gap: 2, }} > - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'creditCard' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('creditCard')} sx={{ @@ -124,31 +152,7 @@ export default function PaymentForm() { - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'bankTransfer' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('bankTransfer')} sx={{ @@ -184,21 +188,7 @@ export default function PaymentForm() { gap: 2, }} > - + Credit card @@ -271,7 +261,7 @@ export default function PaymentForm() { /> - + } label="Remember credit card details for next time" diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js index 565084d9b210a9..34b8842a6a8539 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.js @@ -2,12 +2,15 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; -import Chip from '@mui/material/Chip'; +import { Chip as MuiChip } from '@mui/material'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; + +import { styled } from '@mui/material/styles'; + import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded'; @@ -40,6 +43,21 @@ const items = [ }, ]; +const Chip = styled(MuiChip)(({ theme, selected }) => ({ + ...(selected && { + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), +})); + export default function Features() { const [selectedItemIndex, setSelectedItemIndex] = React.useState(0); @@ -73,20 +91,7 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={(theme) => ({ - ...(selectedItemIndex === index && { - borderColor: - theme.palette.mode === 'light' - ? 'primary.light' - : 'primary.dark', - background: - 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', - color: 'hsl(0, 0%, 100%)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - }), - })} + selected={selectedItemIndex === index} /> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx index f02afaa5483979..1f198bafe9b841 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx @@ -2,12 +2,15 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; -import Chip from '@mui/material/Chip'; +import { Chip as MuiChip } from '@mui/material'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; + +import { styled } from '@mui/material/styles'; + import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded'; @@ -40,6 +43,25 @@ const items = [ }, ]; +interface ChipProps { + selected?: boolean; +} + +const Chip = styled(MuiChip)(({ theme, selected }) => ({ + ...(selected && { + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), +})); + export default function Features() { const [selectedItemIndex, setSelectedItemIndex] = React.useState(0); @@ -73,20 +95,7 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={(theme) => ({ - ...(selectedItemIndex === index && { - borderColor: - theme.palette.mode === 'light' - ? 'primary.light' - : 'primary.dark', - background: - 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', - color: 'hsl(0, 0%, 100%)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - }), - })} + selected={selectedItemIndex === index} /> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js index a8e9b21b0c2ef9..dadc3e27009461 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js @@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; +import { styled } from '@mui/material/styles'; + +const StyledBox = styled('div')(({ theme }) => ({ + alignSelf: 'center', + width: '100%', + height: 400, + marginTop: theme.spacing(8), + borderRadius: theme.shape.borderRadius, + boxShadow: + theme.palette.mode === 'light' + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', + outline: '1px solid', + backgroundImage: `url(${ + theme.palette.mode === 'light' + ? '/static/images/templates/templates-images/hero-light.png' + : '/static/images/templates/templates-images/hero-dark.png' + })`, + backgroundSize: 'cover', + outlineColor: + theme.palette.mode === 'light' + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', + [theme.breakpoints.up('sm')]: { + marginTop: theme.spacing(10), + height: 700, + }, +})); export default function Hero() { return ( @@ -102,30 +130,7 @@ export default function Hero() { . - ({ - mt: { xs: 8, sm: 10 }, - alignSelf: 'center', - height: { xs: 200, sm: 700 }, - width: '100%', - backgroundImage: - theme.palette.mode === 'light' - ? 'url("/static/images/templates/templates-images/hero-light.png")' - : 'url("/static/images/templates/templates-images/hero-dark.png")', - backgroundSize: 'cover', - borderRadius: '12px', - outline: '1px solid', - outlineColor: - theme.palette.mode === 'light' - ? 'hsla(220, 25%, 80%, 0.5)' - : 'hsla(210, 100%, 80%, 0.1)', - boxShadow: - theme.palette.mode === 'light' - ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' - : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - })} - /> + ); diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx index a8e9b21b0c2ef9..dadc3e27009461 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx @@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; +import { styled } from '@mui/material/styles'; + +const StyledBox = styled('div')(({ theme }) => ({ + alignSelf: 'center', + width: '100%', + height: 400, + marginTop: theme.spacing(8), + borderRadius: theme.shape.borderRadius, + boxShadow: + theme.palette.mode === 'light' + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', + outline: '1px solid', + backgroundImage: `url(${ + theme.palette.mode === 'light' + ? '/static/images/templates/templates-images/hero-light.png' + : '/static/images/templates/templates-images/hero-dark.png' + })`, + backgroundSize: 'cover', + outlineColor: + theme.palette.mode === 'light' + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', + [theme.breakpoints.up('sm')]: { + marginTop: theme.spacing(10), + height: 700, + }, +})); export default function Hero() { return ( @@ -102,30 +130,7 @@ export default function Hero() { . - ({ - mt: { xs: 8, sm: 10 }, - alignSelf: 'center', - height: { xs: 200, sm: 700 }, - width: '100%', - backgroundImage: - theme.palette.mode === 'light' - ? 'url("/static/images/templates/templates-images/hero-light.png")' - : 'url("/static/images/templates/templates-images/hero-dark.png")', - backgroundSize: 'cover', - borderRadius: '12px', - outline: '1px solid', - outlineColor: - theme.palette.mode === 'light' - ? 'hsla(220, 25%, 80%, 0.5)' - : 'hsla(210, 100%, 80%, 0.1)', - boxShadow: - theme.palette.mode === 'light' - ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' - : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - })} - /> + ); 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 index 9c6c23678ee7b9..92d27a719c33fb 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import Checkbox from '@mui/material/Checkbox'; import Divider from '@mui/material/Divider'; import FormLabel from '@mui/material/FormLabel'; @@ -11,9 +11,28 @@ import Link from '@mui/material/Link'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + export default function SignInCard() { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); @@ -66,20 +85,7 @@ export default function SignInCard() { }; return ( - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 2, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + 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 index 8697dcc3e042df..139b35c8ad4ad7 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import Checkbox from '@mui/material/Checkbox'; import Divider from '@mui/material/Divider'; import FormLabel from '@mui/material/FormLabel'; @@ -11,9 +11,28 @@ import Link from '@mui/material/Link'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + export default function SignInCard() { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); @@ -66,20 +85,7 @@ export default function SignInCard() { }; return ( - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 2, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index 8398bfef899d8f..ba53cf3e9ddf2a 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -15,8 +14,8 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; - -import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { Card as MuiCard } from '@mui/material'; +import { ThemeProvider, createTheme, styled } from '@mui/material/styles'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; @@ -68,6 +67,37 @@ ToggleCustomTheme.propTypes = { toggleCustomTheme: PropTypes.func.isRequired, }; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignIn() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -134,20 +164,7 @@ export default function SignIn() { return ( - ({ - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - backgroundRepeat: 'no-repeat', - height: { xs: 'auto', sm: '100dvh' }, - pb: { xs: 12, sm: 0 }, - })} - component="main" - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignIn() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -134,20 +164,7 @@ export default function SignIn() { return ( - ({ - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - backgroundRepeat: 'no-repeat', - height: { xs: 'auto', sm: '100dvh' }, - pb: { xs: 12, sm: 0 }, - })} - component="main" - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignUpContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignUp() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -138,19 +168,7 @@ export default function SignUp() { return ( - ({ - backgroundRepeat: 'no-repeat', - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - pb: { xs: 12, sm: 0 }, - })} - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignUpContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignUp() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -138,19 +168,7 @@ export default function SignUp() { return ( - ({ - backgroundRepeat: 'no-repeat', - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - pb: { xs: 12, sm: 0 }, - })} - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - +