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

begin to fix light/dark mode and fix some overlap clicking issues

Browse Source
This commit is contained in:
StephDietz 2023-07-06 21:15:24 -05:00
parent 69072195f4
commit d3c9976463
5 changed files with 30 additions and 31 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-4 w-4 items-center justify-center rounded-full bg-base-gray-900 transition-all duration-200 ', 'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-base-gray-900 transition-all duration-200 ',
{ {
'cursor-not-allowed px-0': isPending 'cursor-not-allowed px-0': isPending
} }

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

@ -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="w-4 h-4" /> <PlusIcon className="w-4 h-4 dark:text-base-gray-900" />
) : ( ) : (
<MinusIcon className="w-4 h-4" /> <MinusIcon className="w-4 h-4 dark:text-base-gray-900" />
)} )}
</button> </button>
); );

43
components/cart/modal.tsx
View File

@ -66,7 +66,7 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
leaveFrom="opacity-100 backdrop-blur-[.5px]" leaveFrom="opacity-100 backdrop-blur-[.5px]"
leaveTo="opacity-0 backdrop-blur-none" leaveTo="opacity-0 backdrop-blur-none"
> >
<div className="fixed inset-0 bg-black/30" aria-hidden="true" /> <div className="fixed inset-0 " aria-hidden="true" />
</Transition.Child> </Transition.Child>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
@ -77,7 +77,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 bg-white/90 p-6 text-black backdrop-blur-xl dark:bg-black/90 dark:text-white md:w-[390px]"> <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white/80 p-6 text-black backdrop-blur-xl 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>
@ -112,30 +112,28 @@ 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" className="flex flex-col w-full border-b border-dark-gray-4"
> >
<div className="flex flex-row justify-between w-full py-4"> <div className="flex flex-row justify-between w-full py-4">
<div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} />
</div>
<Link <Link
href={merchandiseUrl} href={merchandiseUrl}
onClick={closeCart} onClick={closeCart}
className="flex flex-row space-x-4" className="z-30 flex flex-row space-x-4"
> >
<div className="relative 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 rounded-md border border-dark-gray-4 bg-white/[6.6%] hover:bg-white/[8.7%]">
<div className="absolute right-0 -mt-2 -mr-2"> <Image
<DeleteItemButton item={item} /> className="object-cover w-full h-full "
</div> width={64}
<div className="w-16 h-16 overflow-hidden rounded-md cursor-pointer"> height={64}
<Image alt={
className="object-cover w-full h-full " item.merchandise.product.featuredImage.altText ||
width={64} item.merchandise.product.title
height={64} }
alt={ src={item.merchandise.product.featuredImage.url}
item.merchandise.product.featuredImage.altText || />
item.merchandise.product.title
}
src={item.merchandise.product.featuredImage.url}
/>
</div>
</div> </div>
<div className="flex flex-col flex-1 text-base"> <div className="flex flex-col flex-1 text-base">
@ -143,7 +141,10 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {item.merchandise.title !== DEFAULT_OPTION ? (
<p className="font-semibold " data-testid="cart-product-variant"> <p
className="text-sm text-white/[54%]"
data-testid="cart-product-variant"
>
{item.merchandise.title} {item.merchandise.title}
</p> </p>
) : null} ) : null}

9
components/icons/cart.tsx
View File

@ -9,15 +9,12 @@ export default function CartIcon({
quantity?: number; quantity?: number;
}) { }) {
return ( return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-dark-gray-4 text-black transition-colors dark:text-gray-100"> <div className="relative flex items-center justify-center text-black transition-colors border rounded-md h-11 w-11 border-light-gray-4 dark:border-dark-gray-4 dark:text-white">
<ShoppingCartIcon <ShoppingCartIcon
className={clsx( className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)}
'h-6 transition-all ease-in-out hover:scale-110 hover:text-gray-500 dark:hover:text-gray-300',
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-blue-500 text-[11px] font-medium ">
{quantity} {quantity}
</div> </div>
) : null} ) : null}

3
tailwind.config.js
View File

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