Update theme colors and layout styles, upgrade daisyui/tailwind

src/components/Account/UpdateProfileLink.tsx

@@ -5,7 +5,7 @@ import { FaArrowRight } from 'react-icons/fa';
 
 const UpdateProfileLink: React.FC = () => {
   return (
-    <div className="card mt-8">
+    <div className="card">
       <div className="card-body flex flex-col space-y-3">
         <div className="flex w-full items-center justify-between space-x-5">
           <div className="">

src/components/Account/UserPosts.tsx

@@ -8,11 +8,9 @@ const UserPosts: FC = () => {
     <div className="mt-4">
       <div>
         <Tab.Group>
-          <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-            <Tab className="tab-xl tab w-1/2 uppercase ui-selected:tab-active">Beers</Tab>
-            <Tab className="tab-xl tab w-1/2 uppercase ui-selected:tab-active">
-              Breweries
-            </Tab>
+          <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+            <Tab className="tab uppercase ui-selected:tab-active">Beers</Tab>
+            <Tab className="tab uppercase ui-selected:tab-active">Breweries</Tab>
           </Tab.List>
           <Tab.Panels>
             <Tab.Panel>

src/components/BreweryPost/CreateBreweryPostForm.tsx

@@ -250,13 +250,9 @@ const CreateBreweryPostForm: FC<{
       autoComplete="off"
     >
       <Tab.Group as={Fragment}>
-        <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-          <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-            Information
-          </Tab>
-          <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-            Location
-          </Tab>
+        <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+          <Tab className="tab uppercase ui-selected:tab-active">Information</Tab>
+          <Tab className="tab uppercase ui-selected:tab-active">Location</Tab>
         </Tab.List>
         <Tab.Panels className="mt-4">
           <Tab.Panel>

src/components/ui/Layout.tsx

@@ -3,13 +3,10 @@ import Navbar from './Navbar';
 
 const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <div className="flex h-screen flex-col">
+    <div className="flex h-full flex-col" id="app">
       <Navbar />
-      <div className="top-0 h-full w-screen flex-1 overflow-x-auto animate-in fade-in">
-        {children}
-      </div>
+      {children}
     </div>
   );
 };
-
 export default Layout;

src/components/ui/Navbar.tsx

@@ -3,9 +3,11 @@ import useNavbar from '@/hooks/utilities/useNavbar';
 import useTheme from '@/hooks/utilities/useTheme';
 
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { MdDarkMode, MdLightMode } from 'react-icons/md';
-import { GiHamburgerMenu } from 'react-icons/gi';
+
+import { FaBars } from 'react-icons/fa';
+import classNames from 'classnames';
 
 const DesktopLinks: FC = () => {
   const { pages, currentURL } = useNavbar();
@@ -19,8 +21,8 @@ const DesktopLinks: FC = () => {
               <Link tabIndex={0} href={page.slug} className="hover:bg-primary-focus">
                 <span
                   className={`text-lg uppercase ${
-                    currentURL === page.slug ? 'font-black' : 'font-medium'
-                  } text-primary-content`}
+                    currentURL === page.slug ? 'font-extrabold' : 'font-bold'
+                  } text-base-content`}
                 >
                   {page.name}
                 </span>
@@ -35,24 +37,44 @@ const DesktopLinks: FC = () => {
 
 const MobileLinks: FC = () => {
   const { pages } = useNavbar();
+
+  const drawerRef = useRef<HTMLInputElement>(null);
   return (
     <div className="flex-none lg:hidden">
-      <div className="dropdown-end dropdown">
-        <label tabIndex={0} className="btn btn-circle btn-ghost">
-          <GiHamburgerMenu />
-        </label>
-        <ul
-          tabIndex={0}
-          className="menu-compact menu dropdown-content rounded-box mt-3 w-48 bg-base-100 p-2 shadow"
-        >
-          {pages.map((page) => (
-            <li key={page.slug}>
-              <Link href={page.slug}>
-                <span className="select-none text-primary-content">{page.name}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
+      <div className="drawer drawer-end">
+        <input id="my-drawer" type="checkbox" className="drawer-toggle" ref={drawerRef} />
+        <div className="drawer-content">
+          <label htmlFor="my-drawer" className="btn btn-ghost drawer-button">
+            <FaBars />
+          </label>
+        </div>
+        <div className="drawer-side">
+          <label
+            htmlFor="my-drawer"
+            aria-label="close sidebar"
+            className="drawer-overlay"
+          />
+          <ul className="menu min-h-full bg-primary pr-16 text-base-content">
+            {pages.map((page) => {
+              return (
+                <li key={page.slug}>
+                  <Link
+                    href={page.slug}
+                    tabIndex={0}
+                    rel={page.slug === '/resume/main.pdf' ? 'noopener noreferrer' : ''}
+                    target={page.slug === '/resume/main.pdf' ? '_blank' : ''}
+                    onClick={() => {
+                      if (!drawerRef.current) return;
+                      drawerRef.current.checked = false;
+                    }}
+                  >
+                    <span className="text-lg font-bold uppercase">{page.name}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
       </div>
     </div>
   );
@@ -62,13 +84,21 @@ const Navbar = () => {
   const isDesktopView = useMediaQuery('(min-width: 1024px)');
 
   const { theme, setTheme } = useTheme();
+  const { currentURL } = useNavbar();
 
   return (
-    <div className="navbar sticky top-0 z-50 bg-primary text-primary-content">
+    <div
+      className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
+        'bg-transparent': currentURL === '/',
+        'bg-base-100': currentURL !== '/',
+      })}
+    >
       <div className="flex-1">
-        <Link className="btn btn-ghost normal-case" href="/">
-          <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
-        </Link>
+        {currentURL === '/' ? null : (
+          <Link className="btn btn-ghost btn-sm" href="/">
+            <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
+          </Link>
+        )}
       </div>
 
       <div

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

@@ -74,13 +74,9 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
               </div>
             ) : (
               <Tab.Group>
-                <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-                  <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-                    Comments
-                  </Tab>
-                  <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-                    Other Beers
-                  </Tab>
+                <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+                  <Tab className="tab uppercase ui-selected:tab-active">Comments</Tab>
+                  <Tab className="tab uppercase ui-selected:tab-active">Other Beers</Tab>
                 </Tab.List>
                 <Tab.Panels className="mt-2">
                   <Tab.Panel>

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

@@ -41,11 +41,9 @@ const BeerStyleByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
               </div>
             ) : (
               <Tab.Group>
-                <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-                  <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-                    Comments
-                  </Tab>
-                  <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
+                <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+                  <Tab className="tab uppercase ui-selected:tab-active">Comments</Tab>
+                  <Tab className="tab uppercase ui-selected:tab-active">
                     Beers in this Style
                   </Tab>
                 </Tab.List>

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

@@ -85,11 +85,11 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
                   token={mapboxToken}
                 />
                 <Tab.Group>
-                  <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
+                  <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+                    <Tab className="tab-md tab w-1/2 uppercase ui-selected:tab-active">
                       Comments
                     </Tab>
-                    <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
+                    <Tab className="tab-md tab w-1/2 uppercase ui-selected:tab-active">
                       Beers
                     </Tab>
                   </Tab.List>

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { NextPage } from 'next';
 import Head from 'next/head';
+import Image from 'next/image';
 
 const keywords = [
   'beer',
@@ -29,7 +30,7 @@ const keywords = [
   'beer recipes',
 ];
 
-const description = `The Biergarten App is an app for beer lovers to share their favourite brews and breweries with like-minded people online.`;
+const description = `An app for beer lovers to share their favourite brews and breweries with like-minded people online.`;
 
 const Home: NextPage = () => {
   return (
@@ -39,13 +40,17 @@ const Home: NextPage = () => {
         <meta name="description" content={description} />
         <meta name="keywords" content={keywords.join(', ')} />
       </Head>
-
-      <div className="flex h-full w-full items-center justify-center bg-primary">
-        <div className="w-9/12 text-center lg:w-8/12">
-          <h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-8xl">
-            The Biergarten App
-          </h1>
-          <p className="mt-4 text-lg lg:text-2xl">{description}</p>
+      <div className="relative flex h-dvh w-full flex-col items-center justify-center">
+        <Image
+          alt=""
+          src="/background.jpg"
+          height={4015}
+          width={6035}
+          className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
+        />
+        <div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
+          <h1 className="text-8xl font-extrabold">The Biergarten App</h1>
+          <p className="text-3xl font-bold">{description}</p>
         </div>
       </div>
     </>

src/pages/login/index.tsx

@@ -18,8 +18,8 @@ const LoginPage: NextPage = () => {
         <meta name="description" content="Login to your account" />
       </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-[55%]">
+      <div className="flex h-screen flex-row">
+        <div className="hidden h-dvh flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
           <CldImage
             src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
             alt="Login Image"
@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
             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-[45%]">
+        <div className="flex min-h-dvh w-full flex-col items-center justify-center bg-base-100 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" />

src/pages/users/[id].tsx

@@ -25,7 +25,7 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
         <meta name="description" content="User information" />
       </Head>
       <>
-        <main className="mb-12 mt-10 flex w-full flex-col items-center justify-center">
+        <main className="mb-12 mt-16 flex w-full flex-col items-center justify-center">
           <div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
             <UserHeader user={user} />
           </div>

src/pages/users/account/index.tsx

@@ -33,7 +33,7 @@ const AccountPage: NextPage = () => {
           content="Your account page. Here you can view your account information, change your settings, and view your posts."
         />
       </Head>
-      <div className="flex flex-col items-center">
+      <div className="mt-10 flex min-h-dvh flex-col items-center">
         <div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-8/12">
           <div className="flex flex-col items-center space-y-3">
             <div className="mb-1 h-28 w-28">
@@ -48,22 +48,18 @@ const AccountPage: NextPage = () => {
 
           <div className="h-full w-full">
             <Tab.Group>
-              <Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
-                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-                  Account
-                </Tab>
-                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
-                  Your Posts
-                </Tab>
+              <Tab.List className="tabs-boxed tabs grid grid-cols-2">
+                <Tab className="tab uppercase ui-selected:tab-active">Account</Tab>
+                <Tab className="tab uppercase ui-selected:tab-active">Your Posts</Tab>
               </Tab.List>
               <Tab.Panels>
-                <Tab.Panel className="h-full space-y-5">
+                <Tab.Panel className="mt-3 h-full space-y-3">
                   <UpdateProfileLink />
                   <AccountInfo pageState={pageState} dispatch={dispatch} />
                   <Security pageState={pageState} dispatch={dispatch} />
                   <DeleteAccount pageState={pageState} dispatch={dispatch} />
                 </Tab.Panel>
-                <Tab.Panel className="h-full space-y-5">
+                <Tab.Panel className="h-full">
                   <UserPosts />
                 </Tab.Panel>
               </Tab.Panels>

src/pages/users/current.tsx

@@ -22,7 +22,7 @@ const ProtectedPage: NextPage = () => {
       <Head>
         <title>Hello! | The Biergarten App</title>
       </Head>
-      <div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
+      <div className="h-dvh flex flex-col items-center justify-center space-y-3 bg-base-100 text-center">
         {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
         {user && !isLoading && (
           <>