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

finish new UI design and add light/ dark mode support

Browse Source
This commit is contained in:
StephDietz 2023-07-07 09:06:42 -05:00
parent d3c9976463
commit d9f07168fe
4 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/cart/delete-item-button.tsx
View File

@ -35,9 +35,9 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
)} )}
> >
{isPending ? ( {isPending ? (
<LoadingDots className="bg-black dark:bg-white" /> <LoadingDots className="bg-white " />
) : ( ) : (
<CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-black " /> <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
)} )}
</button> </button>
); );

30
components/cart/modal.tsx
View File

@ -112,9 +112,9 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
<li <li
key={i} key={i}
data-testid="cart-item" data-testid="cart-item"
className="flex flex-col w-full border-b border-dark-gray-4" className="flex w-full flex-col border-b border-black/[8%] dark:border-dark-gray-4"
> >
<div className="flex flex-row justify-between w-full py-4"> <div className="relative flex flex-row justify-between w-full py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} /> <DeleteItemButton item={item} />
</div> </div>
@ -123,7 +123,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
onClick={closeCart} onClick={closeCart}
className="z-30 flex flex-row space-x-4" className="z-30 flex flex-row space-x-4"
> >
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]"> <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-black/[8%] bg-black/[5%] dark:border-dark-gray-4 dark:bg-white/[6.6%] dark:hover:bg-white/[8.7%]">
<Image <Image
className="object-cover w-full h-full " className="object-cover w-full h-full "
width={64} width={64}
@ -142,7 +142,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</span> </span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {item.merchandise.title !== DEFAULT_OPTION ? (
<p <p
className="text-sm text-white/[54%]" className="text-sm text-dark-gray-7 dark:text-white/[54%]"
data-testid="cart-product-variant" data-testid="cart-product-variant"
> >
{item.merchandise.title} {item.merchandise.title}
@ -169,31 +169,23 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
); );
})} })}
</ul> </ul>
<div className="pt-2 text-sm text-black border-t border-gray-200 dark:text-white"> <div className="py-4 text-sm text-black/[44%] dark:text-white/[54%]">
<div className="flex items-center justify-between mb-2"> <div className="mb-3 flex items-center justify-between border-b border-black/[8%] pb-1 dark:border-dark-gray-4">
<p>Subtotal</p>
<Price
className="text-right"
amount={cart.cost.subtotalAmount.amount}
currencyCode={cart.cost.subtotalAmount.currencyCode}
/>
</div>
<div className="flex items-center justify-between mb-2">
<p>Taxes</p> <p>Taxes</p>
<Price <Price
className="text-right" className="text-base text-right text-black dark:text-white"
amount={cart.cost.totalTaxAmount.amount} amount={cart.cost.totalTaxAmount.amount}
currencyCode={cart.cost.totalTaxAmount.currencyCode} currencyCode={cart.cost.totalTaxAmount.currencyCode}
/> />
</div> </div>
<div className="flex items-center justify-between pb-2 mb-2 border-b border-gray-200"> <div className="mb-3 flex items-center justify-between border-b border-black/[8%] pb-1 pt-1 dark:border-dark-gray-4">
<p>Shipping</p> <p>Shipping</p>
<p className="text-right">Calculated at checkout</p> <p className="text-right">Calculated at checkout</p>
</div> </div>
<div className="flex items-center justify-between mb-2 font-bold"> <div className="mb-3 flex items-center justify-between border-b border-black/[8%] pb-1 pt-1 dark:border-dark-gray-4">
<p>Total</p> <p>Total</p>
<Price <Price
className="text-right" className="text-base text-right text-black dark:text-white"
amount={cart.cost.totalAmount.amount} amount={cart.cost.totalAmount.amount}
currencyCode={cart.cost.totalAmount.currencyCode} currencyCode={cart.cost.totalAmount.currencyCode}
/> />
@ -201,7 +193,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</div> </div>
<a <a
href={cart.checkoutUrl} href={cart.checkoutUrl}
className="flex items-center justify-center w-full p-3 text-sm font-medium text-white uppercase bg-black opacity-90 hover:opacity-100 dark:bg-white dark:text-black" className="flex items-center justify-center w-full p-3 text-sm font-medium text-white rounded-full bg-vercel-blue opacity-90 hover:opacity-100"
> >
<span>Proceed to Checkout</span> <span>Proceed to Checkout</span>
</a> </a>

2
components/icons/cart.tsx
View File

@ -14,7 +14,7 @@ export default function CartIcon({
className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)}
/> />
{quantity ? ( {quantity ? (
<div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-500 text-[11px] font-medium "> <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-vercel-blue text-[11px] font-medium text-white">
{quantity} {quantity}
</div> </div>
) : null} ) : null}

4
tailwind.config.js
View File

@ -21,8 +21,10 @@ module.exports = {
light: '#FAFAFA', light: '#FAFAFA',
violetDark: '#4c2889', violetDark: '#4c2889',
'dark-gray-4': '#2E2E2E', 'dark-gray-4': '#2E2E2E',
'dark-gray-7': '#8f8f8f',
'base-gray-900': '#666666', 'base-gray-900': '#666666',
'light-gray-4': '#EAEAEA' 'light-gray-4': '#EAEAEA',
'vercel-blue': '#0C4BE6'
}, },
keyframes: { keyframes: {
fadeIn: { fadeIn: {