diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx index 05cce6ff3..5c0419358 100644 --- a/components/cart/delete-item-button.tsx +++ b/components/cart/delete-item-button.tsx @@ -1,4 +1,4 @@ -import CloseIcon from 'components/icons/close'; +import { XMarkIcon } from '@heroicons/react/24/outline'; import LoadingDots from 'components/loading-dots'; import { useRouter } from 'next/navigation'; @@ -37,7 +37,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) { {isPending ? ( ) : ( - + )} ); diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx index 7afdf23b1..3ef3cab18 100644 --- a/components/cart/edit-item-quantity-button.tsx +++ b/components/cart/edit-item-quantity-button.tsx @@ -1,10 +1,9 @@ import { useRouter } from 'next/navigation'; import { useTransition } from 'react'; +import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; import { removeItem, updateItemQuantity } from 'components/cart/actions'; -import MinusIcon from 'components/icons/minus'; -import PlusIcon from 'components/icons/plus'; import LoadingDots from 'components/loading-dots'; import type { CartItem } from 'lib/shopify/types'; @@ -52,9 +51,9 @@ export default function EditItemQuantityButton({ {isPending ? ( ) : type === 'plus' ? ( - + ) : ( - + )} ); diff --git a/components/icons/arrow-left.tsx b/components/icons/arrow-left.tsx deleted file mode 100644 index 95d5af173..000000000 --- a/components/icons/arrow-left.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export default function ArrowLeftIcon({ className }: { className?: string }) { - return ( - - - - - ); -} diff --git a/components/icons/caret-right.tsx b/components/icons/caret-right.tsx deleted file mode 100644 index fbed04236..000000000 --- a/components/icons/caret-right.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export default function CaretRightIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/components/icons/cart.tsx b/components/icons/cart.tsx index e54b77675..173a0de97 100644 --- a/components/icons/cart.tsx +++ b/components/icons/cart.tsx @@ -1,6 +1,5 @@ -import { ShoppingCartIcon } from '@heroicons/react/24/outline'; +import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; -import CloseIcon from './close'; export default function CartIcon({ className, @@ -12,9 +11,9 @@ export default function CartIcon({ icon?: string; }) { return ( -
+
{icon === 'close' ? ( - + ) : ( - - - - ); -} diff --git a/components/icons/menu.tsx b/components/icons/menu.tsx deleted file mode 100644 index acaed1188..000000000 --- a/components/icons/menu.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export default function MenuIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/components/icons/minus.tsx b/components/icons/minus.tsx deleted file mode 100644 index 93c46e1dc..000000000 --- a/components/icons/minus.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export default function MinusIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/components/icons/plus.tsx b/components/icons/plus.tsx deleted file mode 100644 index 8ae449578..000000000 --- a/components/icons/plus.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export default function PlusIcon({ className }: { className?: string }) { - return ( - - - - - ); -} diff --git a/components/icons/search.tsx b/components/icons/search.tsx deleted file mode 100644 index a03574025..000000000 --- a/components/icons/search.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export default function SearchIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx index 6ede894ae..753d2349e 100644 --- a/components/layout/navbar/mobile-menu.tsx +++ b/components/layout/navbar/mobile-menu.tsx @@ -5,8 +5,7 @@ import Link from 'next/link'; import { usePathname, useSearchParams } from 'next/navigation'; import { Fragment, useEffect, useState } from 'react'; -import CloseIcon from 'components/icons/close'; -import MenuIcon from 'components/icons/menu'; +import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'; import { Menu } from 'lib/shopify/types'; import Search from './search'; @@ -39,7 +38,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) { className="md:hidden" data-testid="open-mobile-menu" > - + @@ -63,7 +62,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) { leaveFrom="translate-x-0" leaveTo="translate-x-[-100%]" > - +
-
+
{menu.length ? ( @@ -83,7 +82,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
  • {item.title} diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx index fff895f43..c49306476 100644 --- a/components/layout/navbar/search.tsx +++ b/components/layout/navbar/search.tsx @@ -2,7 +2,7 @@ import { useRouter, useSearchParams } from 'next/navigation'; -import SearchIcon from 'components/icons/search'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { createUrl } from 'lib/utils'; export default function Search() { @@ -28,7 +28,7 @@ export default function Search() { return (
    -
    - +
    +
    ); diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx index 6f3e37f26..2f38f0df7 100644 --- a/components/layout/search/filter/dropdown.tsx +++ b/components/layout/search/filter/dropdown.tsx @@ -3,7 +3,7 @@ import { usePathname, useSearchParams } from 'next/navigation'; import { useEffect, useRef, useState } from 'react'; -import Caret from 'components/icons/caret-right'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; import type { ListItem } from '.'; import { FilterItem } from './item'; @@ -42,17 +42,17 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) { onClick={() => { setOpenSelect(!openSelect); }} - className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30" + className="flex items-center justify-between w-full px-4 py-2 text-sm border rounded border-black/30 dark:border-white/30" >
    {active}
    - +
    {openSelect && (
    { setOpenSelect(false); }} - className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black" + className="absolute z-40 w-full p-4 bg-white shadow-md rounded-b-md dark:bg-black" > {list.map((item: ListItem, i) => ( diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx index 12690d11e..be92d6498 100644 --- a/components/product/gallery.tsx +++ b/components/product/gallery.tsx @@ -2,9 +2,9 @@ import { useState } from 'react'; +import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; import { GridTileImage } from 'components/grid/tile'; -import ArrowLeftIcon from 'components/icons/arrow-left'; export function Gallery({ title, @@ -51,20 +51,20 @@ export function Gallery({ )} {images.length > 1 ? ( -
    +
    ) : null} @@ -78,7 +78,7 @@ export function Gallery({