From b527791926b43f6fa8ecc728923c6be411724b46 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Mon, 1 Jul 2024 12:14:21 +0530
Subject: [PATCH] Enhacned the Signup form

---
 src/pages/SignIn/index.js  | 80 +++++++++++++++++--------------
 src/pages/SignIn/style.css | 97 ++++++++++++++++++++++----------------
 src/pages/SignUp/index.js  | 35 ++++++++++++--
 3 files changed, 131 insertions(+), 81 deletions(-)

diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
index eebec38..1d9ebd9 100644
--- a/src/pages/SignIn/index.js
+++ b/src/pages/SignIn/index.js
@@ -22,6 +22,7 @@ import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail';
 import { useDispatch } from 'react-redux';
 import { logIn } from '../../Redux/auth-slice';
 import { toast } from 'react-toastify';
+import { Border } from 'react-bootstrap-icons';
 const auth = getAuth(app);
 const googleProvider = new GoogleAuthProvider();
 
@@ -169,13 +170,13 @@ const SignIn = () => {
               <li>
                 <Link to="/">Home</Link>
               </li>
-              <li>Sign In</li>
+              <li >Sign In</li>
             </ul>
           </div>
         </div>
 
-        <div className="loginWrapper">
-          <div className="card shadow">
+        <div className="loginWrapper ">
+          <div className="card shadow animator">
             <Backdrop
               sx={{ color: '#000', zIndex: (theme) => theme.zIndex.drawer + 1 }}
               open={showLoader}
@@ -184,8 +185,8 @@ const SignIn = () => {
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3 className="text-center">Sign In</h3>
-            <form className="height-fix">
+            <h3 className="text-center h-size">Sign In</h3>
+            <form className="mt-4">
               <div className="form-group mb-4 w-100">
                 <TextField
                   id="email"
@@ -197,6 +198,11 @@ const SignIn = () => {
                   value={formFields.email}
                   autoComplete="email"
                   error={inputErrors.email}
+                  sx={{
+                    '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+                     fontSize:"1.5rem "
+                    }
+                   ,}}
                 />
                 {inputErrors.email && (
                   <Typography
@@ -207,7 +213,7 @@ const SignIn = () => {
                   </Typography>
                 )}
               </div>
-              <div className="form-group w-100">
+              <div className="form-group mb-4 w-100">
                 <div className="position-relative">
                   <TextField
                     id="password"
@@ -219,6 +225,11 @@ const SignIn = () => {
                     value={formFields.password}
                     autoComplete="current-password"
                     error={inputErrors.password}
+                    sx={{
+           '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+            fontSize:"1.5rem "
+           }
+          ,}}
                   />
                   <Button
                     className="icon"
@@ -247,44 +258,43 @@ const SignIn = () => {
                 </div>
               )}
 
-              <div className="form-group w-100 d-flex justify-content-end">
+              <div className="form-group mt-3 mb-4 w-100 d-flex justify-content-end">
                 <Button
                   className="btn btn-link float-end"
                   onClick={forgotPassword}
+                  sx={{fontSize:"1.3rem"}}
                 >
                   Forgot Password?
                 </Button>
               </div>
-              <div className="buttons">
-                <div className="form-group w-100">
-                  <Button
-                    disabled={isDisabled}
-                    className="btn btn-g btn-lg w-100"
-                    onClick={signIn}
-                  >
-                    Sign In
-                  </Button>
-                </div>
 
-                <div className="form-group w-100 signInOr">
-                  <p className="text-center">OR</p>
-                  <Button
-                    className="w-100"
-                    variant="outlined"
-                    onClick={signInWithGoogle}
-                  >
-                    <img src={GoogleImg} alt="Google Logo" /> Sign In with
-                    Google
-                  </Button>
-                </div>
+              <div className="form-group mt-5 mb-4 w-100">
+                <Button
+                  disabled={isDisabled}
+                  className="btn btn-g btn-lg w-100 "
+                  onClick={signIn}
+                >
+                  Sign In
+                </Button>
+              </div>
 
-                <p className="text-center">
-                  Don't have an account?{' '}
-                  <b>
-                    <Link to="/signup">Sign Up</Link>
-                  </b>
-                </p>
+              <div className="form-group  mb-4 w-100 signInOr  " >
+                <p className="text-center">OR</p>
+                <Button
+                  className="w-100"
+                  variant="outlined"
+                  onClick={signInWithGoogle}
+                >
+                  <img src={GoogleImg} alt="Google Logo" /> Sign In with Google
+                </Button>
               </div>
+
+              <p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
+                Don't have an account?{' '}
+                <b>
+                  <Link to="/signup" >Sign Up</Link>
+                </b>
+              </p>
             </form>
           </div>
         </div>
@@ -299,4 +309,4 @@ const SignIn = () => {
   );
 };
 
-export default SignIn;
+export default SignIn;
\ No newline at end of file
diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css
index 9a5bfc9..77d6638 100644
--- a/src/pages/SignIn/style.css
+++ b/src/pages/SignIn/style.css
@@ -1,39 +1,53 @@
+
 * {
   box-sizing: border-box;
 }
-
 .loginWrapper {
   padding: 75px 0px;
   background: #f1f1f1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
+  height: auto;
+}
+.btn :hover{
+  color: white ;
 }
-
 .loginWrapper .card {
-  max-width: 650px;
-  width: 100%;
+  width: 650px;
   margin: auto;
   padding: 40px;
   border: 0px !important;
+  height: auto;
 }
-
 .loginWrapper .card h3 {
   font-weight: 500;
   font-size: 35px;
 }
-
 .loginWrapper .card input {
   height: 40px !important;
   font-size: 18px !important;
   color: #000 !important;
 }
-
 .loginWrapper .card fieldset {
   border-radius: 10px !important;
 }
-
+form{
+  height: auto !important;
+}
+.form-group span{
+  font-size: 1rem !important;
+}
+.loginWrapper .card button{
+  padding-left: 0px !important;
+}
+#email{
+  font-size: xx-large;
+}
+.h-size{
+  font-size: 4rem !important;
+  color: #3bb77e;
+}
+.card{
+  border-radius: 25px !important;
+}
 .loginWrapper .card .MuiFormLabel-root {
   line-height: 43px !important;
   color: #000 !important;
@@ -51,7 +65,6 @@
   color: #ccc !important;
   border-radius: 100% !important;
 }
