crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-16 12:21:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

rm dark mode biz

Browse Source
This commit is contained in:
druzydowns 2024-06-01 18:11:27 -04:00
parent 8bb50a4530
commit c12c2c3993
31 changed files with 64 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/error.tsx
View File

@ -2,7 +2,7 @@
export default function Error({ reset }: { reset: () => void }) { export default function Error({ reset }: { reset: () => void }) {
return ( return (
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12"> <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12">
<h2 className="text-xl font-bold">Oh no!</h2> <h2 className="text-xl font-bold">Oh no!</h2>
<p className="my-2"> <p className="my-2">
There was an issue with our storefront. This could be a temporary issue, please try your There was an issue with our storefront. This could be a temporary issue, please try your

2
app/globals.css
View File

@ -17,7 +17,7 @@
a, a,
input, input,
button { button {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900; @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50;
} }
.cls-1 { .cls-1 {

2
app/layout.tsx
View File

@ -41,7 +41,7 @@ const jubilee = localFont({
export default async function RootLayout({ children }: { children: ReactNode }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" className={clsx(GeistSans.variable, jubilee.className)}> <html lang="en" className={clsx(GeistSans.variable, jubilee.className)}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="bg-neutral-50 text-black selection:bg-teal-300">
<Navbar /> <Navbar />
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>

2
app/product/[handle]/page.tsx
View File

@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
}} }}
/> />
<div className="mx-auto max-w-screen-2xl px-4"> <div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8 lg:p-8"> <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-4 md:p-12 lg:flex-row lg:gap-8 lg:p-8">
<div className="h-full w-full basis-full lg:basis-4/6"> <div className="h-full w-full basis-full lg:basis-4/6">
<Gallery <Gallery
images={product.images.map((image: Image) => ({ images={product.images.map((image: Image) => ({

2
app/search/layout.tsx
View File

@ -7,7 +7,7 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row"> <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]"> <div className="order-first w-full flex-none md:max-w-[125px]">
<Collections /> <Collections />
</div> </div>

4
app/search/loading.tsx
View File

@ -6,9 +6,7 @@ export default function Loading() {
{Array(12) {Array(12)
.fill(0) .fill(0)
.map((_, index) => { .map((_, index) => {
return ( return <Grid.Item key={index} className="animate-pulse bg-neutral-100" />;
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
);
})} })}
</Grid> </Grid>
); );

2
components/cart/close-cart.tsx
View File

@ -3,7 +3,7 @@ import clsx from 'clsx';
export default function CloseCart({ className }: { className?: string }) { export default function CloseCart({ className }: { className?: string }) {
return ( return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"> <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
<XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} /> <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
</div> </div>
); );

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

@ -28,7 +28,7 @@ function SubmitButton() {
{pending ? ( {pending ? (
<LoadingDots className="bg-white" /> <LoadingDots className="bg-white" />
) : ( ) : (
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" /> <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white" />
)} )}
</button> </button>
); );

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

@ -27,11 +27,11 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
)} )}
> >
{pending ? ( {pending ? (
<LoadingDots className="bg-black dark:bg-white" /> <LoadingDots className="bg-black" />
) : type === 'plus' ? ( ) : type === 'plus' ? (
<PlusIcon className="h-4 w-4 dark:text-neutral-500" /> <PlusIcon className="h-4 w-4" />
) : ( ) : (
<MinusIcon className="h-4 w-4 dark:text-neutral-500" /> <MinusIcon className="h-4 w-4" />
)} )}
</button> </button>
); );

25
components/cart/modal.tsx
View File

@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
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 border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]"> <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl 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>
@ -96,10 +96,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
); );
return ( return (
<li <li key={i} className="flex w-full flex-col border-b border-neutral-300">
key={i}
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 -mt-2 ml-[55px]">
<DeleteItemButton item={item} /> <DeleteItemButton item={item} />
@ -109,7 +106,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart} onClick={closeCart}
className="z-30 flex flex-row space-x-4" 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"> <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300">
<Image <Image
className="h-full w-full object-cover" className="h-full w-full object-cover"
width={64} width={64}
@ -127,7 +124,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {item.merchandise.title !== DEFAULT_OPTION ? (
<p className="text-sm text-neutral-500 dark:text-neutral-400"> <p className="text-sm text-neutral-500">
{item.merchandise.title} {item.merchandise.title}
</p> </p>
) : null} ) : null}
@ -139,7 +136,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
amount={item.cost.totalAmount.amount} amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode} currencyCode={item.cost.totalAmount.currencyCode}
/> />
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700"> <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200">
<EditItemQuantityButton item={item} type="minus" /> <EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center"> <p className="w-6 text-center">
<span className="w-full text-sm">{item.quantity}</span> <span className="w-full text-sm">{item.quantity}</span>
@ -152,23 +149,23 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
); );
})} })}
</ul> </ul>
<div className="py-4 text-sm text-neutral-500 dark:text-neutral-400"> <div className="py-4 text-sm text-neutral-500">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1">
<p>Taxes</p> <p>Taxes</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-right text-base text-black"
amount={cart.cost.totalTaxAmount.amount} amount={cart.cost.totalTaxAmount.amount}
currencyCode={cart.cost.totalTaxAmount.currencyCode} currencyCode={cart.cost.totalTaxAmount.currencyCode}
/> />
</div> </div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
<p>Shipping</p> <p>Shipping</p>
<p className="text-right">Calculated at checkout</p> <p className="text-right">Calculated at checkout</p>
</div> </div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
<p>Total</p> <p>Total</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-right text-base text-black"
amount={cart.cost.totalAmount.amount} amount={cart.cost.totalAmount.amount}
currencyCode={cart.cost.totalAmount.currencyCode} currencyCode={cart.cost.totalAmount.currencyCode}
/> />

