@@ -24,7 +24,7 @@ const Checkout = () => {
24
24
< Header title = 'Contacts' location = 'Home' location1 = 'Checkout' />
25
25
< Grid container >
26
26
{ /* 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' } >
28
28
< Box sx = { { ...classes . justifyContentCol , m : '6.5rem 0 2.5rem 0' } } >
29
29
< Typography
30
30
variant = 'h4'
@@ -38,57 +38,50 @@ const Checkout = () => {
38
38
>
39
39
Billing details
40
40
</ Typography >
41
- < form onSubmit = { handleSubmit ( onSubmit ) } >
41
+ < Box component = ' form' onSubmit = { handleSubmit ( onSubmit ) } sx = { { mt : '1rem' } } >
42
42
< 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 >
52
46
< 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 >
76
48
</ 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 >
88
53
</ Grid >
89
54
</ 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 >
90
83
</ Box >
91
- </ form >
84
+ </ Box >
92
85
< Box mt = '2.5rem' mb = '0.5rem' textAlign = { 'center' } >
93
86
< Button type = 'submit' sx = { classes . submitBtn } >
94
87
Submit
@@ -120,7 +113,7 @@ const Checkout = () => {
120
113
</ FlexBetween >
121
114
</ Box >
122
115
< Divider />
123
- < Box sx = { classes . justifyContentCol } >
116
+ < Box sx = { { ... classes . justifyContentCol , m : '2.5rem 0' } } >
124
117
< Box display = 'flex' justifyContent = 'flex-start' alignItems = 'center' gap = { 2 } >
125
118
< Box borderRadius = '50%' height = '14px' width = '14px' sx = { { background : '#000' } } />
126
119
< Typography sx = { classes . title } > Direct Bank Transfer</ Typography >
@@ -135,7 +128,7 @@ const Checkout = () => {
135
128
Your personal data will be used to support your experience throughout this website, to
136
129
manage access to your account, and for other purposes described in our privacy policy.
137
130
</ Typography >
138
- < Box textAlign = { 'center' } >
131
+ < Box textAlign = { 'center' } mt = '1rem' >
139
132
< Button sx = { classes . orderBtn } > Place order</ Button >
140
133
</ Box >
141
134
</ Box >
0 commit comments