Enhacned the Signup form

MAVRICK-1 · Jul 1, 2024 · b527791 · b527791
1 parent fac6d98
commit b527791
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 81 deletions.
diff --git 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;
diff --git 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;
   }
 }