-
 .loginWrapper .card .icon svg {
   color: #000 !important;
   opacity: 0.8;
@@ -60,51 +73,53 @@
 .loginWrapper .card button {
   padding: 15px 25px !important;
 }
-
-.signInOr {
-  text-align: center;
-  margin: 2rem 0;
-}
-
 .signInOr button {
   padding: 15px 25px !important;
   color: #000 !important;
   font-size: 18px !important;
 }
-
+.signInOr button:hover{
+  color: white !important;
+}
 .signInOr button img {
   width: 40px;
   margin-right: 15px;
+  
 }
-.height-fix {
-  height: auto !important;
+.loginWrapper{
+  height: 1000px;
 }
 .formLoader {
   position: absolute !important;
   background: rgba(255, 255, 255, 0.5) !important;
 }
 
-@media (max-width: 768px) {
-  .loginWrapper .card {
-    padding: 20px;
-  }
-
-  .loginWrapper .card .icon {
-    top: 10px;
-    right: 10px;
-    min-width: 40px !important;
-    height: 40px !important;
-    width: 40px !important;
+@media (max-width: 586px) {
+  .loginWrapper {
+    padding: 75px 0px;
+    background: #f1f1f1;
+    height: auto;
   }
-
-  .loginWrapper .card .icon svg {
-    width: 24px;
-    height: 24px;
+  .loginWrapper .card {
+    width: 650px;
+    margin: auto;
+    height: auto;
+    padding: 40px;
+    border: 0px !important;
+    height: auto;
   }
 }
-
-@media (max-width: 576px) {
-  .loginWrapper .card {
-    padding: 20px;
+.animator{
+  animation: animate forwards 1s !important;
+ 
+}
+@keyframes animate {
+  from{
+    opacity: 0;
+    position: relative;
+    top: 200px;
+  }to{
+    top: 0px;
+    opacity: 1;
   }
 }
diff --git a/src/pages/SignUp/index.js b/src/pages/SignUp/index.js
index 462f6c0..304eae0 100644
--- a/src/pages/SignUp/index.js
+++ b/src/pages/SignUp/index.js
@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import {
@@ -317,7 +318,7 @@ const SignUp = () => {
         </div>
 
         <div className="loginWrapper">
-          <div className="card shadow">
+          <div className="card shadow animator">
             <Backdrop
               sx={{ color: '#000', zIndex: (theme) => theme.zIndex.drawer + 1 }}
               open={showLoader}
@@ -326,8 +327,8 @@ const SignUp = () => {
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3 className="text-center">SignUp</h3>
-            <form className="height-fix w-100">
+            <h3 className="text-center h-size" style={{color:"#3bb77e"}}>SignUp</h3>
+            <form className="mt-4 w-100">
               <div className="form-group mb-4 w-100">
                 <TextField
                   id="email"
@@ -337,6 +338,11 @@ const SignUp = () => {
                   placeholder="Email"
                   onChange={onChangeField}
                   value={formFields.email}
+                  sx={{
+                    '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+                     fontSize:"1.5rem "
+                    }
+                   ,}}
                   autoComplete="email"
                 />
                 {inputErrors.email && (
@@ -359,6 +365,11 @@ const SignUp = () => {
                     onChange={onChangeField}
                     value={formFields.password}
                     autoComplete="new-password"
+                    sx={{
+                      '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+                       fontSize:"1.5rem "
+                      }
+                     ,}}
                   />
                   <Button
                     className="icon"
@@ -393,6 +404,11 @@ const SignUp = () => {
                     value={formFields.confirmPassword}
                     autoComplete="new-password"
                     error={inputErrors.confirmPassword}
+                    sx={{
+                      '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+                       fontSize:"1.5rem "
+                      }
+                     ,}}
                   />
                   <Button
                     className="icon"
@@ -426,6 +442,11 @@ const SignUp = () => {
                     onChange={onChangeField}
                     value={formFields.phoneNumber}
                     autoComplete="tel"
+                    sx={{
+                      '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{
+                       fontSize:"1.5rem "
+                      }
+                     ,}}
                   />
                   {inputErrors.phoneNumber && (
                     <Typography
@@ -437,6 +458,8 @@ const SignUp = () => {
                   )}
                   <Button
                     onClick={handleSendOtp}
+                    style={{fontSize:"1.5rem",marginTop:"20px"}}
+                
                     disabled={!validatePhoneNumber(formFields.phoneNumber)}
                   >
                     Send OTP
@@ -454,13 +477,15 @@ const SignUp = () => {
                     placeholder="Enter OTP"
                     onChange={onChangeField}
                     value={formFields.otp}
+                    
                     autoComplete="one-time-code"
                   />
                   <Button onClick={handleVerifyOtp}>Verify OTP</Button>
                   {inputErrors.otp && (
                     <Typography
                       variant="caption"
-                      sx={{ color: 'red', padding: '5px' }}
+                    
+                      sx={{ color: 'red', padding: '5px'}}
                     >
                       {inputErrors.otp}
                     </Typography>
@@ -478,7 +503,7 @@ const SignUp = () => {
                 </Button>
               </div>
 
-              <p className="text-center">
+              <p className="text-center" style={{fontSize:"1.6rem",cursor:"auto"}}>
                 Already have an account?
                 <b>
                   <Link to="/signIn">Sign In</Link>