Feat: improve login page ux (#159)

frontend/app/login/page.tsx

@@ -7,13 +7,11 @@ import { useSupabase } from "../supabase-provider";
 import { redirect } from "next/navigation";
 import Link from "next/link";
 
-
 export default function Login() {
   const { supabase } = useSupabase();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
-
   const handleLogin = async () => {
     const { data, error } = await supabase.auth.signInWithPassword({
       email: email,
@@ -32,7 +30,7 @@ export default function Login() {
   return (
     <main>
       <section className="w-full outline-none pt-20 flex flex-col gap-5 items-center justify-center p-6">
-        <PageHeading title="Login" subtitle="Welcome back"/>
+        <PageHeading title="Login" subtitle="Welcome back" />
         <Card className="w-1/2 flex justify-center items-center">
           <div className="text-center mt-2 p-6 max-w-sm w-full flex flex-col gap-5 items-center">
             <input
@@ -40,20 +38,20 @@ export default function Login() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Email"
-              className="text-center"
+              className="w-full py-2 px-4 rounded-md border border-gray-300 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             />
+
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="Password"
-              className="text-center"
+              className="w-full py-2 px-4 rounded-md border border-gray-300 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent mt-2"
             />
-            <div className="flex justify-center gap-3">
+            <div className="grid place-items-center gap-3">
               <Button onClick={handleLogin}>Login</Button>
-              <Link href="/signup">Dont have an account? Sign up</Link>
+              <Link href="/signup">{"Don't have an account? Sign up"}</Link>
             </div>
-            
           </div>
         </Card>
       </section>