2
components/cart/open-cart.tsx
View File

@ -9,7 +9,7 @@ export default function OpenCart({
quantity?: number; quantity?: number;
}) { }) {
return ( return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"> <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
<ShoppingCartIcon <ShoppingCartIcon
className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)} className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
/> />

2
components/grid/tile.tsx
View File

@ -24,7 +24,7 @@ export function GridTileImage({
return ( return (
<div <div
className={clsx( className={clsx(
'group flex h-full w-full items-center justify-center overflow-visible rounded-lg dark:bg-black', 'group flex h-full w-full items-center justify-center overflow-visible rounded-lg',
{ {
relative: label, relative: label,
'': active, '': active,

2
components/icons/logo.tsx
View File

@ -7,7 +7,7 @@ export default function LogoIcon(props: React.ComponentProps<'svg'>) {
aria-label={`${process.env.SITE_NAME} logo`} aria-label={`${process.env.SITE_NAME} logo`}
viewBox="0 0 32 28" viewBox="0 0 32 28"
{...props} {...props}
className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)} className={clsx('h-4 w-4 fill-black', props.className)}
> >
<path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" /> <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
<path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" /> <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />

2
components/label.tsx
View File

@ -18,7 +18,7 @@ const Label = ({
'lg:px-20 lg:pb-[35%]': position === 'center' 'lg:px-20 lg:pb-[35%]': position === 'center'
})} })}
> >
<div className="flex items-center border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-sm dark:border-neutral-800 dark:bg-black/70 dark:text-white"> <div className="flex items-center border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-sm">
<h3 className="mr-4 line-clamp-2 flex-grow pl-2 text-lg leading-none tracking-tight"> <h3 className="mr-4 line-clamp-2 flex-grow pl-2 text-lg leading-none tracking-tight">
{title} {title}
</h3> </h3>

4
components/layout/footer-menu.tsx
View File

@ -19,9 +19,9 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
<Link <Link
href={item.path} href={item.path}
className={clsx( className={clsx(
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm', 'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm',
{ {
'text-black dark:text-neutral-300': active 'text-black': active
} }
)} )}
> >

16
components/layout/footer.tsx
View File

@ -10,15 +10,15 @@ const { COMPANY_NAME, SITE_NAME } = process.env;
export default async function Footer() { export default async function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : ''); const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700'; const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200';
const menu = await getMenu('next-js-frontend-footer-menu'); const menu = await getMenu('next-js-frontend-footer-menu');
const copyrightName = COMPANY_NAME || SITE_NAME || ''; const copyrightName = COMPANY_NAME || SITE_NAME || '';
return ( return (
<footer className="text-sm text-neutral-500 dark:text-neutral-400"> <footer className="text-sm text-neutral-500">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0"> <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
<div> <div>
<Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/"> <Link className="flex items-center gap-2 text-black md:pt-1" href="/">
<LogoSquare size="sm" /> <LogoSquare size="sm" />
<span className="uppercase">{SITE_NAME}</span> <span className="uppercase">{SITE_NAME}</span>
</Link> </Link>
@ -39,17 +39,17 @@ export default async function Footer() {
</Suspense> </Suspense>
<div className="md:ml-auto"> <div className="md:ml-auto">
<a <a
className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white" className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black"
aria-label="Deploy on Vercel" aria-label="Deploy on Vercel"
href="https://vercel.com/templates/next.js/nextjs-commerce" href="https://vercel.com/templates/next.js/nextjs-commerce"
> >
<span className="px-3">▲</span> <span className="px-3">▲</span>
<hr className="h-full border-r border-neutral-200 dark:border-neutral-700" /> <hr className="h-full border-r border-neutral-200" />
<span className="px-3">Deploy</span> <span className="px-3">Deploy</span>
</a> </a>
</div> </div>
</div> </div>
<div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700"> <div className="border-t border-neutral-200 py-6 text-sm">
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0"> <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0">
<p> <p>
&copy; {copyrightDate} {copyrightName} &copy; {copyrightDate} {copyrightName}
@ -58,7 +58,7 @@ export default async function Footer() {
<hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" /> <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
<p>Designed in California</p> <p>Designed in California</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">
Crafted by ▲ Vercel Crafted by ▲ Vercel
</a> </a>
</p> </p>

2
components/layout/navbar/index.tsx
View File

@ -30,7 +30,7 @@ export default async function Navbar() {
<li key={item.title}> <li key={item.title}>
<Link <Link
href={item.path} href={item.path}
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300" className="text-neutral-500 underline-offset-4 hover:text-black hover:underline"
> >
{item.title} {item.title}
</Link> </Link>

8
components/layout/navbar/mobile-menu.tsx
View File

@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<button <button
onClick={openMobileMenu} onClick={openMobileMenu}
aria-label="Open mobile menu" aria-label="Open mobile menu"
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden" className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden"
> >
<Bars3Icon className="h-4" /> <Bars3Icon className="h-4" />
</button> </button>
@ -61,10 +61,10 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-[-100%]" leaveTo="translate-x-[-100%]"
> >
<Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black"> <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6">
<div className="p-4"> <div className="p-4">
<button <button
className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white" className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors"
onClick={closeMobileMenu} onClick={closeMobileMenu}
aria-label="Close mobile menu" aria-label="Close mobile menu"
> >
@ -78,7 +78,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<ul className="flex w-full flex-col"> <ul className="flex w-full flex-col">
{menu.map((item: Menu) => ( {menu.map((item: Menu) => (
<li <li
className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white" className="py-2 text-xl text-black transition-colors hover:text-neutral-500"
key={item.title} key={item.title}
> >
<Link href={item.path} onClick={closeMobileMenu}> <Link href={item.path} onClick={closeMobileMenu}>

2
components/layout/navbar/ogNav.tsx
View File

@ -31,7 +31,7 @@ export default async function OgNavbar() {
<li key={item.title}> <li key={item.title}>
<Link <Link
href={item.path} href={item.path}
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300" className="text-neutral-500 underline-offset-4 hover:text-black hover:underline "
> >
{item.title} {item.title}
</Link> </Link>

2
components/layout/navbar/search.tsx
View File

@ -33,7 +33,7 @@ export default function Search() {
placeholder="Search for..." placeholder="Search for..."
autoComplete="off" autoComplete="off"
defaultValue={searchParams?.get('q') || ''} defaultValue={searchParams?.get('q') || ''}
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400" className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500"
/> />
<div className="absolute right-0 top-0 mr-3 flex h-full items-center"> <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" /> <MagnifyingGlassIcon className="h-4" />

4
components/layout/search/collections.tsx
View File

@ -10,8 +10,8 @@ async function CollectionList() {
} }
const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded'; const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300'; const activeAndTitles = 'bg-neutral-800';
const items = 'bg-neutral-400 dark:bg-neutral-700'; const items = 'bg-neutral-400';
export default function Collections() { export default function Collections() {
return ( return (

4
components/layout/search/filter/dropdown.tsx
View File

@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => { onClick={() => {
setOpenSelect(!openSelect); 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 w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm"
> >
<div>{active}</div> <div>{active}</div>
<ChevronDownIcon className="h-4" /> <ChevronDownIcon className="h-4" />
@ -52,7 +52,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => { onClick={() => {
setOpenSelect(false); 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 rounded-b-md bg-white p-4 shadow-md "
> >
{list.map((item: ListItem, i) => ( {list.map((item: ListItem, i) => (
<FilterItem key={i} item={item} /> <FilterItem key={i} item={item} />

6
components/layout/search/filter/index.tsx
View File

@ -19,11 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
return ( return (
<> <>
<nav> <nav>
{title ? ( {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
<h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
{title}
</h3>
) : null}
<ul className="hidden md:block"> <ul className="hidden md:block">
<FilterItemList list={list} /> <FilterItemList list={list} />
</ul> </ul>

13
components/layout/search/filter/item.tsx
View File

@ -17,15 +17,12 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
newParams.delete('q'); newParams.delete('q');
return ( return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-black" key={item.title}>
<DynamicTag <DynamicTag
href={createUrl(item.path, newParams)} href={createUrl(item.path, newParams)}
className={clsx( className={clsx('w-full text-sm underline-offset-4 hover:underline', {
'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100', 'underline underline-offset-4': active
{ })}
'underline underline-offset-4': active
}
)}
> >
{item.title} {item.title}
</DynamicTag> </DynamicTag>
@ -48,7 +45,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
const DynamicTag = active ? 'p' : Link; const DynamicTag = active ? 'p' : Link;
return ( return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-sm text-black" key={item.title}>
<DynamicTag <DynamicTag
prefetch={!active ? false : undefined} prefetch={!active ? false : undefined}
href={href} href={href}

2
components/logo-square.tsx
View File

@ -5,7 +5,7 @@ export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
return ( return (
<div <div
className={clsx( className={clsx(
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black', 'flex flex-none items-center justify-center border border-neutral-200 bg-white',
{ {
'h-[40px] w-[40px] rounded-xl': !size, 'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm' 'h-[30px] w-[30px] rounded-lg': size === 'sm'

4
components/product/gallery.tsx
View File

@ -24,7 +24,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
const previousUrl = createUrl(pathname, previousSearchParams); const previousUrl = createUrl(pathname, previousSearchParams);
const buttonClassName = const buttonClassName =
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center'; 'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black flex items-center justify-center';
return ( return (
<> <>
@ -42,7 +42,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? ( {images.length > 1 ? (
<div className="absolute bottom-[15%] hidden w-full justify-center"> <div className="absolute bottom-[15%] hidden w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80"> <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur">
<Link <Link
aria-label="Previous product image" aria-label="Previous product image"
href={previousUrl} href={previousUrl}

7
components/product/product-description.tsx
View File

@ -7,7 +7,7 @@ import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) { export function ProductDescription({ product }: { product: Product }) {
return ( return (
<> <>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700"> <div className="mb-6 flex flex-col border-b pb-6">
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1> <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
<div className="mr-auto w-auto bg-black p-2 text-lg text-white"> <div className="mr-auto w-auto bg-black p-2 text-lg text-white">
<Price <Price
@ -19,10 +19,7 @@ export function ProductDescription({ product }: { product: Product }) {
<VariantSelector options={product.options} variants={product.variants} /> <VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? ( {product.descriptionHtml ? (
<Prose <Prose className="mb-6 font-sans text-sm leading-tight" html={product.descriptionHtml} />
className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
) : null} ) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} /> <AddToCart variants={product.variants} availableForSale={product.availableForSale} />

7
components/product/productDescriptionCard.tsx
View File

@ -11,7 +11,7 @@ export function ProductDescriptionCard({ product }: { product: Product }) {
<h1 className="text-3xl font-medium md:text-5xl">{product.title}</h1> <h1 className="text-3xl font-medium md:text-5xl">{product.title}</h1>
</div> </div>
<div className="border-black lg:border-2 lg:p-14"> <div className="border-black lg:border-2 lg:p-14">
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700"> <div className="mb-6 flex flex-col border-b pb-6">
<div className="mx-auto w-auto bg-black p-2 text-lg text-white"> <div className="mx-auto w-auto bg-black p-2 text-lg text-white">
<Price <Price
amount={product.priceRange.maxVariantPrice.amount} amount={product.priceRange.maxVariantPrice.amount}
@ -22,10 +22,7 @@ export function ProductDescriptionCard({ product }: { product: Product }) {
<VariantSelector options={product.options} variants={product.variants} /> <VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? ( {product.descriptionHtml ? (
<Prose <Prose className="mb-6 font-sans text-sm leading-tight" html={product.descriptionHtml} />
className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
) : null} ) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} /> <AddToCart variants={product.variants} availableForSale={product.availableForSale} />

4
components/product/variant-selector.tsx
View File

@ -86,12 +86,12 @@ export function VariantSelector({
}} }}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Sold Out)' : ''}`} title={`${option.name} ${value}${!isAvailableForSale ? ' (Sold Out)' : ''}`}
className={clsx( className={clsx(
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900', 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm',
{ {
'cursor-default ring-2 ring-black': isActive, 'cursor-default ring-2 ring-black': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-black ': 'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-black ':
!isActive && isAvailableForSale, !isActive && isAvailableForSale,
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700': 'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform':
!isAvailableForSale !isAvailableForSale
} }
)} )}

2
components/prose.tsx
View File

@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return ( return (
<div <div
className={clsx( className={clsx(
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white', 'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6',
className className
)} )}
dangerouslySetInnerHTML={{ __html: html as string }} dangerouslySetInnerHTML={{ __html: html as string }}

5
tailwind.config.js
View File

@ -3,6 +3,7 @@ const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'media',
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
@ -31,10 +32,6 @@ module.exports = {
}, },
} }
}, },
corePlugins: {
// Disable the dark mode variant for all utilities
darkMode: false,
},
future: { future: {
hoverOnlyWhenSupported: true hoverOnlyWhenSupported: true
}, },