From 77d1f4a37a8238033c25a1f5f5b1ba36c16de63f Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 13 Jul 2023 20:42:04 -0400
Subject: [PATCH] small improvement

---
 pages/forgot.tsx | 55 ++++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/pages/forgot.tsx b/pages/forgot.tsx
index ee7cd46..5d5557d 100644
--- a/pages/forgot.tsx
+++ b/pages/forgot.tsx
@@ -1,5 +1,6 @@
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -38,27 +39,35 @@ export default function Forgot() {
 
   return (
     <>
-      <p className="text-xl font-bold text-center text-sky-500 mt-10 mb-3">
-        Linkwarden
-      </p>
-      <div className="p-5 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <div className="my-5 text-center">
-          <p className="text-3xl font-bold text-sky-500">Password reset</p>
+      <div className="p-5 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+        <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
+          <Image
+            src="/linkwarden.png"
+            width={1694}
+            height={483}
+            alt="Linkwarden"
+            className="h-12 w-fit"
+          />
+          <div className="text-center sm:text-right">
+            <p className="text-3xl font-bold text-sky-500">Password Reset</p>
+          </div>
         </div>
 
-        <p className="text-sm text-sky-500 w-fit font-semibold">Email</p>
+        <div>
+          <p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p>
 
-        <input
-          type="text"
-          placeholder="johnny@example.com"
-          value={form.email}
-          onChange={(e) => setForm({ ...form, email: e.target.value })}
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
-
-        <p className="text-md text-gray-500">
-          Make sure to change your password in the profile settings afterwards.
-        </p>
+          <input
+            type="text"
+            placeholder="johnny@example.com"
+            value={form.email}
+            onChange={(e) => setForm({ ...form, email: e.target.value })}
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          />
+          <p className="text-md text-gray-500 mt-1">
+            Make sure to change your password in the profile settings
+            afterwards.
+          </p>
+        </div>
 
         <SubmitButton
           onClick={loginUser}
@@ -66,11 +75,11 @@ export default function Forgot() {
           className="mt-2 w-full text-center"
           loading={submitLoader}
         />
-      </div>
-      <div className="flex items-baseline gap-1 justify-center my-3">
-        <Link href={"/login"} className="block text-sky-500 font-bold">
-          Go back
-        </Link>
+        <div className="flex items-baseline gap-1 justify-center">
+          <Link href={"/login"} className="block text-sky-500 font-bold">
+            Go back
+          </Link>
+        </div>
       </div>
     </>
   );