From 6f604b9768c004100fabe351c9d5e26a4f306a2d Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Mon, 20 Feb 2023 22:57:00 -0500
Subject: [PATCH] Change font, add meta title/desc to 404 page

---
 components/BeerById/CommentCard.tsx | 48 +++++++++++++++++++----------
 components/Login/LoginForm.tsx      |  2 +-
 components/ui/Navbar.tsx            |  4 +--
 components/ui/alerts/ErrorAlert.tsx |  2 +-
 pages/404.tsx                       |  5 +++
 pages/beers/[id].tsx                |  2 +-
 pages/login/index.tsx               | 18 ++++++++---
 styles/globals.css                  |  8 +++++
 tailwind.config.js                  |  7 +++--
 9 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/components/BeerById/CommentCard.tsx b/components/BeerById/CommentCard.tsx
index 7d5712b..bd2cd4c 100644
--- a/components/BeerById/CommentCard.tsx
+++ b/components/BeerById/CommentCard.tsx
@@ -1,5 +1,6 @@
 import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
-import { formatDistanceStrict } from 'date-fns';
+import { format, formatDistanceStrict } from 'date-fns';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { Rating } from 'react-daisyui';
 
@@ -13,23 +14,38 @@ const CommentCard: React.FC<{
   }, [comment.createdAt]);
 
   return (
-    <div className="card-body h-64">
-      <div className="flex justify-between">
+    <div className="card-body sm:h-64">
+      <div className="flex flex-col justify-between sm:flex-row">
         <div>
-          <h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
-          <h4 className="italic">posted {timeDistance} ago</h4>
+          <h3 className="font-semibold sm:text-2xl">
+            <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
+              {comment.postedBy.username}
+            </Link>
+          </h3>
+          <h4 className="italic">
+            posted{' '}
+            <time
+              className="tooltip tooltip-bottom"
+              data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
+            >
+              {timeDistance}
+            </time>{' '}
+            ago
+          </h4>
+        </div>
+        <div>
+          <Rating value={comment.rating}>
+            {Array.from({ length: 5 }).map((val, index) => (
+              <Rating.Item
+                name="rating-1"
+                className="mask mask-star cursor-default"
+                disabled
+                aria-disabled
+                key={index}
+              />
+            ))}
+          </Rating>
         </div>
-        <Rating value={comment.rating}>
-          {Array.from({ length: 5 }).map((val, index) => (
-            <Rating.Item
-              name="rating-1"
-              className="mask mask-star cursor-default"
-              disabled
-              aria-disabled
-              key={index}
-            />
-          ))}
-        </Rating>
       </div>
       <p>{comment.content}</p>
     </div>
diff --git a/components/Login/LoginForm.tsx b/components/Login/LoginForm.tsx
index 722bc35..ca9ec9d 100644
--- a/components/Login/LoginForm.tsx
+++ b/components/Login/LoginForm.tsx
@@ -74,7 +74,7 @@ const LoginForm = () => {
 
       {responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
       <div className="w-full">
-        <button type="submit" className="btn-primary btn w-full">
+        <button type="submit" className="btn btn-primary w-full">
           Login
         </button>
       </div>
diff --git a/components/ui/Navbar.tsx b/components/ui/Navbar.tsx
index a329b6b..0e69453 100644
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -44,7 +44,7 @@ const Navbar = () => {
   return (
     <nav className="navbar bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
+        <Link className="btn btn-ghost text-3xl normal-case" href="/">
           <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
         </Link>
       </div>
@@ -69,7 +69,7 @@ const Navbar = () => {
       </div>
       <div className="flex-none lg:hidden">
         <div className="dropdown-end dropdown">
-          <label tabIndex={0} className="btn-ghost btn-circle btn">
+          <label tabIndex={0} className="btn btn-ghost btn-circle">
             <span className="w-10 rounded-full">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/components/ui/alerts/ErrorAlert.tsx b/components/ui/alerts/ErrorAlert.tsx
index 47049d2..617f1de 100644
--- a/components/ui/alerts/ErrorAlert.tsx
+++ b/components/ui/alerts/ErrorAlert.tsx
@@ -16,7 +16,7 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
 
       <div className="flex-none">
         <button
-          className="btn-ghost btn-sm btn"
+          className="btn btn-ghost btn-sm"
           type="button"
           onClick={() => {
             setError('');
diff --git a/pages/404.tsx b/pages/404.tsx
index 89cfb86..ffd4250 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -2,10 +2,15 @@
 
 import Layout from '@/components/ui/Layout';
 import { NextPage } from 'next';
+import Head from 'next/head';
 
 const NotFound: NextPage = () => {
   return (
     <Layout>
+      <Head>
+        <title>404 Page Not Found</title>
+        <meta name="description" content="404 Page Not Found" />
+      </Head>
       <div className="flex h-full flex-col items-center justify-center space-y-4">
         <h1 className="text-7xl font-bold">Error: 404</h1>
         <h2 className="text-xl font-bold">Page Not Found</h2>
diff --git a/pages/beers/[id].tsx b/pages/beers/[id].tsx
index 5dc5183..a1f9594 100644
--- a/pages/beers/[id].tsx
+++ b/pages/beers/[id].tsx
@@ -106,7 +106,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
                         Next Comments
                       </Link>
                       <Link
-                        className={`btn-outline btn ${
+                        className={`btn btn-outline ${
                           commentsPageNum === commentsPageCount
                             ? 'btn-disabled pointer-events-none'
                             : 'pointer-events-auto'
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index 44d8a27..dcff7fa 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -8,6 +8,7 @@ import Image from 'next/image';
 
 import { FaUserCircle } from 'react-icons/fa';
 import Head from 'next/head';
+import Link from 'next/link';
 
 const LoginPage: NextPage = () => {
   const { user } = useUser();
@@ -38,14 +39,23 @@ const LoginPage: NextPage = () => {
             className="h-full w-full object-cover"
           />
         </div>
-        <div className="flex h-full w-full flex-col items-center space-y-5 bg-base-300 lg:w-[40%]">
-          <div className="mt-44 w-9/12">
+        <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]">
+          <div className="w-10/12 space-y-5 sm:w-9/12">
             <div className=" flex flex-col items-center space-y-2">
               <FaUserCircle className="text-3xl" />
               <h1 className="text-4xl font-bold">Login</h1>
             </div>
-            <div className="mt-10">
-              <LoginForm />
+            <LoginForm />
+            <div className="mt-3 flex flex-col items-center space-y-1">
+              <Link href="/register" className="text-primary-500 link-hover link italic">
+                Don&apos;t have an account?
+              </Link>
+              <Link
+                href="/reset-password"
+                className="text-primary-500 link-hover link italic"
+              >
+                Forgot password?
+              </Link>
             </div>
           </div>
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..19156a0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Exo 2', sans-serif;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7e0ac46..01c5601 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
     extend: {},
   },
   plugins: [require('daisyui')],
+
   daisyui: {
     logs: false,
     themes: [
@@ -25,9 +26,9 @@ module.exports = {
           error: '#CF1259',
           'primary-content': '#FAF9F6',
           'error-content': '#FAF9F6',
-          'base-100': 'hsl(190, 4%, 15%)',
-          'base-200': 'hsl(190, 4%, 12%)',
-          'base-300': 'hsl(190, 4%, 10%)',
+          'base-100': 'hsl(190, 4%, 11%)',
+          'base-200': 'hsl(190, 4%, 9%)',
+          'base-300': 'hsl(190, 4%, 8%)',
         },
       },
     ],