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}
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
}

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

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

23
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]"
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
as={Fragment}
@ -77,7 +77,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 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">
<p className="text-lg font-semibold">My Cart</p>
@ -112,19 +112,18 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
<li
key={i}
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="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} />
</div>
<Link
href={merchandiseUrl}
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="absolute right-0 -mt-2 -mr-2">
<DeleteItemButton item={item} />
</div>
<div className="w-16 h-16 overflow-hidden rounded-md cursor-pointer">
<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%]">
<Image
className="object-cover w-full h-full "
width={64}
@ -136,14 +135,16 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
src={item.merchandise.product.featuredImage.url}
/>
</div>
</div>
<div className="flex flex-col flex-1 text-base">
<span className="leading-tight">
{item.merchandise.product.title}
</span>
{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}
</p>
) : null}

9
components/icons/cart.tsx
View File

@ -9,15 +9,12 @@ export default function CartIcon({
quantity?: number;
}) {
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
className={clsx(
'h-6 transition-all ease-in-out hover:scale-110 hover:text-gray-500 dark:hover:text-gray-300',
className
)}
className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)}
/>
{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}
</div>
) : null}

3
tailwind.config.js
View File

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