crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-09 19:27:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Larger delete button, my fingers are too large

Browse Source
This commit is contained in:
Lee Robinson 2024-07-28 15:19:53 -05:00
parent 2b2b897cef
commit a9e67c43bb
3 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,9 +26,9 @@ export function DeleteItemButton({
<button <button
type="submit" type="submit"
aria-label="Remove cart item" aria-label="Remove cart item"
className="ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200" className="flex h-[24px] w-[24px] items-center justify-center rounded-full bg-neutral-500"
> >
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" /> <XMarkIcon className="mx-[1px] h-4 w-4 text-white dark:text-black" />
</button> </button>
<p aria-live="polite" className="sr-only" role="status"> <p aria-live="polite" className="sr-only" role="status">
{message} {message}

17
components/cart/modal.tsx
View File

@ -114,15 +114,11 @@ export default function CartModal() {
className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700" className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
> >
<div className="relative flex w-full flex-row justify-between px-1 py-4"> <div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -ml-1 -mt-2">
<DeleteItemButton item={item} optimisticUpdate={updateCartItem} /> <DeleteItemButton item={item} optimisticUpdate={updateCartItem} />
</div> </div>
<Link <div className="flex flex-row">
href={merchandiseUrl} <div className="relative h-16 w-16 overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
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">
<Image <Image
className="h-full w-full object-cover" className="h-full w-full object-cover"
width={64} width={64}
@ -134,7 +130,11 @@ export default function CartModal() {
src={item.merchandise.product.featuredImage.url} src={item.merchandise.product.featuredImage.url}
/> />
</div> </div>
<Link
href={merchandiseUrl}
onClick={closeCart}
className="z-30 ml-2 flex flex-row space-x-4"
>
<div className="flex flex-1 flex-col text-base"> <div className="flex flex-1 flex-col text-base">
<span className="leading-tight"> <span className="leading-tight">
{item.merchandise.product.title} {item.merchandise.product.title}
@ -146,6 +146,7 @@ export default function CartModal() {
) : null} ) : null}
</div> </div>
</Link> </Link>
</div>
<div className="flex h-16 flex-col justify-between"> <div className="flex h-16 flex-col justify-between">
<Price <Price
className="flex justify-end space-y-2 text-right text-sm" className="flex justify-end space-y-2 text-right text-sm"

2
components/layout/footer.tsx
View File

@ -61,7 +61,7 @@ export default async function Footer() {
</p> </p>
<p className="md:ml-auto"> <p className="md:ml-auto">
<a href="https://vercel.com" className="text-black dark:text-white"> <a href="https://vercel.com" className="text-black dark:text-white">
Crafted by ▲ Vercel Created by ▲ Vercel
</a> </a>
</p> </p>
</div> </div>