forked from crowetic/commerce
Stiling
This commit is contained in:
parent
3398d2811a
commit
1ba0967500
@ -10,8 +10,9 @@
|
|||||||
|
|
||||||
.productImage {
|
.productImage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
|
||||||
left: -10px;
|
|
||||||
top: 15px;
|
|
||||||
transform: scale(1.9);
|
transform: scale(1.9);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 30% !important;
|
||||||
|
top: 30% !important;
|
||||||
}
|
}
|
||||||
|
@ -55,18 +55,19 @@ const CartItem = ({
|
|||||||
}, [item.quantity])
|
}, [item.quantity])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-8 py-6">
|
<li className="flex flex-row space-x-8 py-8">
|
||||||
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
<div className="w-16 h-16 bg-violet relative overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
|
className={s.productImage}
|
||||||
src={item.image_url}
|
src={item.image_url}
|
||||||
width={60}
|
width={150}
|
||||||
height={60}
|
height={150}
|
||||||
// The cart item image is already optimized and very small in size
|
// The cart item image is already optimized and very small in size
|
||||||
unoptimized
|
unoptimized
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col justify-between text-base">
|
<div className="flex-1 flex flex-col text-base">
|
||||||
<span className="font-bold mb-3">{item.name}</span>
|
<span className="font-bold mb-5">{item.name}</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<button type="button" onClick={() => increaseQuantity(-1)}>
|
<button type="button" onClick={() => increaseQuantity(-1)}>
|
||||||
<Minus width={18} height={18} />
|
<Minus width={18} height={18} />
|
||||||
|
@ -9,3 +9,7 @@
|
|||||||
.pageHeading {
|
.pageHeading {
|
||||||
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
|
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sectionHeading {
|
||||||
|
@apply pt-1 pb-4 text-base leading-7 text-base tracking-wide uppercase border-b border-accents-2;
|
||||||
|
}
|
||||||
|
@ -13,7 +13,7 @@ interface Props {
|
|||||||
children: React.ReactNode | any
|
children: React.ReactNode | any
|
||||||
}
|
}
|
||||||
|
|
||||||
type Variant = 'heading' | 'body' | 'pageHeading'
|
type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
|
||||||
|
|
||||||
const Text: FunctionComponent<Props> = ({
|
const Text: FunctionComponent<Props> = ({
|
||||||
style,
|
style,
|
||||||
@ -27,6 +27,7 @@ const Text: FunctionComponent<Props> = ({
|
|||||||
body: 'p',
|
body: 'p',
|
||||||
heading: 'h1',
|
heading: 'h1',
|
||||||
pageHeading: 'h1',
|
pageHeading: 'h1',
|
||||||
|
sectionHeading: 'h2',
|
||||||
}
|
}
|
||||||
|
|
||||||
const Component:
|
const Component:
|
||||||
@ -43,6 +44,7 @@ const Text: FunctionComponent<Props> = ({
|
|||||||
[s.body]: variant === 'body',
|
[s.body]: variant === 'body',
|
||||||
[s.heading]: variant === 'heading',
|
[s.heading]: variant === 'heading',
|
||||||
[s.pageHeading]: variant === 'pageHeading',
|
[s.pageHeading]: variant === 'pageHeading',
|
||||||
|
[s.sectionHeading]: variant === 'sectionHeading',
|
||||||
},
|
},
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
@ -72,9 +72,8 @@ export default function Cart({}: InferGetStaticPropsType<
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="px-4 sm:px-6 flex-1">
|
<div className="px-4 sm:px-6 flex-1">
|
||||||
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
|
<Text variant="pageHeading">My Cart</Text>
|
||||||
My Cart
|
<Text variant="sectionHeading">Review your Order</Text>
|
||||||
</h2>
|
|
||||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
|
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-t border-accents-2">
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<CartItem
|
<CartItem
|
||||||
@ -84,7 +83,7 @@ export default function Cart({}: InferGetStaticPropsType<
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<hr className="mb-6" />
|
<hr className="my-6" />
|
||||||
<Text>
|
<Text>
|
||||||
Before you leave, take a look at these items. We picked them just
|
Before you leave, take a look at these items. We picked them just
|
||||||
for you
|
for you
|
||||||
@ -98,7 +97,7 @@ export default function Cart({}: InferGetStaticPropsType<
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="lg:col-span-4">
|
<div className="lg:col-span-4">
|
||||||
<div className="flex-shrink-0 px-4 py-12 sm:px-6">
|
<div className="flex-shrink-0 px-4 py-24 sm:px-6">
|
||||||
<div className="border-t border-accents-2">
|
<div className="border-t border-accents-2">
|
||||||
<ul className="py-3">
|
<ul className="py-3">
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
@ -122,7 +121,7 @@ export default function Cart({}: InferGetStaticPropsType<
|
|||||||
<div className="flex flex-row justify-end">
|
<div className="flex flex-row justify-end">
|
||||||
<div className="w-full lg:w-72">
|
<div className="w-full lg:w-72">
|
||||||
<Button href="/checkout" Component="a" width="100%">
|
<Button href="/checkout" Component="a" width="100%">
|
||||||
Proceed to Checkout
|
Confirm Purchase
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user