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

use neutral for all gray shades

Browse Source
This commit is contained in:
StephDietz 2023-07-10 14:24:03 -05:00
parent e46c8fc60c
commit dd5a2a5388
4 changed files with 10 additions and 10 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-stone-500 transition-all duration-200', 'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-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-gray-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-neutral-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-stone-500" /> <PlusIcon className="w-4 h-4 dark:text-neutral-500" />
) : ( ) : (
<MinusIcon className="h-4 w-4 dark:text-stone-500" /> <MinusIcon className="w-4 h-4 dark:text-neutral-500" />
)} )}
</button> </button>
); );

10
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-gray-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-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]">
<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 flex-col w-full border-b border-zinc-300 dark:border-neutral-700" className="flex flex-col w-full border-b border-neutral-300 dark:border-neutral-700"
> >
<div className="relative 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]">
@ -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 w-16 h-16 overflow-hidden border rounded-md cursor-pointer border-zinc-300 bg-zinc-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"> <div className="relative w-16 h-16 overflow-hidden border rounded-md cursor-pointer border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Image <Image
className="object-cover w-full h-full " className="object-cover w-full h-full "
width={64} width={64}
@ -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="flex flex-row items-center ml-auto border border-gray-200 rounded-full h-9 dark:border-neutral-700"> <div className="flex flex-row items-center ml-auto border rounded-full h-9 border-neutral-200 dark:border-neutral-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,7 +168,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
); );
})} })}
</ul> </ul>
<div className="py-4 text-sm text-neutral-400 dark:text-zinc-500"> <div className="py-4 text-sm text-neutral-400 dark:text-neutral-500">
<div className="flex items-center justify-between pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700"> <div className="flex items-center justify-between pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
<p>Taxes</p> <p>Taxes</p>
<Price <Price

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 items-center justify-center text-black transition-colors border border-gray-200 rounded-md h-11 w-11 dark:border-neutral-700 dark:text-white"> <div className="relative flex items-center justify-center text-black transition-colors border rounded-md h-11 w-11 border-neutral-200 dark:border-neutral-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)} />
) : ( ) : (