From aef588c99332de077b272bb110594c7ea73bd81e Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Mon, 23 Oct 2023 23:16:31 -0400
Subject: [PATCH] style: Update dark theming and fonts

---
 .../BeerById/BeerRecommendations.tsx          |  4 +-
 .../BeerStyleById/BeerStyleHeader.tsx         | 63 ++++++++++---------
 src/pages/_app.tsx                            |  7 +--
 tailwind.config.js                            |  8 +--
 4 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/BeerById/BeerRecommendations.tsx b/src/components/BeerById/BeerRecommendations.tsx
index bff261f..9564443 100644
--- a/src/components/BeerById/BeerRecommendations.tsx
+++ b/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">
diff --git a/src/components/BeerStyleById/BeerStyleHeader.tsx b/src/components/BeerStyleById/BeerStyleHeader.tsx
index 342a759..0fb92ff 100644
--- a/src/components/BeerStyleById/BeerStyleHeader.tsx
+++ b/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>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 84c8745..2bbbb6b 100644
--- a/src/pages/_app.tsx
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index d2b1d0e..4b1ae65 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 
 const myThemes = {
   dark: {
-    primary: 'hsl(227, 25%, 30%)',
+    primary: 'hsl(227, 25%, 14%)',
     secondary: 'hsl(255, 9%, 69%)',
     error: 'hsl(9, 52%, 57%)',
     accent: 'hsl(316, 96%, 60%)',
@@ -12,9 +12,9 @@ const myThemes = {
     warning: 'hsl(50, 98%, 50%)',
     'primary-content': 'hsl(0, 0%, 98%)',
     'error-content': 'hsl(0, 0%, 98%)',
-    'base-100': 'hsl(227, 20%, 15%)',
-    'base-200': 'hsl(227, 20%, 11%)',
-    'base-300': 'hsl(227, 20%, 5%)',
+    'base-100': 'hsl(227, 20%, 10%)',
+    'base-200': 'hsl(227, 20%, 8%)',
+    'base-300': 'hsl(227, 20%, 1%)',
   },
   light: {
     primary: 'hsl(180, 15%, 60%)',