Fix : Auth page layout consistency using CSS (#572)

* fix:Auth page layout consistency using CSS * fix:Auth page layout consistency using CSS * fix:Auth page layout consistency using CSS Co-authored-by: Tamal Das <[email protected]>
ngoworldcommunity · Jan 21, 2023 · 6c5cecd · 6c5cecd
1 parent f82b077
commit 6c5cecd
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 50 deletions.
diff --git a/src/pages/clubs/ClubForgotpassword.jsx b/src/pages/clubs/ClubForgotpassword.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import forgotpassword from "../../assets/pictures/forgotpass.svg";
+import forgotpassword from "../../assets/pictures/forgotpassworduser.svg";
 import Navbar from "../../components/Navbar";
 // import { Link, useNavigate } from "react-router-dom";
 //import "../../styles/ClubLogin.css";
@@ -23,9 +23,7 @@ const ClubForgotpassword = () => {
 
             <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
               <form style={{ width: "auto" }}>
-                <h1 style={{ letterSpacing: "1px", marginBottom: "30px" }}>
-                  Reset Your Password!
-                </h1>
+                <h1 className="userregister_header">Reset Your Password!</h1>
                 <div className="form-outline mb-4">
                   <label
                     htmlFor="exampleInputEmail1"
@@ -54,10 +52,7 @@ const ClubForgotpassword = () => {
                   />
                 </div>
 
-                <button
-                  style={{ backgroundColor: "#C996CC", color: "grey" }}
-                  className="login-btn btn btn-lg btn-block"
-                >
+                <button className="login-btn btn btn-lg btn-block">
                   {" "}
                   Forgot Password
                 </button>

diff --git a/src/pages/clubs/ClubsLogin.jsx b/src/pages/clubs/ClubsLogin.jsx
@@ -107,7 +107,7 @@ function ClubLogin() {
       <section className="vh-100">
         <div className="container py-5 h-100">
           <div className="row d-flex align-items-top justify-content-center h-100">
-            <div className="col-md-8 col-lg-7 col-xl-6 d-flex justify-content-center">
+            <div className="col-md-8 col-lg-7 col-xl-6">
               <Authbanner className="authimg" />
             </div>
 
@@ -117,8 +117,8 @@ function ClubLogin() {
                   style={{
                     letterSpacing: "1px",
                     marginBottom: "25px",
-                    textAlign: "center",
                   }}
+                  className="userregister_header"
                 >
                   Log in with your Club!
                 </h1>
@@ -207,7 +207,6 @@ function ClubLogin() {
                     disabled={credentials.password.length <= 4 || !isEmailValid}
                     type="submit"
                     className="login-btn btn btn-lg btn-block"
-                    style={{ backgroundColor: "#C996CC" }}
                   >
                     {isLoading ? <ClipLoader color="#e26959" /> : "LOGIN"}
                   </button>

diff --git a/src/pages/clubs/ClubsRegister.jsx b/src/pages/clubs/ClubsRegister.jsx
@@ -346,16 +346,15 @@ const ClubLogin = () => {
               />
               <small id="textDemo" className="form-text text-muted"></small>
 
-              <div className="d-grid gap-2 py-4 btn-container-desktop">
+              <div>
                 <button
                   disabled={
                     credentials.description.trim().length < 20 ||
                     credentials.password.length <= 4 ||
                     !isEmailValid
                   }
                   type="submit"
-                  className="registration-btn btn  py-2"
-                  style={{ backgroundColor: "#C996CC" }}
+                  className="btn login-btn  py-2"
                 >
                   {isLoading ? <ClipLoader color="#e26959" /> : "Register"}
                 </button>

diff --git a/src/pages/user/UserForgotpassword.jsx b/src/pages/user/UserForgotpassword.jsx
@@ -23,9 +23,7 @@ const UserForgotpassword = () => {
 
             <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
               <form style={{ width: "auto" }}>
-                <h1 style={{ letterSpacing: "1px", marginBottom: "30px" }}>
-                  Reset Your Password!
-                </h1>
+                <h1 className="userregister_header">Reset Your Password!</h1>
                 <div className="form-outline mb-4">
                   <label
                     htmlFor="exampleInputEmail1"
@@ -59,10 +57,7 @@ const UserForgotpassword = () => {
                   />
                 </div>
 
-                <button
-                  className="login-btn btn btn-lg btn-block"
-                  style={{ backgroundColor: "#89b5f7", color: "grey" }}
-                >
+                <button className="login-btn btn btn-lg btn-block">
                   {" "}
                   Forgot Password
                 </button>

diff --git a/src/pages/user/UserLogin.jsx b/src/pages/user/UserLogin.jsx
@@ -120,16 +120,18 @@ function UserLogin() {
 
       <section className="vh-100">
         <div className="container py-5 h-100">
-          <div className="d-flex align-items-center justify-content-center h-100 gap-1 ">
-            <Authbanner className="authimg" />
+          <div className="d-flex align-items-top justify-content-center h-100 gap-1 ">
+            <div className="col-md-8 col-lg-7 col-xl-6">
+              <Authbanner className="authimg" />
+            </div>
 
-            <div className=" offset-xl-1">
+            <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
               <form
                 style={{ width: "auto" }}
                 onSubmit={handleSubmit}
                 className="loginform"
               >
-                <h1 className="mb-2">Login as an user</h1>
+                <h1 className="mb-2">Login as an User !</h1>
                 <div className="form-outline mb-4">
                   <label
                     htmlFor="exampleInputEmail1"
@@ -180,7 +182,6 @@ function UserLogin() {
                   <button
                     type="submit"
                     className="login-btn btn btn-lg btn-block"
-                    style={{ backgroundColor: "#89b5f7" }}
                   >
                     Login
                   </button>

diff --git a/src/pages/user/UserRegister.jsx b/src/pages/user/UserRegister.jsx
@@ -129,7 +129,7 @@ const UserRegister = () => {
 
             <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
               <form style={{ width: "auto" }} onSubmit={handleSubmit}>
-                <h1 className="userregister_header">Join us at Milan !!</h1>
+                <h1 className="userregister_header">Join us at Milan !</h1>
                 <div className="form-outline mb-2">
                   <label
                     htmlFor="Full Name"
@@ -258,8 +258,7 @@ const UserRegister = () => {
                 <br />
                 <button
                   type="submit"
-                  className="btn btn-lg btn-block register-btn btn-container-desktop"
-                  style={{ backgroundColor: "#89b5f7" }}
+                  className="login-btn btn btn-lg btn-block btn-container-desktop"
                 >
                   Register
                 </button>

diff --git a/src/styles/ClubLogin.css b/src/styles/ClubLogin.css
@@ -24,7 +24,7 @@
 
 /* Login Button */
 .login-btn {
-  background-color: #7ed957;
+  background-color: #e26959;
   color: black;
   border: none;
   text-transform: uppercase !important;
@@ -33,6 +33,15 @@
   letter-spacing: 0.05rem;
   transition: 0.2s;
 }
+.login-btn:hover {
+  background-color: #f68475;
+  transform: scale(1.02);
+}
+.login-btn:disabled {
+  background-color: #e26959;
+  cursor: not-allowed;
+  opacity: 0.8;
+}
 
 .btn-container {
   text-align: center;
@@ -79,6 +88,7 @@
 
   .login-btn {
     width: 100%;
+    text-align: center !important;
   }
 
   form {

diff --git a/src/styles/ClubsRegister.css b/src/styles/ClubsRegister.css
@@ -25,7 +25,7 @@
 /* Registration Button */
 .registration-btn {
   width: 30%;
-  background-color: #ba68c8;
+  background-color: rgb(137, 181, 247) !important;
   color: whitesmoke;
   border: none;
   display: flex;
@@ -63,7 +63,7 @@
     margin-bottom: 0px !important;
   }
 }
-@media screen and (max-width: 770px) {
+@media screen and (max-width: 1024px) {
   .registration-btn {
     width: 100%;
   }
@@ -79,10 +79,5 @@
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 2rem;
-  font-family: 'Open Sans', sans-serif;
-}
-
-.regformlabels {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 1rem;
+  font-family: Montserrat, sans-serif;
 }
diff --git a/src/styles/UserLogin.css b/src/styles/UserLogin.css
@@ -1,10 +1,3 @@
-.userregister_header {
-  font-family: "Open Sans", sans-serif;
-  font-size: 2rem;
-  font-weight: 600;
-  margin-bottom: 2rem;
-}
-
 .anchor-container {
   text-align: center;
 }
@@ -21,16 +14,19 @@ form .btn-container-desktop {
 }
 
 .register-btn {
+  background-color: rgb(137, 181, 247);
   text-transform: uppercase !important;
   font-size: 1.25rem !important;
   font-weight: 500;
   letter-spacing: 0.05rem;
   transition: 0.2s;
+  cursor: pointer;
 }
 
-.loginform h1 {
+.loginform h1,
+.userregister_header {
   font-family: Montserrat, sans-serif;
-  font-size: 3.5rem;
+  font-size: 2rem;
   line-height: 60px;
   margin-bottom: 1.5rem !important;
   color: #28183b;
@@ -39,10 +35,11 @@ form .btn-container-desktop {
   word-break: break-word;
 }
 
-.loginform label {
+.loginform label,
+.regformlabels {
   font-family: Poppins, sans-serif;
   color: black;
-  font-size: 1.4rem;
+  font-size: 1rem;
   letter-spacing: 1px;
 }
 
@@ -118,9 +115,15 @@ form .btn-container-desktop {
   .clubreg_des {
     display: none;
   }
+  .loginform h1,
+  .userregister_header {
+    font-size: 2rem;
+  }
 }
 
-.login-btn:hover {
+.login-btn:hover,
+.register-btn:hover {
   border: #212529;
   background-color: #7496ca;
+  transform: scale(1.02);
 }