Update margins to account for navbar

src/components/RegisterUserForm.tsx

@@ -45,7 +45,7 @@ const RegisterUserForm: FC = () => {
   };
   return (
     <form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
-      <div className="space-y-5">
+      <div className="lg:space-y-5">
         <div className="flex flex-col lg:flex-row lg:space-x-5">
           <div className="lg:w-[50%]">
             <FormInfo>

src/components/ui/Navbar.tsx

@@ -85,8 +85,7 @@ const Navbar = () => {
 
   const { currentURL } = useNavbar();
 
-  const backgroundIsTransparent =
-    currentURL === '/' || currentURL === '/login' || currentURL === '/register';
+  const backgroundIsTransparent = currentURL === '/';
 
   const isOnHomePage = currentURL === '/';
 
@@ -95,7 +94,7 @@ const Navbar = () => {
     <div
       className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
         'bg-transparent': backgroundIsTransparent,
-        'bg-base-100': !backgroundIsTransparent,
+        'bg-primary': !backgroundIsTransparent,
       })}
     >
       <div className="flex-1">

src/pages/beers/[id]/index.tsx

@@ -32,7 +32,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
         <title>{beerPost.name}</title>
         <meta name="description" content={beerPost.description} />
       </Head>
-      <>
+      <div className="mt-10">
         <Carousel
           className="w-full"
           useKeyboardArrows
@@ -90,7 +90,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
             )}
           </div>
         </main>
-      </>
+      </div>
     </>
   );
 };

src/pages/beers/index.tsx

@@ -33,7 +33,7 @@ const BeerPage: NextPage = () => {
           content="Find beers made by breweries near you and around the world."
         />
       </Head>
-      <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
+      <div className="mt-10 flex items-center justify-center bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
           <header className="my-10 flex justify-between lg:flex-row">
             <div>

src/pages/beers/styles/[id]/index.tsx

@@ -27,7 +27,7 @@ const BeerStyleByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
       </Head>
       <>
         <main className="mb-12 mt-10 flex w-full items-center justify-center">
-          <div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
+          <div className="mt-10 w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
             <BeerStyleHeader beerStyle={beerStyle} />
 
             {isDesktop ? (

src/pages/beers/styles/index.tsx

@@ -33,7 +33,7 @@ const BeerStylePage: NextPage = () => {
           content="Find beers made by breweries near you and around the world."
         />
       </Head>
-      <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
+      <div className="mt-10 flex items-center justify-center  bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
           <header className="my-10 flex justify-between lg:flex-row">
             <div>

src/pages/breweries/[id]/index.tsx

@@ -36,7 +36,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
         <meta name="description" content={breweryPost.description} />
       </Head>
 
-      <>
+      <div className="mt-10">
         <Carousel
           className="w-full"
           useKeyboardArrows
@@ -106,7 +106,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
             )}
           </div>
         </div>
-      </>
+      </div>
     </>
   );
 };

src/pages/breweries/index.tsx

@@ -43,7 +43,7 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
           content="Find breweries near you and around the world."
         />
       </Head>
-      <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
+      <div className="mt-10 flex items-center justify-center bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
           <header className="my-10 flex justify-between lg:flex-row">
             <div className="space-y-2">