mirror of
https://github.com/vercel/commerce.git
synced 2025-05-08 18:57:51 +00:00
Larger delete button, my fingers are too large
This commit is contained in:
parent
2b2b897cef
commit
a9e67c43bb
@ -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}
|
||||||
|
@ -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,18 +130,23 @@ export default function CartModal() {
|
|||||||
src={item.merchandise.product.featuredImage.url}
|
src={item.merchandise.product.featuredImage.url}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<Link
|
||||||
<div className="flex flex-1 flex-col text-base">
|
href={merchandiseUrl}
|
||||||
<span className="leading-tight">
|
onClick={closeCart}
|
||||||
{item.merchandise.product.title}
|
className="z-30 ml-2 flex flex-row space-x-4"
|
||||||
</span>
|
>
|
||||||
{item.merchandise.title !== DEFAULT_OPTION ? (
|
<div className="flex flex-1 flex-col text-base">
|
||||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
<span className="leading-tight">
|
||||||
{item.merchandise.title}
|
{item.merchandise.product.title}
|
||||||
</p>
|
</span>
|
||||||
) : null}
|
{item.merchandise.title !== DEFAULT_OPTION ? (
|
||||||
</div>
|
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
</Link>
|
{item.merchandise.title}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</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"
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user