better layout + improvements

pages/confirmation.tsx

@@ -1,25 +1,27 @@
-import { signIn } from "next-auth/react";
+import CenteredForm from "@/layouts/CenteredForm";
+import Link from "next/link";
 import React from "react";
 
 export default function EmailConfirmaion() {
   return (
-    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-      <div className="mx-auto p-3 text-center rounded-xl border border-sky-100 shadow-lg bg-gray-100 text-sky-800">
-        <p className="text-center text-2xl mb-2">Please check your email</p>
+    <CenteredForm>
+      <div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
+        <p className="text-center text-xl font-bold mb-2 text-black">
+          Please check your Email
+        </p>
         <p>A sign in link has been sent to your email address.</p>
         <p>You can safely close this page.</p>
-        {/* <div
-          onClick={() =>
-            signIn("email", {
-              email: email,
-              redirect: false,
-            })
-          }
-          className="mx-auto font-semibold mt-2 cursor-pointer w-fit"
-        >
-          Resend?
-        </div> */}
+
+        <hr className="my-5" />
+
+        <p className="text-sm text-gray-500 ">
+          If you didn't recieve anything, go to the{" "}
+          <Link href="/forgot" className="font-bold">
+            Password Recovery
+          </Link>{" "}
+          page and enter your Email to resend the sign in link.
+        </p>
       </div>
-    </div>
+    </CenteredForm>
   );
 }