Style updates

fix navbar to remain sticky, add fade in to layout component, update font to Space Grotesk

components/ui/Layout.tsx

@@ -4,10 +4,10 @@ import Navbar from './Navbar';
 const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div className="flex h-screen flex-col">
-      <header className="sticky top-0 z-50">
       <Navbar />
-      </header>
-      <div className="relative top-0 h-full flex-1">{children}</div>
+      <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
+        {children}
+      </div>
     </div>
   );
 };

components/ui/Navbar.tsx

@@ -42,10 +42,10 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="navbar bg-primary text-primary-content">
+    <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
-          <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
+        <Link className="btn-ghost btn normal-case" href="/">
+          <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
         </Link>
       </div>
       <div className="hidden flex-none lg:block">
@@ -68,7 +68,7 @@ const Navbar = () => {
         </ul>
       </div>
       <div className="flex-none lg:hidden">
-        <div className="dropdown dropdown-end">
+        <div className="dropdown-end dropdown">
           <label tabIndex={0} className="btn-ghost btn-circle btn">
             <span className="w-10 rounded-full">
               <svg

pages/_app.tsx

@@ -3,10 +3,9 @@ import useUser from '@/hooks/useUser';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 
-import { Roboto } from 'next/font/google';
+import { Space_Grotesk } from 'next/font/google';
 
-const roboto = Roboto({
-  weight: ['100', '300', '400', '500', '700', '900'],
+const spaceGrotesk = Space_Grotesk({
   subsets: ['latin'],
 });
 
@@ -18,7 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <style jsx global>
         {`
           html {
-            font-family: ${roboto.style.fontFamily};
+            font-family: ${spaceGrotesk.style.fontFamily};
           }
         `}
       </style>

pages/login/index.tsx

@@ -19,16 +19,16 @@ const LoginPage: NextPage = () => {
       </Head>
 
       <div className="flex h-full flex-row">
-        <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[60%]">
+        <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
           <Image
-            src="https://picsum.photos/1040/1080"
+            src="https://picsum.photos/5000/5000"
             alt="Login Image"
             width={4920}
             height={4080}
             className="h-full w-full object-cover"
           />
         </div>
-        <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]">
+        <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[45%]">
           <div className="w-10/12 space-y-5 sm:w-9/12">
             <div className=" flex flex-col items-center space-y-2">
               <FaUserCircle className="text-3xl" />

prisma/DBClient.ts

@@ -1,5 +1,5 @@
-import { NODE_ENV } from '@/config/env';
 import { PrismaClient } from '@prisma/client';
+import { NODE_ENV } from '../config/env';
 
 const globalForPrisma = global as unknown as { prisma: PrismaClient };
 

prisma/seed/create/createNewBeerImages.ts

@@ -23,7 +23,7 @@ const createNewBeerImages = async ({
     beerImagesPromises.push(
       prisma.beerImage.create({
         data: {
-          path: 'https://picsum.photos/1040/1080',
+          path: 'https://picsum.photos/5000/5000',
           alt: 'Placeholder beer image.',
           caption: 'Placeholder beer image caption.',
           beerPost: { connect: { id: beerPost.id } },

prisma/seed/create/createNewBreweryImages.ts

@@ -27,7 +27,7 @@ const createNewBreweryImages = async ({
     breweryImagesPromises.push(
       prisma.breweryImage.create({
         data: {
-          path: 'https://picsum.photos/1040/1080',
+          path: 'https://picsum.photos/5000/5000',
           alt: 'Placeholder brewery image.',
           caption: 'Placeholder brewery image caption.',
           breweryPost: { connect: { id: breweryPost.id } },