Update next.js to recent version, style updates

src/components/BeerIndex/BeerCard.tsx

@@ -13,18 +13,19 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
 
   return (
     <div className="card card-compact bg-base-300" key={post.id}>
-      <figure className="h-96">
-        {post.beerImages.length > 0 && (
-          <Image
-            src={post.beerImages[0].path}
-            alt={post.name}
-            width="3000"
-            height="3000"
-            className="h-full object-cover"
-          />
-        )}
-      </figure>
-
+      <Link href={`/beers/${post.id}`}>
+        <figure className="h-96">
+          {post.beerImages.length > 0 && (
+            <Image
+              src={post.beerImages[0].path}
+              alt={post.name}
+              width="3000"
+              height="3000"
+              className="h-full object-cover"
+            />
+          )}
+        </figure>
+      </Link>
       <div className="card-body justify-between">
         <div className="space-y-1">
           <Link href={`/beers/${post.id}`}>

src/components/BreweryIndex/BreweryCard.tsx

@@ -14,36 +14,43 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
   const { likeCount, mutate, isLoading } = useGetBreweryPostLikeCount(brewery.id);
   return (
     <div className="card" key={brewery.id}>
-      <figure className="card-image h-96">
-        {brewery.breweryImages.length > 0 && (
-          <Image
-            src={brewery.breweryImages[0].path}
-            alt={brewery.name}
-            width="1029"
-            height="110"
-          />
-        )}
-      </figure>
-      <div className="card-body">
-        <div>
-          <h2 className="mb-2 text-2xl font-bold lg:text-3xl">
-            <Link href={`/breweries/${brewery.id}`} className="link-hover link">
-              {brewery.name}
-            </Link>
-          </h2>
-          <h3 className="text-xl font-normal lg:text-2xl">
-            located in {brewery.location.city},{' '}
-            {brewery.location.stateOrProvince || brewery.location.country}
-          </h3>
-          <h4 className="text-lg lg:text-xl">
-            est. {brewery.dateEstablished.getFullYear()}
-          </h4>
-        </div>
-        <div className="flex justify-between">
-          {!isLoading && <span>liked by {likeCount} users</span>}
-          {!!user && !isLoading && (
-            <BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
+      <Link href={`/breweries/${brewery.id}`}>
+        <figure className="card-image h-96">
+          {brewery.breweryImages.length > 0 && (
+            <Image
+              src={brewery.breweryImages[0].path}
+              alt={brewery.name}
+              width="1029"
+              height="110"
+              className="h-full object-cover"
+            />
           )}
+        </figure>
+      </Link>
+      <div className="card-body justify-between">
+        <div>
+          <Link href={`/breweries/${brewery.id}`} className="link-hover link">
+            <h2 className="text-xl truncate font-bold lg:text-2xl">{brewery.name}</h2>
+          </Link>
+        </div>
+        <div className="flex items-end justify-between">
+          <div className="w-9/12">
+            <h3 className="text-lg font-semibold lg:text-xl truncate">
+              {brewery.location.city},{' '}
+              {brewery.location.stateOrProvince || brewery.location.country}
+            </h3>
+            <h4 className="text-lg font-semibold lg:text-xl">
+              est. {brewery.dateEstablished.getFullYear()}
+            </h4>
+            <div className="mt-2">
+              {!isLoading && <span>liked by {likeCount} users</span>}
+            </div>
+          </div>
+          <div>
+            {!!user && !isLoading && (
+              <BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/RegisterUserForm.tsx

@@ -28,9 +28,14 @@ const RegisterUserForm: FC = () => {
     data: z.infer<typeof CreateUserValidationSchemaWithUsernameAndEmailCheck>,
   ) => {
     try {
+      const loadingToast = toast.loading('Registering user...');
       await sendRegisterUserRequest(data);
       reset();
       router.push('/', undefined, { shallow: true });
+
+      toast.remove(loadingToast);
+
+      toast.success('User registered!');
     } catch (error) {
       createErrorToast({
         toast,

src/pages/account/index.tsx

@@ -9,6 +9,7 @@ import UserContext from '@/contexts/UserContext';
 import Security from '@/components/Account/Security';
 import DeleteAccount from '@/components/Account/DeleteAccount';
 import accountPageReducer from '@/reducers/accountPageReducer';
+import UserAvatar from '@/components/Account/UserAvatar';
 
 const AccountPage: NextPage = () => {
   const { user } = useContext(UserContext);
@@ -33,9 +34,7 @@ const AccountPage: NextPage = () => {
       <div className="flex flex-col items-center">
         <div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-7/12">
           <div className="flex flex-col items-center space-y-3">
-            <div className="avatar">
-              <div className="bg-base-black w-24 rounded-full bg-slate-700" />
-            </div>
+            <UserAvatar user={user} />
 
             <div className="flex flex-col items-center space-y-1">
               <p className="text-3xl font-bold">Hello, {user!.username}!</p>