Prettier

app/error.tsx

@@ -2,7 +2,7 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   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 dark:border-neutral-800 dark:bg-black">
       <h2 className="text-xl font-bold">Oh no!</h2>
       <p className="my-2">
         There was an issue with our storefront. This could be a temporary issue, please try your

app/product/[handle]/page.tsx

@@ -82,9 +82,9 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
           <div className="h-full w-full basis-full lg:basis-4/6">
-          <Suspense
+            <Suspense
               fallback={
                 <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
               }

app/search/layout.tsx

@@ -7,7 +7,7 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <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 dark:text-white">
         <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>

components/cart/modal.tsx

@@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
             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 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] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">My Cart</p>
 

components/layout/footer-menu.tsx

@@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
       <Link
         href={item.path}
         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 dark:hover:text-neutral-300',
           {
             'text-black dark:text-neutral-300': active
           }

components/layout/footer.tsx

@@ -16,9 +16,9 @@ export default async function Footer() {
 
   return (
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <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 dark:border-neutral-700">
         <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 dark:text-white" href="/">
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>

components/layout/navbar/index.tsx

@@ -15,9 +15,10 @@ export default async function Navbar() {
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
       <div className="block flex-none md:hidden">
-      <Suspense fallback={null}>
+        <Suspense fallback={null}>
           <MobileMenu menu={menu} />
-        </Suspense>      </div>
+        </Suspense>
+      </div>
       <div className="flex w-full items-center">
         <div className="flex w-full md:w-1/3">
           <Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
@@ -42,7 +43,7 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-        <Suspense fallback={<SearchSkeleton />}>
+          <Suspense fallback={<SearchSkeleton />}>
             <Search />
           </Suspense>
         </div>

components/layout/navbar/mobile-menu.tsx

@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
       <button
         onClick={openMobileMenu}
         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 dark:border-neutral-700 dark:text-white"
       >
         <Bars3Icon className="h-4" />
       </button>
@@ -72,7 +72,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 </button>
 
                 <div className="mb-4 w-full">
-                <Suspense fallback={<SearchSkeleton />}>
+                  <Suspense fallback={<SearchSkeleton />}>
                     <Search />
                   </Suspense>
                 </div>

components/layout/navbar/search.tsx

@@ -54,4 +54,4 @@ export function SearchSkeleton() {
       </div>
     </form>
   );
-}
+}

components/layout/search/filter/index.tsx

@@ -21,18 +21,20 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
     <>
       <nav>
         {title ? (
-          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
             {title}
           </h3>
         ) : null}
         <ul className="hidden md:block">
-        <Suspense fallback={null}>
+          <Suspense fallback={null}>
             <FilterItemList list={list} />
-          </Suspense>        </ul>
+          </Suspense>{' '}
+        </ul>
         <ul className="md:hidden">
-        <Suspense fallback={null}>
+          <Suspense fallback={null}>
             <FilterItemDropdown list={list} />
-          </Suspense>        </ul>
+          </Suspense>{' '}
+        </ul>
       </nav>
     </>
   );

components/product/product-description.tsx

@@ -28,7 +28,7 @@ export function ProductDescription({ product }: { product: Product }) {
         />
       ) : null}
 
-<Suspense fallback={null}>
+      <Suspense fallback={null}>
         <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
       </Suspense>
     </>