From 49f3776ba8894d5fd2aa6b2fea0632f73d6ae093 Mon Sep 17 00:00:00 2001
From: Samantha Kellow <sammii.h@icloud.com>
Date: Wed, 24 Apr 2024 18:53:14 +0100
Subject: [PATCH] updating search and carousel styling

---
 app/page.tsx                             | 14 +++++++-------
 components/layout/navbar/mobile-menu.tsx |  6 +++---
 components/ui/carousel.tsx               |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 8e4f9c302..c056ad941 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,10 +17,10 @@ export default async function HomePage() {
       <Suspense>
 
         <div className='container grid justify-around my-4 grid-cols-1 items-center justify-items-center'>
-        <Carousel collection={undefined} />
-        <Carousel collection='flower' />
-        <Carousel collection='foliage' />
-        <Carousel collection='nature' />
+          <Carousel collection={undefined} />
+          <Carousel collection='flower' />
+          <Carousel collection='foliage' />
+          <Carousel collection='nature' />
           {/* <Link className='h-full w-full md:w-10/12 flex items-center justify-center justify-items-center' href="/wall">
             <Button className='py-3 w-full m-3 bg-transparent' variant={'dark'}>
               <h2 className='absolute z-50 text-3xl text-white'>Art for the Wall</h2>
@@ -35,9 +35,9 @@ export default async function HomePage() {
           </Link> */}
 
         </div>
-        <Suspense>
-          <Footer />
-        </Suspense>
+      </Suspense>
+      <Suspense>
+        <Footer />
       </Suspense>
     </>
   );
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 7dfc032e8..ff2a821d1 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -57,7 +57,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
             leaveFrom="translate-x-0"
             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-neutral-800/95 pb-6 dark:bg-black">
               <div className="p-4">
                 <button className="mb-4" onClick={closeMobileMenu} aria-label="Close mobile menu">
                   <XMarkIcon className="h-6" />
@@ -69,10 +69,10 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 {menu.length ? (
                   <ul className="flex flex-col">
                     {menu.map((item: Menu) => (
-                      <li key={item.title}>
+                      <li className="mb-4" key={item.title}>
                         <Link
                           href={item.path}
-                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
+                          className="rounded-lg py-1 text-xl text-neutral-200 transition-colors hover:text-neutral-500 dark:text-white"
                           onClick={closeMobileMenu}
                         >
                           {item.title}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index a16d2f957..549400b85 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -20,7 +20,7 @@ export async function Carousel({collection}:
   if (!products?.length) return null;
 
   return (
-    <div>
+    <div className='max-w-full'>
       {scapeTitle && 
         <Link href={`/search/${scapeTitle}`}>
           <p className='text-lg text-bold'>{scapeTitle}</p>