crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-21 17:06:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

swap out neutral with gray

Browse Source
This commit is contained in:
StephDietz 2023-07-10 14:31:44 -05:00
parent 16f2f019ea
commit 7413cf0420
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
}} }}
disabled={isPending} disabled={isPending}
className={clsx( className={clsx(
'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200', 'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-gray-500 transition-all duration-200',
{ {
'cursor-not-allowed px-0': isPending 'cursor-not-allowed px-0': isPending
} }

6
components/cart/edit-item-quantity-button.tsx
View File

@ -42,7 +42,7 @@ export default function EditItemQuantityButton({
}} }}
disabled={isPending} disabled={isPending}
className={clsx( className={clsx(
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80', 'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-gray-800 hover:opacity-80',
{ {
'cursor-not-allowed': isPending, 'cursor-not-allowed': isPending,
'ml-auto': type === 'minus' 'ml-auto': type === 'minus'
@ -52,9 +52,9 @@ export default function EditItemQuantityButton({
{isPending ? ( {isPending ? (
<LoadingDots className="bg-black dark:bg-white" /> <LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? ( ) : type === 'plus' ? (
<PlusIcon className="h-4 w-4 dark:text-neutral-500" /> <PlusIcon className="h-4 w-4 dark:text-gray-500" />
) : ( ) : (
<MinusIcon className="h-4 w-4 dark:text-neutral-500" /> <MinusIcon className="h-4 w-4 dark:text-gray-500" />
)} )}
</button> </button>
); );

18
components/cart/modal.tsx
View File

@ -76,7 +76,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]"> <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-gray-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-gray-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-lg font-semibold">My Cart</p> <p className="text-lg font-semibold">My Cart</p>
@ -111,7 +111,7 @@ 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 w-full flex-col border-b border-neutral-300 dark:border-neutral-700" className="flex w-full flex-col border-b border-gray-300 dark:border-gray-700"
> >
<div className="relative flex w-full flex-row justify-between py-4"> <div className="relative flex w-full flex-row justify-between py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -mt-2 ml-[55px]">
@ -122,7 +122,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 border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"> <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-gray-300 bg-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800">
<Image <Image
className="h-full w-full object-cover " className="h-full w-full object-cover "
width={64} width={64}
@ -141,7 +141,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-neutral-800" className="text-sm text-gray-800"
data-testid="cart-product-variant" data-testid="cart-product-variant"
> >
{item.merchandise.title} {item.merchandise.title}
@ -155,7 +155,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
amount={item.cost.totalAmount.amount} amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode} currencyCode={item.cost.totalAmount.currencyCode}
/> />
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700"> <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-gray-200 dark:border-gray-700">
<EditItemQuantityButton item={item} type="minus" /> <EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center "> <p className="w-6 text-center ">
<span className="w-full text-sm">{item.quantity}</span> <span className="w-full text-sm">{item.quantity}</span>
@ -168,8 +168,8 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
); );
})} })}
</ul> </ul>
<div className="py-4 text-sm text-neutral-400 dark:text-neutral-500"> <div className="py-4 text-sm text-gray-400 dark:text-gray-500">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 dark:border-gray-700">
<p>Taxes</p> <p>Taxes</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-right text-base text-black dark:text-white"
@ -177,11 +177,11 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
currencyCode={cart.cost.totalTaxAmount.currencyCode} currencyCode={cart.cost.totalTaxAmount.currencyCode}
/> />
</div> </div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 pt-1 dark:border-gray-700">
<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="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 pt-1 dark:border-gray-700">
<p>Total</p> <p>Total</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-right text-base text-black dark:text-white"

2
components/icons/cart.tsx
View File

@ -12,7 +12,7 @@ export default function CartIcon({
icon?: string; icon?: string;
}) { }) {
return ( return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"> <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
{icon === 'close' ? ( {icon === 'close' ? (
<CloseIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} /> <CloseIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
) : ( ) : (