Skip to content

Commit 78cf705

Browse files
buzzracharyeah-rejanbuzzracharyeah-rejan
committed
fix: style checkout
1 parent 61fb3c9 commit 78cf705

File tree

1 file changed

+41
-48
lines changed

1 file changed

+41
-48
lines changed

‎src/scenes/Checkout/index.tsx

+41-48
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Checkout = () => {
2424
<Header title='Contacts' location='Home' location1='Checkout' />
2525
<Grid container>
2626
{/* LEFT */}
27-
<Grid item xs={12} md={6} lg={4} display={'flex'} flexDirection={'column'}>
27+
<Grid item xs={12} md={6} lg={5} display={'flex'} flexDirection={'column'}>
2828
<Box sx={{ ...classes.justifyContentCol, m: '6.5rem 0 2.5rem 0' }}>
2929
<Typography
3030
variant='h4'
@@ -38,57 +38,50 @@ const Checkout = () => {
3838
>
3939
Billing details
4040
</Typography>
41-
<form onSubmit={handleSubmit(onSubmit)}>
41+
<Box component='form' onSubmit={handleSubmit(onSubmit)} sx={{ mt: '1rem' }}>
4242
<Box sx={{ ...classes.justifyContent }}>
43-
<Grid
44-
item
45-
xs={12}
46-
md={6}
47-
lg={5}
48-
sx={{ ...classes.justifyContentCol, gap: '0.85rem' }}
49-
>
50-
<Grid container gap={4}>
51-
<Grid item xs={12} md={5}>
43+
<Grid container width='453px' gap='0.91rem'>
44+
<Grid item xs={12} md={5.8}>
45+
<Box>
5246
<FormInputText name='fname' control={control} label='First Name' />
53-
</Grid>
54-
<Grid item xs={12} md={5}>
55-
<FormInputText name='lname' control={control} label='Last Name' />
56-
</Grid>
57-
</Grid>
58-
<Grid item xs={12}>
59-
<FormInputText
60-
name='company'
61-
control={control}
62-
label='Company Name (Optional)'
63-
/>
64-
</Grid>
65-
<Grid item xs={12}>
66-
<FormInputText name='country' control={control} label='Country / Region' />
67-
</Grid>
68-
<Grid item xs={12}>
69-
<FormInputText name='street' control={control} label='Street address' />
70-
</Grid>
71-
<Grid item xs={12}>
72-
<FormInputText name='town' control={control} label='Town / City' />
73-
</Grid>
74-
<Grid item xs={12}>
75-
<FormInputText name='province' control={control} label='Province' />
47+
</Box>
7648
</Grid>
77-
<Grid item xs={12}>
78-
<FormInputText name='zip' control={control} label='ZIP code' />
79-
</Grid>
80-
<Grid item xs={12}>
81-
<FormInputText name='phone' control={control} label='Phone' />
82-
</Grid>
83-
<Grid item xs={12}>
84-
<FormInputText name='email' control={control} label='Email address' />
85-
</Grid>
86-
<Grid item xs={12}>
87-
<FormInputText name='additionalInfo' control={control} label='' />
49+
<Grid item xs={12} md={5.8}>
50+
<Box>
51+
<FormInputText name='lname' control={control} label='Last Name' />
52+
</Box>
8853
</Grid>
8954
</Grid>
55+
56+
<Box width='453px'>
57+
<FormInputText name='company' control={control} label='Company Name (Optional)' />
58+
</Box>
59+
<Box width='453px'>
60+
<FormInputText name='country' control={control} label='Country / Region' />
61+
</Box>
62+
<Box width='453px'>
63+
<FormInputText name='street' control={control} label='Street address' />
64+
</Box>
65+
<Box width='453px'>
66+
<FormInputText name='town' control={control} label='Town / City' />
67+
</Box>
68+
<Box width='453px'>
69+
<FormInputText name='province' control={control} label='Province' />
70+
</Box>
71+
<Box width='453px'>
72+
<FormInputText name='zip' control={control} label='ZIP code' />
73+
</Box>
74+
<Box width='453px'>
75+
<FormInputText name='phone' control={control} label='Phone' />
76+
</Box>
77+
<Box width='453px'>
78+
<FormInputText name='email' control={control} label='Email address' />
79+
</Box>
80+
<Box width='453px'>
81+
<FormInputText name='additionalInfo' control={control} label='' />
82+
</Box>
9083
</Box>
91-
</form>
84+
</Box>
9285
<Box mt='2.5rem' mb='0.5rem' textAlign={'center'}>
9386
<Button type='submit' sx={classes.submitBtn}>
9487
Submit
@@ -120,7 +113,7 @@ const Checkout = () => {
120113
</FlexBetween>
121114
</Box>
122115
<Divider />
123-
<Box sx={classes.justifyContentCol}>
116+
<Box sx={{ ...classes.justifyContentCol, m: '2.5rem 0' }}>
124117
<Box display='flex' justifyContent='flex-start' alignItems='center' gap={2}>
125118
<Box borderRadius='50%' height='14px' width='14px' sx={{ background: '#000' }} />
126119
<Typography sx={classes.title}>Direct Bank Transfer</Typography>
@@ -135,7 +128,7 @@ const Checkout = () => {
135128
Your personal data will be used to support your experience throughout this website, to
136129
manage access to your account, and for other purposes described in our privacy policy.
137130
</Typography>
138-
<Box textAlign={'center'}>
131+
<Box textAlign={'center'} mt='1rem'>
139132
<Button sx={classes.orderBtn}>Place order</Button>
140133
</Box>
141134
</Box>

0 commit comments

Comments
 (0)