Change font, add meta title/desc to 404 page

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>

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>

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"

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('');