Update navbar, implement useNavbar hook, style updates

- Created a custom hook that returns an object with pages depending on user auth. This is a refactor of the logic found in the navbar component.
- Updated styles for card components
- Fix font size issues for mobile.
- Update theming to include a new pastel theme.

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

@@ -29,7 +29,7 @@ interface BeerPageProps {
 }
 
 const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
-  const isMd = useMediaQuery('(min-width: 768px)');
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
 
   return (
     <>
@@ -64,7 +64,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
             <div className="w-11/12 space-y-3 xl:w-9/12">
               <BeerInfoHeader beerPost={beerPost} />
 
-              {isMd ? (
+              {isDesktop ? (
                 <div className="mt-4 flex flex-row space-x-3 space-y-0">
                   <div className="w-[60%]">
                     <BeerPostCommentsSection beerPost={beerPost} />
@@ -75,12 +75,12 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
                 </div>
               ) : (
                 <Tab.Group>
-                  <Tab.List className="card flex flex-row bg-base-300">
-                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
+                  <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl bg-base-300">
+                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
                       Comments
                     </Tab>
-                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
-                      Recommendations
+                    <Tab className="tab tab-lg w-1/2 uppercase ui-selected:tab-active">
+                      Other Beers
                     </Tab>
                   </Tab.List>
                   <Tab.Panels className="mt-2">

src/pages/user/current.tsx

@@ -5,29 +5,33 @@ import UserContext from '@/contexts/userContext';
 
 import { GetServerSideProps, NextPage } from 'next';
 import { useContext } from 'react';
+import useMediaQuery from '@/hooks/useMediaQuery';
 
 const ProtectedPage: NextPage = () => {
   const { user, isLoading } = useContext(UserContext);
 
   const currentTime = new Date().getHours();
 
-  const isMorning = currentTime > 4 && currentTime < 12;
-  const isAfternoon = currentTime > 12 && currentTime < 18;
-  const isEvening = (currentTime > 18 && currentTime < 24) || currentTime < 4;
+  const isMorning = currentTime >= 3 && currentTime < 12;
+  const isAfternoon = currentTime >= 12 && currentTime < 18;
+  const isEvening = currentTime >= 18 || currentTime < 3;
 
+  const isDesktop = useMediaQuery('(min-width: 768px)');
   return (
     <Layout>
-      <div className="flex h-full flex-col items-center justify-center space-y-3">
-        {isLoading && <Spinner size="xl" />}
-        {user && (
+      <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
+        {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
+        {user && !isLoading && (
           <>
-            <h1 className="text-7xl font-bold">
+            <h1 className="text-2xl font-bold lg:text-7xl">
               Good {isMorning && 'morning'}
               {isAfternoon && 'afternoon'}
               {isEvening && 'evening'}
               {`, ${user?.firstName}!`}
             </h1>
-            <h2 className="text-4xl font-bold">Welcome to the Biergarten App!</h2>
+            <h2 className="text-xl font-bold lg:text-4xl">
+              Welcome to the Biergarten App!
+            </h2>
           </>
         )}
       </div>