updated

MAVRICK-1 · Jul 22, 2024 · 6fa6568 · 6fa6568
1 parent af8dd9d
commit 6fa6568
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 20 deletions.
diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
@@ -185,7 +185,7 @@ const SignIn = () => {
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3 className="text-center h-size">Sign In</h3>
+            <h3 className="text-center signin_head h-size">Sign In</h3>
             <form className="mt-4">
               <div className="form-group mb-4 w-100">
                 <TextField
@@ -232,7 +232,7 @@ const SignIn = () => {
           ,}}
                   />
                   <Button
-                    className="icon"
+                    className="icon back_icon"
                     onClick={() => setShowPassword(!showPassword)}
                   >
                     {showPassword === false ? (
@@ -258,28 +258,28 @@ const SignIn = () => {
                 </div>
               )}
 
-              <div className="form-group mt-3 mb-4 w-100 d-flex justify-content-end">
-                <Button
-                  className="btn btn-link float-end"
+              <div className="form-group mt-1 mb-1 w-100 d-flex justify-content-end">
+                <p
+                  className="forgot_pass"
                   onClick={forgotPassword}
                   sx={{fontSize:"1.3rem"}}
                 >
                   Forgot Password?
-                </Button>
+                </p>
               </div>
 
-              <div className="form-group mt-5 mb-4 w-100">
+              <div className="form-group  mt-1 mb-4 w-100">
                 <Button
                   disabled={isDisabled}
-                  className="btn btn-g btn-lg w-100 "
+                  className="btn  sign_in_but btn-g btn-lg w-100 "
                   onClick={signIn}
                 >
                   Sign In
                 </Button>
               </div>
 
-              <div className="form-group  mb-4 w-100 signInOr  " >
-                <p className="text-center">OR</p>
+              <div className="form-group  mb-2 w-100 signInOr  " >
+               <div className='or_contain'> <p className="text-center">OR</p></div>
                 <Button
                   className="w-100"
                   variant="outlined"
@@ -289,10 +289,10 @@ const SignIn = () => {
                 </Button>
               </div>
 
-              <p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
+              <p className="text-center mt-4" style={{fontSize:"1.6rem",cursor:"auto"}}>
                 Don't have an account?{' '}
                 <b>
-                  <Link to="/signup" >Sign Up</Link>
+                  <Link to="/signup " className='signin_link' >Sign Up</Link>
                 </b>
               </p>
             </form>

diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css
@@ -5,8 +5,55 @@
 .loginWrapper {
   padding: 75px 0px;
   background: #f1f1f1;
+  background: url('../../assets/images/bg.webp') !important;
   height: auto;
 }
+.sign_in_but{
+  background-color: #0b830b !important;
+  transition: 0.3s all ease-in-out !important;
+}
+.sign_in_but:hover{
+  background-color: #016201 !important;
+}
+.or_contain{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px !important;
+  margin-top: 10px;
+}
+.signin_head{
+  color: #016201 !important;
+}
+.or_contain p{
+  font-size: 24px !important;
+}
+.forgot_pass{
+  font-size: 24px !important;
+  color: #016201 !important;
+  font-weight: 400;
+  transition: 0.3s all ease-in-out;
+}
+.forgot_pass:hover{
+text-decoration: underline;
+
+}
+.send_otp{
+  color: #007bff !important; 
+  font-size: 24px !important;
+  font-weight: 600;
+  transition: 0.3s all ease-in-out;
+  padding-bottom: 0px !important;
+}
+.send_otp:hover{
+  text-decoration: underline;
+
+}
+
+.back_icon :hover{
+  color: white !important;
+  background-color: transparent !important;
+}
 .btn :hover{
   color: white ;
 }
@@ -86,6 +133,9 @@ form{
   margin-right: 15px;
 
 }
+.signin_link{
+  font-weight: 600 !important;
+}
 .loginWrapper{
   height: 1000px;
 }

diff --git a/src/pages/SignUp/index.js b/src/pages/SignUp/index.js
@@ -327,7 +327,7 @@ const SignUp = () => {
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3 className="text-center h-size" style={{color:"#3bb77e"}}>SignUp</h3>
+            <h3 className="text-center signin_head h-size" >SignUp</h3>
             <form className="mt-4 w-100">
               <div className="form-group mb-4 w-100">
                 <TextField
@@ -432,7 +432,7 @@ const SignUp = () => {
               </div>
 
               {otpCount < OTP_LIMIT && (
-                <div className="form-group mb-4 w-100">
+                <div className="form-group  w-100">
                   <TextField
                     id="phoneNumber"
                     type="tel"
@@ -456,14 +456,14 @@ const SignUp = () => {
                       {inputErrors.phoneNumber}
                     </Typography>
                   )}
-                  <Button
+                  <p
                     onClick={handleSendOtp}
                     style={{fontSize:"1.5rem",marginTop:"20px"}}
-
+                    className='send_otp'
                     disabled={!validatePhoneNumber(formFields.phoneNumber)}
                   >
                     Send OTP
-                  </Button>
+                  </p>
                 </div>
               )}
 
@@ -493,10 +493,10 @@ const SignUp = () => {
                 </div>
               )}
 
-              <div className="form-group mt-5 mb-4 w-100">
+              <div className="form-group  mb-4 w-100">
                 <Button
                   disabled={isDisabled}
-                  className="btn btn-g btn-lg w-100"
+                  className="btn sign_in_but btn-g btn-lg w-100"
                   onClick={signUp}
                 >
                   Sign Up
@@ -506,7 +506,7 @@ const SignUp = () => {
               <p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
                 Already have an account?
                 <b>
-                  <Link to="/signIn">Sign In</Link>
+                  <Link to="/signIn" className='signin_link'>Sign In</Link>
                 </b>
               </p>
             </form>