Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Refine checkout template #40967

Merged
merged 72 commits into from
Mar 8, 2024
Merged
Changes from 1 commit
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
802a209
Redesigned the layout
zanivan Feb 6, 2024
5a4e42a
More refinement
zanivan Feb 6, 2024
45501f4
More polishing
zanivan Feb 7, 2024
d45f44b
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 8, 2024
f936fc2
More polishing
zanivan Feb 8, 2024
de31b79
Tweaks to mobile and responsive
zanivan Feb 9, 2024
82af236
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 13, 2024
b989f93
Add card to payment details
zanivan Feb 13, 2024
03164e3
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 14, 2024
eee9a21
Tweaks to mobile version
zanivan Feb 14, 2024
c4397ca
Fix lint
zanivan Feb 14, 2024
47ab2ce
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 15, 2024
2208ffb
Standardize theme toggler
zanivan Feb 15, 2024
6925275
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 19, 2024
b9e294f
remove material icon
zanivan Feb 19, 2024
2cdeefd
Fix bug with logo on default theme
zanivan Feb 19, 2024
f72693e
Fix typo
zanivan Feb 19, 2024
01ce3c5
Round of polishing after feedback
zanivan Feb 20, 2024
3615c70
Fix eslint
zanivan Feb 20, 2024
083c555
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 21, 2024
1bd68fb
Round of polishing after Sam's feedback
zanivan Feb 21, 2024
c12642d
Run docs:typescript:formatted
zanivan Feb 21, 2024
d8db47b
First round of polishing after Matt's feedback
zanivan Feb 21, 2024
e9d42cc
run docs:typescript:formatted
zanivan Feb 21, 2024
c2ae6a1
Add info section to mobile
zanivan Feb 22, 2024
956bd6c
docs:typescript:formatted
zanivan Feb 22, 2024
ac230c0
Make credit card have the right aspect ratio
zanivan Feb 22, 2024
0a5aeab
Isolate Checkout's theme from LP theme
zanivan Feb 22, 2024
2a008be
Sanitise and format data on the credit card
zanivan Feb 22, 2024
e075d3b
docs:typescript:formatted
zanivan Feb 22, 2024
1863706
Fix typescript
zanivan Feb 22, 2024
8438344
fix lint
zanivan Feb 22, 2024
84410ed
More polishing and fixes
zanivan Feb 23, 2024
0c64d16
Tweaks to dark theme
zanivan Feb 23, 2024
68e2fcc
Fix MD dark theme
zanivan Feb 23, 2024
166d006
Add 'back to' back button
zanivan Feb 26, 2024
13724c5
Switch the background colors
zanivan Feb 26, 2024
0cdf49d
Add box-shadow to MuiOutlinedInput
zanivan Feb 26, 2024
1aa1ee6
Tweaks to placeholder color
zanivan Feb 26, 2024
93f71f1
Fix required props
zanivan Feb 26, 2024
b10e1ab
Remove dotted line
zanivan Feb 26, 2024
598b977
Add icons do buttons
zanivan Feb 26, 2024
40c6bab
Softens buttons' borders
zanivan Feb 26, 2024
1e48248
Make the credit card bigger
zanivan Feb 26, 2024
261f63c
Tweaks to success page
zanivan Feb 26, 2024
1954ff3
Fix responsiveness
zanivan Feb 26, 2024
2e13383
run docs:typescript:formatted
zanivan Feb 26, 2024
472a8f4
Tweaks to button border
zanivan Feb 27, 2024
51ea676
Fix LP theme
zanivan Feb 27, 2024
95f9e91
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 28, 2024
3d7da6d
Danilo's feedback
zanivan Feb 28, 2024
6a03a1f
Remove unused components from theme
zanivan Feb 28, 2024
854aeaa
Make inputs consistent
zanivan Feb 28, 2024
09c6ed2
Add radio group to payments
zanivan Feb 28, 2024
16c520f
Run docs:typescript:formatted
zanivan Feb 29, 2024
31afdcd
Fix lint
zanivan Feb 29, 2024
ee78349
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Feb 29, 2024
ad72bf8
Prettier
zanivan Feb 29, 2024
9a5b975
Round of polishing after Danilo's feedback
zanivan Mar 4, 2024
ffa59ec
Organize imports
zanivan Mar 4, 2024
1400bf0
Fix a11y errors
zanivan Mar 4, 2024
076326f
Run docs:typescript:formatted
zanivan Mar 4, 2024
060617e
Update thumbnail
zanivan Mar 4, 2024
76cd836
More polishing
zanivan Mar 5, 2024
1f70bf0
Run docs:typescript:formatted
zanivan Mar 5, 2024
42a94ec
Run prettier
zanivan Mar 5, 2024
c9f7b86
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Mar 6, 2024
7c70048
Skip regression test for theme file
zanivan Mar 6, 2024
421bc80
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Mar 6, 2024
0d1a233
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Mar 6, 2024
d5c6f9e
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Mar 7, 2024
257acbb
Merge remote-tracking branch 'upstream/master' into template-polishin…
zanivan Mar 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
More refinement
zanivan committed Feb 6, 2024
commit 5a4e42aa29d146514b8243be91100577353b4710
47 changes: 30 additions & 17 deletions docs/data/material/getting-started/templates/checkout/Checkout.tsx
Original file line number Diff line number Diff line change
@@ -16,13 +16,15 @@ import Grid from '@mui/material/Grid';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';

