From c40a81c4eeaf533938db57730d12e2a9eec13fa7 Mon Sep 17 00:00:00 2001
From: mohit-bhandari45 <mohitbhandari852@gmail.com>
Date: Tue, 11 Jun 2024 11:02:56 +0530
Subject: [PATCH] Fixed the login page

---
 src/components/Form.jsx   | 30 +++++++++++++++---------------
 src/components/Header.jsx |  4 ++--
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/Form.jsx b/src/components/Form.jsx
index 5b4f97e..8926fa5 100644
--- a/src/components/Form.jsx
+++ b/src/components/Form.jsx
@@ -50,15 +50,15 @@ function Form({ title, fields, type = 'login', btnClick, signInWithGoogleFun })
 
     return (
         <>
-            <div className='relative min-h-screen flex items-center justify-center bg-bgcolor px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover z-5 '>
+            <div className='relative h-[90vh] w-full flex items-center justify-center bg-bgcolor px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover z-5 '>
                 <div className='absolute bg-black opacity-60 inset-0 z-0'></div>
                 <div className='max-w-md w-full p-8 bg-white rounded-xl z-0'>
-                    {error && <p className='text-red mt-8 text-center'>{error}</p>}
+                    {error && <p className='text-red text-center'>{error}</p>}
                     <div className='text-center'>
-                        <h2 className='mt-6 text-3xl font-bold text-gray-900'>{title}</h2>
-                        <p className='mt-2 text-sm text-gray-600'>Please sign in to your account</p>
+                        <h2 className='text-3xl font-bold text-gray-900 font-[Helvetica]'>{title}</h2>
+                        <p className='mt-2 text-sm text-gray-600 font-[Helvetica]'>Please sign in to your account</p>
                     </div>
-                    <div className='flex flex-row justify-center items-center space-x-3 m-5'>
+                    <div className='flex flex-row justify-center items-center space-x-3 py-4'>
                         <span
                             className='w-11 h-11 items-center justify-center inline-flex rounded-full font-bold text-lg  text-white  bg-blue-900 hover:shadow-lg cursor-pointer transition ease-in duration-300'
                             onClick={handleSignWithGoogle}
@@ -66,14 +66,14 @@ function Form({ title, fields, type = 'login', btnClick, signInWithGoogleFun })
                             <img className='w-16 h-16' src='/google.svg' />
                         </span>
                     </div>
-                    <div className='flex items-center justify-center space-x-2'>
-                        <span className='h-px w-16 bg-gray-300'></span>
-                        <span className='text-gray-500 font-normal'>OR</span>
-                        <span className='h-px w-16 bg-gray-300'></span>
+                    <div className='flex items-center justify-center w-full h-5'>
+                        <div className='w-[45%] h-[1px] bg-bgcolor rounded-full'></div>
+                        <div className='text-gray-500 font-semibold flex justify-center h-full pb-1 items-center w-[10%]'>or</div>
+                        <div className='w-[45%] h-[1px] bg-bgcolor rounded-full'></div>
                     </div>
-                    <form className='mt-8 space-y-6' onSubmit={handleSubmit(submitForm)}>
+                    <form className='space-y-6' onSubmit={handleSubmit(submitForm)}>
                         {fields.map((element, index) => (
-                            <div className='mt-8 content-center' key={index}>
+                            <div className='mt-8 content-center font-[Helvetica]' key={index}>
                                 <label className='text-sm font-bold text-gray-700 tracking-wide'>{element.label}</label>
                                 <input
                                     id={element.field}
@@ -91,18 +91,18 @@ function Form({ title, fields, type = 'login', btnClick, signInWithGoogleFun })
                             ) : (
                                 <button
                                     type='submit'
-                                    className='w-full flex justify-center bg-blue text-white p-4 mt-10 rounded-full tracking-wide
-                                font-semibold  focus:outline-none focus:shadow-outline hover:bg-dark-blue shadow-lg cursor-pointer transition ease-in duration-300'
+                                    className='w-full flex font-bold text-xl justify-center bg-blue text-white p-3 rounded-xl tracking-wide
+                                font-[Helvetica] focus:outline-none focus:shadow-outline hover:bg-dark-blue shadow-lg cursor-pointer transition ease-in duration-300'
                                 >
                                     {type == 'login' ? 'Login' : 'Sign up'}
                                 </button>
                             )}
                         </div>
-                        <p className='flex flex-col items-center justify-center mt-10 text-center text-md text-gray-500'>
+                        <p className='flex gap-2 items-center justify-center mt-10 text-center text-md text-gray-500 font-[Helvetica]'>
                             <span>{type == 'login' ? "Don't have an account?" : 'Alrady have an account?'}</span>
                             <Link
                                 to={type == 'login' ? '/signup' : '/login'}
-                                className='text-indigo-500 hover:text-indigo-500no-underline hover:underline cursor-pointer transition ease-in duration-300'
+                                className='text-blue hover:text-dark-blue text-md font-bold transition-all duration-100 hover:underline cursor-pointer ease-in-out'
                             >
                                 {type == 'login' ? 'Sign up' : 'Login'}
                             </Link>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 6b7e742..181cbd2 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -44,7 +44,7 @@ function Header() {
     
 
     return (
-        <header className='flex flex-col'>
+        <header className='flex flex-col font-[Helvetica]'>
             <nav className='w-full flex items-center px-5 py-5 lg:px-10 lg:py-5'>
                 <div className='mr-4 flex grow-0 items-center justify-between'>
                     <Link to='/'>
@@ -59,7 +59,7 @@ function Header() {
                                 key={item.name}
                                 to={item.url}
                                 className={({ isActive }) =>
-                                    ` cursor-pointer text-xl font-medium f mx-4 ${
+                                    ` cursor-pointer hover:scale-105 transition-all duration-300 ease-in-out text-xl font-medium f mx-4 ${
                                         isActive ? 'text-blue' : 'text-white'
                                     } border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
                                 }