style: Update dark theming and fonts

src/components/BeerById/BeerRecommendations.tsx

@@ -57,7 +57,7 @@ const BeerRecommendationsSection: FC<{
                   >
                     <div className="flex flex-col">
                       <Link className="link-hover link" href={`/beers/${post.id}`}>
-                        <span className="text-xl font-semibold">{post.name}</span>
+                        <span className="text-xl font-bold">{post.name}</span>
                       </Link>
 
                       <Link
@@ -74,7 +74,7 @@ const BeerRecommendationsSection: FC<{
                           className="link link-hover"
                           href={`/beers/styles/${post.style.id}`}
                         >
-                          <span className="text-lg font-medium">{post.style.name}</span>
+                          <span className="font-medium">{post.style.name}</span>
                         </Link>
                       </div>
                       <div className="space-x-2">

src/components/BeerStyleById/BeerStyleHeader.tsx

@@ -62,41 +62,46 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
             </div>
           )}
         </header>
-        <div className="space-y-2">
+        <div>
           <p>{beerStyle.description}</p>
-          <div className="flex w-25 space-x-3 flex-row">
-            <div className="text-sm font-bold">
-              ABV Range:{' '}
-              <span>
-                {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}%
-              </span>
-            </div>
-            <div className="text-sm font-bold">
-              IBU Range:{' '}
-              <span>
-                {beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
-              </span>
-            </div>
-          </div>
+        </div>
 
-          <div className="font-semibold">
-            Recommended Glassware:{' '}
-            <span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
-          </div>
-          <div className="flex justify-between">
-            <div>
-              {(!!likeCount || likeCount === 0) && (
+        <div className="flex justify-between">
+          <div className="space-y-2">
+            <div className="flex w-25 space-x-3 flex-row">
+              <div className="text-sm font-bold">
+                ABV Range:{' '}
                 <span>
-                  Liked by {likeCount}
-                  {likeCount !== 1 ? ' users' : ' user'}
+                  {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}
+                  %
                 </span>
-              )}
+              </div>
+              <div className="text-sm font-bold">
+                IBU Range:{' '}
+                <span>
+                  {beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
+                </span>
+              </div>
             </div>
-            <div className="card-actions items-end">
-              {user && (
-                <BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
-              )}
+            <div className="font-semibold">
+              Recommended Glassware:{' '}
+              <span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
             </div>
+            <div className="flex justify-between">
+              <div>
+                {(!!likeCount || likeCount === 0) && (
+                  <span>
+                    Liked by {likeCount}
+                    {likeCount !== 1 ? ' users' : ' user'}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="card-actions items-end">
+            {user && (
+              <BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
+            )}
           </div>
         </div>
       </div>

src/pages/_app.tsx

@@ -4,15 +4,14 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { useEffect } from 'react';
 import { themeChange } from 'theme-change';
-
 import { Analytics } from '@vercel/analytics/react';
 
-import { Space_Grotesk } from 'next/font/google';
+import { Nunito_Sans } from 'next/font/google';
 import Head from 'next/head';
 import Layout from '@/components/ui/Layout';
 import CustomToast from '@/components/ui/CustomToast';
 
-const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] });
+const font = Nunito_Sans({ subsets: ['latin-ext'] });
 
 const App = ({ Component, pageProps }: AppProps) => {
   useEffect(() => {
@@ -24,7 +23,7 @@ const App = ({ Component, pageProps }: AppProps) => {
       <style jsx global>
         {`
           html {
-            font-family: ${spaceGrotesk.style.fontFamily};
+            font-family: ${font.style.fontFamily};
           }
         `}
       </style>