crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-21 08:56: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}
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
}

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

@ -42,7 +42,7 @@ export default function EditItemQuantityButton({
}}
disabled={isPending}
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,
'ml-auto': type === 'minus'
@ -52,9 +52,9 @@ export default function EditItemQuantityButton({
{isPending ? (
<LoadingDots className="bg-black dark:bg-white" />
) : 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>
);

18
components/cart/modal.tsx
View File

@ -76,7 +76,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
leaveFrom="translate-x-0"
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">
<p className="text-lg font-semibold">My Cart</p>
@ -111,7 +111,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
<li
key={i}
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="absolute z-40 -mt-2 ml-[55px]">
@ -122,7 +122,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
onClick={closeCart}
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
className="h-full w-full object-cover "
width={64}
@ -141,7 +141,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
</span>
{item.merchandise.title !== DEFAULT_OPTION ? (
<p
className="text-sm text-neutral-800"
className="text-sm text-gray-800"
data-testid="cart-product-variant"
>
{item.merchandise.title}
@ -155,7 +155,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
amount={item.cost.totalAmount.amount}
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" />
<p className="w-6 text-center ">
<span className="w-full text-sm">{item.quantity}</span>
@ -168,8 +168,8 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
);
})}
</ul>
<div className="py-4 text-sm text-neutral-400 dark:text-neutral-500">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
<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-gray-200 pb-1 dark:border-gray-700">
<p>Taxes</p>
<Price
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}
/>
</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 className="text-right">Calculated at checkout</p>
</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>
<Price
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;
}) {
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' ? (
<CloseIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
) : (