crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 07:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

More design updates

Browse Source
This commit is contained in:
okbel 2021-06-01 09:42:45 -03:00
parent 36fe8937a7
commit 85d00ca305
6 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -180,7 +180,7 @@ const CheckoutSidebarView: FC = () => {
{/* <Button Component="a" width="100%">
Confirm Purchase
</Button> */}
<Button Component="a" width="100%" variant="ghost">
<Button Component="a" width="100%" variant="ghost" disabled>
Continue
</Button>
</div>

2
components/checkout/PaymentMethodView/PaymentMethodView.module.css
View File

@ -12,7 +12,7 @@
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
@apply p-2 border border-accent-2 w-full text-sm font-normal;
}
.fieldset .input:focus,

8
components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -53,7 +53,7 @@ const PaymentMethodView: FC = () => {
<input className={s.input} />
</div>
</div>
<hr className="border-accent-3 my-6" />
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
@ -92,14 +92,14 @@ const PaymentMethodView: FC = () => {
<option>Hong Kong</option>
</select>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 ">
</div>
</div>
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</div>
</div>
</div>
)
}

2
components/checkout/ShippingView/ShippingView.module.css
View File

@ -12,7 +12,7 @@
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
@apply p-2 border border-accent-2 w-full text-sm font-normal;
}
.fieldset .input:focus,

4
components/checkout/ShippingView/ShippingView.tsx
View File

@ -45,7 +45,7 @@ const PaymentMethodView: FC = () => {
Use a different shipping address
</span>
</div>
<hr className="border-accent-3 my-6" />
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
@ -86,7 +86,7 @@ const PaymentMethodView: FC = () => {
</div>
</div>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 p-6">
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>

6
components/ui/Button/Button.module.css
View File

@ -27,7 +27,11 @@
}
.ghost {
@apply border border-accent-3 bg-accent-0 text-accent-9 text-sm;
@apply border border-accent-2 bg-accent-0 text-accent-9 text-sm;
}
.ghost:hover {
@apply border-accent-9 bg-accent-9 text-accent-0;
}
.disabled,