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,13 +62,18 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
             </div>
           )}
         </header>
-        <div className="space-y-2">
+        <div>
           <p>{beerStyle.description}</p>
+        </div>
+
+        <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>
-                {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}%
+                  {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}
+                  %
                 </span>
               </div>
               <div className="text-sm font-bold">
@@ -78,7 +83,6 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
                 </span>
               </div>
             </div>
-
             <div className="font-semibold">
               Recommended Glassware:{' '}
               <span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
@@ -92,6 +96,8 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
                   </span>
                 )}
               </div>
+            </div>
+          </div>
           <div className="card-actions items-end">
             {user && (
               <BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
@@ -99,7 +105,6 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
           </div>
         </div>
       </div>
-      </div>
     </article>
   );
 };

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>

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%)',