Merge pull request Anjaliavv51#103 from AnujRathour/update/Improvemen…

…t-in-ui-of-signup-login-page Update/improvement in UI of signup login page
2004shweta · Oct 27, 2023 · 12a5fbb · 12a5fbb
2 parents d28b5ce + 0223cc0
commit 12a5fbb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/src/App.css b/src/App.css
@@ -12,6 +12,9 @@ html {
 .placeholder-text {
   @apply bg-primaryGreen rounded-2xl p-3 text-xs placeholder:text-[#4C4949];
 }
+.input-bar{
+  @apply border-2 border-green rounded-lg h-9 w-full text-green-dark placeholder-textBlack p-2;
+}
 
 .mb-0{
   margin-bottom: 0;

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -47,34 +47,36 @@ export default function Login() {
               onSubmit={handleSubmit}
               className="mt-5 space-y-5 w-[70%] md:w-[50%] lg:w-[60%]"
             >
-              <Input
+              <input
                 title="Email"
                 name="email"
                 value={form.email}
                 type="email"
                 placeholder="E-mail Address"
                 onChange={handleChange}
+                className="input-bar"
               />
-              <Input
+              <input
                 title="Password"
                 name="password"
                 value={form.password}
                 type="password"
                 placeholder="Password"
                 onChange={handleChange}
+                className="input-bar"
               />
 
               <Link
                 to="#"
                 className="float-right relative bottom-3 text-green hover:underline"
               >
-                Forget Password?
+                Forgot Password?
               </Link>
 
               <div className="">
                 <button
                   type="submit"
-                  className="bg-primaryGreen w-full py-1.5 rounded-xl focus:shadow-md hover:bg-primaryGreen/80 text-textWhite font-semibold "
+                  className="border-2 border-green rounded-lg h-10 bg-primaryGreen w-full py-1.5 rounded-xl focus:shadow-md hover:bg-primaryGreen/80 text-textWhite font-semibold mt-2"
                 >
                   Log In
                 </button>

diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx
@@ -43,43 +43,47 @@ export default function Registration() {
               onSubmit={handleSubmit}
               className="mt-5 space-y-4 w-[70%] md:w-[50%] lg:w-[60%]"
             >
-              <Input
+              <input
                 title="Name"
                 name="name"
                 value={form.name}
                 type="text"
                 placeholder="Name"
                 onChange={handlechange}
+                className="input-bar"
               />
-              <Input
+              <input
                 title="Email address"
                 name="email"
                 value={form.email}
                 type="email"
                 placeholder="E-mail Address"
                 onChange={handlechange}
+                className="input-bar"
               />
-              <Input
+              <input
                 title="Password"
                 name="password"
                 value={form.password}
                 type="password"
                 placeholder="Password"
                 onChange={handlechange}
+                className="input-bar"
               />
-              <Input
+              <input
                 title="Confirm password"
                 name="confirm_password"
                 type="password"
                 placeholder="Confirm Password"
                 value={form.confirm_password}
                 onChange={handlechange}
+                className="input-bar"
               />
 
               <div className="">
                 <button
                   type="submit"
-                  className="bg-primaryGreen w-full py-1.5 rounded-xl focus:shadow-md hover:bg-primaryGreen/80 text-textWhite font-semibold mt-2"
+                  className="border-2 border-green rounded-lg h-10 bg-primaryGreen w-full py-1.5 rounded-xl focus:shadow-md hover:bg-primaryGreen/80 text-textWhite font-semibold mt-2"
                 >
                   Register
                 </button>
@@ -97,7 +101,7 @@ export default function Registration() {
                 <div className="flex flex-row md:flex-row items-center space-x-2 justify-center">
                   <button
                     type="button"
-                    className="border bg-textWhite focus:shadow-md  lg:hover:shadow-md border-[#c7c5c5] w-[30%] py-1.5 rounded-xl text-black mt-2 flex items-center justify-center px-2 h-10"
+                    className="border bg-textWhite focus:shadow-md  lg:hover:shadow-md border-[#c7c5c5] w-[30%] py-1.5 rounded-xl text-black mt-1 flex items-center justify-center px-2 h-10"
                   >
                     <img
                       src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
@@ -108,7 +112,7 @@ export default function Registration() {
 
                   <button
                     type="button"
-                    className="border bg-textWhite focus:shadow-md  lg:hover:shadow-md border-[#c7c5c5] w-[30%] py-1.5 rounded-xl text-black mt-2 flex items-center justify-center px-2 h-10"
+                    className="border bg-textWhite focus:shadow-md  lg:hover:shadow-md border-[#c7c5c5] w-[30%] py-1.5 rounded-xl text-black mt-1 flex items-center justify-center px-2 h-10"
                   >
                     <img
                       src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg"