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%"> {/* <Button Component="a" width="100%">
Confirm Purchase Confirm Purchase
</Button> */} </Button> */}
<Button Component="a" width="100%" variant="ghost"> <Button Component="a" width="100%" variant="ghost" disabled>
Continue Continue
</Button> </Button>
</div> </div>

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

@ -12,7 +12,7 @@
.fieldset .input, .fieldset .input,
.fieldset .select { .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, .fieldset .input:focus,

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

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

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

@ -12,7 +12,7 @@
.fieldset .input, .fieldset .input,
.fieldset .select { .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, .fieldset .input:focus,

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

@ -45,7 +45,7 @@ const PaymentMethodView: FC = () => {
Use a different shipping address Use a different shipping address
</span> </span>
</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="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}> <div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label> <label className={s.label}>First Name</label>
@ -86,7 +86,7 @@ const PaymentMethodView: FC = () => {
</div> </div>
</div> </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"> <Button Component="a" width="100%" variant="ghost">
Continue Continue
</Button> </Button>

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

@ -27,7 +27,11 @@
} }
.ghost { .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, .disabled,