const LPtheme = createTheme(getLPTheme('dark'));
const defaultTheme = createTheme({});

const steps = ['Shipping address', 'Payment details', 'Review your order'];

const logoStyle = {
width: '140px',
height: 'auto',
margin: 'auto',
opacity: 0.3,
};

function getStepContent(step: number) {
@@ -58,8 +60,12 @@ export default function Checkout() {
xs={12}
sm={6}
sx={{
display: 'flex',
width: '100%',
backgroundColor: 'background.paper',
borderRight: '1px solid',
borderColor: 'divider',
alignItems: 'center',
}}
>
<Box
@@ -68,40 +74,43 @@ export default function Checkout() {
flexDirection: 'column',
flexGrow: 1,
maxWidth: 500,
m: '20% auto 40%',
height: 600,
mr: 10,
ml: 'auto',
}}
>
<Button
startIcon={<ArrowBackRoundedIcon />}
component="a"
href="/material-ui/getting-started/templates/landing-page/"
sx={{ alignSelf: 'start' }}
sx={{ alignSelf: 'start', ml: '-8px' }}
>
Back
</Button>
<Info />
<Box sx={{ display: 'flex' }}>
<img
src={
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf7356420e154daf_SitemarkLight.svg'
}
style={logoStyle}
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
alt="logo of sitemark"
zanivan marked this conversation as resolved.
Show resolved Hide resolved
/>
</Box>
</Box>
</Grid>
<Grid item xs={12} sm={6} sx={{ display: 'flex' }}>
<Grid item xs={12} sm={6} sx={{ display: 'flex', alignItems: 'center' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
zanivan marked this conversation as resolved.
Show resolved Hide resolved
maxWidth: 600,
maxHeight: 800,
m: '20% auto 40%',
maxWidth: 500,
height: 600,
mr: 'auto',
ml: 10,
}}
>
<Box sx={{ display: 'flex', width: '100%', mb: 2 }}>
<img
src={
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg'
}
style={logoStyle}
alt="logo of sitemark"
/>
</Box>
<Stepper activeStep={activeStep} sx={{ pb: 4 }}>
{steps.map((label) => (
<Step
@@ -120,11 +129,14 @@ export default function Checkout() {
<Typography variant="h5" gutterBottom>
zanivan marked this conversation as resolved.
Show resolved Hide resolved
Thank you for your order.
zanivan marked this conversation as resolved.
Show resolved Hide resolved
</Typography>
<Typography variant="subtitle1">
<Typography variant="subtitle1" gutterBottom>
Your order number is #2001539. We have emailed your order
confirmation, and will send you an update when your order has
shipped.
</Typography>
<Button variant="contained" sx={{ alignSelf: 'start', mt: 2 }}>
Go to my orders
</Button>
</React.Fragment>
) : (
<React.Fragment>
@@ -135,11 +147,12 @@ export default function Checkout() {
justifyContent: 'flex-end',
alignItems: 'end',
flexGrow: 1,
gap: 1,
}}
>
{activeStep !== 0 && <Button onClick={handleBack}>Back</Button>}
<Button variant="contained" onClick={handleNext}>
{activeStep === steps.length - 1 ? 'Place order' : 'Next step'}
{activeStep === steps.length - 1 ? 'Place order' : 'Next'}
</Button>
</Box>
</React.Fragment>
Original file line number Diff line number Diff line change
@@ -4,13 +4,37 @@ import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Card from '@mui/material/Card';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded';

export default function PaymentForm() {
return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Payment method
</Typography>
<Stack direction="row" spacing={2} sx={{ width: '100%', my: 2 }}>
<Card
component={Button}
startIcon={<CreditCardRoundedIcon />}
fullWidth
sx={{ justifyContent: 'start', pl: 4, py: 4 }}
>
<Typography>Credit card</Typography>
</Card>
<Card
component={Button}
startIcon={<AccountBalanceRoundedIcon />}
fullWidth
sx={{ justifyContent: 'start', pl: 4, py: 4 }}
>
<Typography>Bank account</Typography>
</Card>
</Stack>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<TextField
Original file line number Diff line number Diff line change
@@ -38,11 +38,10 @@ export default function Review() {
</ListItem>
</List>
<Divider />

<Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
spacing={4}
spacing={2}
>
<div>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Original file line number Diff line number Diff line change
@@ -572,7 +572,6 @@ export default function getLPTheme(mode: PaletteMode): ThemeOptions {
color: 'white',
},
'& .MuiInputBase-input': {
boxSizing: 'border-box',
'&::placeholder': {
opacity: 0.7,
},
Loading