Styling changes and refactor

Switch google fonts to use Next.js font optimization, animate comment fade in, and refactor beer like handler and comment submit handler.

pages/_app.tsx

@@ -3,12 +3,28 @@ import useUser from '@/hooks/useUser';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 
+import { Roboto } from 'next/font/google';
+
+const roboto = Roboto({
+  weight: ['100', '300', '400', '500', '700', '900'],
+  subsets: ['latin'],
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   const { user, isLoading, error } = useUser();
 
   return (
-    <UserContext.Provider value={{ user, isLoading, error }}>
-      <Component {...pageProps} />
-    </UserContext.Provider>
+    <>
+      <style jsx global>
+        {`
+          html {
+            font-family: ${roboto.style.fontFamily};
+          }
+        `}
+      </style>
+      <UserContext.Provider value={{ user, isLoading, error }}>
+        <Component {...pageProps} />
+      </UserContext.Provider>
+    </>
   );
 }