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

Styling and icon fixes for cart sidebar

Browse Source
This commit is contained in:
paco
2020-10-08 18:00:05 -06:00
parent ccf6074573
commit f9660b4bc2
9 changed files with 85 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/cart/CartItem/CartItem.module.css
View File

@@ -1,6 +1,6 @@
.quantity {
appearance: textfield;
@apply w-6 border-gray-300 border mx-3 rounded text-center text-sm;
@apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
}
.quantity::-webkit-outer-spin-button,

16
components/cart/CartItem/CartItem.tsx
View File

@@ -1,4 +1,4 @@
import { Trash } from '@components/icon'
import { Trash, Plus, Minus } from '@components/icon'
import { useCommerce } from '@lib/bigcommerce'
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
@@ -57,27 +57,29 @@ const CartItem = ({
}, [item.quantity])
return (
<li className="flex flex-row space-x-6">
<li className="flex flex-row space-x-6 py-6">
<div className="h-12 w-12 bg-violet"></div>
<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col justify-between">
<span>{item.name}</span>
<div className="py-2">
<div className="flex items-center">
<button type="button" onClick={() => increaseQuantity(-1)}>
-
<Minus width={18} height={18} />
</button>
<input
type="number"
max={99}
min={0}
className={styles.quantity}
value={quantity}
onChange={handleQuantity}
onBlur={handleBlur}
/>
<button type="button" onClick={() => increaseQuantity(1)}>
+
<Plus width={18} height={18} />
</button>
</div>
</div>
<div className="flex flex-col space-y-2">
<div className="flex flex-col justify-between space-y-2">
<span>{price}</span>
<button
className="flex justify-end"