MAVRICK-1 · MAVRICK-1 · May 13, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
@@ -34,6 +34,7 @@ function Tes() {
                     href={contributor.html_url}
                     className="cardLink"
                     target="_blank"
+                    rel="noreferrer"
                   >
                     <CardMedia
                       component="img"
@@ -49,6 +50,7 @@ function Tes() {
                   href={contributor.html_url}
                   className="cardLink"
                   target="_blank"
+                  rel="noreferrer"
                 >
                 <CardMedia
                   component="img"

diff --git a/src/pages/About/style.css b/src/pages/About/style.css
@@ -1,8 +1,6 @@
 * {
   text-decoration: none;
   list-style: none;
-  align-items: center;
-  justify-content: center;
 }
 
 .about-container {

diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
@@ -36,13 +36,22 @@ const SignIn = () => {
   const history = useNavigate();
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [loggedInUserEmail, setLoggedInUseEmail] = useLoggedInUserEmail(); //get_email hook
+  const [isDisabled, setIsDisabled] = useState(true);
 
-  const [isButtonDisable, setButtonDisable] = useState(true);
   const [inputErrors, setInputErrors] = useState({
     email: "",
     password: "",
   });
 
+
+  const checkInputs = (email, password) => {
+    if (email.trim() !== '' && password.trim() !== ''){
+      setIsDisabled(false);
+    }else {
+      setIsDisabled(true);
+    }
+  };
+
   const dispatch = useDispatch()
 
 
@@ -79,16 +88,14 @@ const SignIn = () => {
       errors.password = !validatePassword(value) ? "Password is required" : "";
     }
 
+    setInputErrors(errors);
     setFormFields((prevFormFields) => ({
       ...prevFormFields,
       [name]: value,
     }));
+    checkInputs(formFields.email, formFields.password,value);
 
-    setInputErrors(errors);
 
-    const hasErrors = Object.values(errors).some((error) => error !== "");
-    if (!hasErrors) setButtonDisable(false);
-    else setButtonDisable(true);
   };
 
   const signIn = () => {
@@ -178,15 +185,15 @@ const SignIn = () => {
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3>Sign In</h3>
+            <h3 className="text-center">Sign In</h3>
             <form className="mt-4">
               <div className="form-group mb-4 w-100">
                 <TextField
                   id="email"
                   type="email"
                   name="email"
-                  label="Email"
-                  className="w-100"
+                  placeholder="Email"
+                  className="w-100 text-zinc-800"
                   onChange={onChangeField}
                   value={formFields.email}
                   autoComplete="email"
@@ -207,7 +214,7 @@ const SignIn = () => {
                     id="password"
                     type={showPassword === false ? "password" : "text"}
                     name="password"
-                    label="Password"
+                    placeholder="Password"
                     className="w-100"
                     onChange={onChangeField}
                     value={formFields.password}
@@ -243,7 +250,7 @@ const SignIn = () => {
 
               <div className="form-group mt-5 mb-4 w-100">
                 <Button
-                  disabled={isButtonDisable}
+                  disabled={isDisabled}
                   className="btn btn-g btn-lg w-100"
                   onClick={signIn}
                 >

diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css
@@ -1,16 +1,82 @@
-.loginWrapper{padding: 75px 0px; background: #f1f1f1; height: auto;}
-.loginWrapper .card{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;}
-.loginWrapper .card  .MuiFormLabel-root{line-height: 43px !important; color: #000 !important; font-size: 18px !important;}
+*{
+  box-sizing: border-box;
+}
+.loginWrapper {
+  padding: 75px 0px;
+  background: #f1f1f1;
+  height: auto;
+}
+.loginWrapper .card {
+  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;
+}
+.loginWrapper .card .MuiFormLabel-root {
+  line-height: 43px !important;
+  color: #000 !important;
+  font-size: 18px !important;
+}
 
-.loginWrapper .card .icon{position: absolute; top: 10px; right: 20px; z-index: 100; min-width:50px !important; height:50px !important; width:50px !important; color: #ccc !important; border-radius: 100% !important;}
-.loginWrapper .card .icon svg{color: #000 !important; opacity: 0.8;}
+.loginWrapper .card .icon {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  z-index: 100;
+  min-width: 50px !important;
+  height: 50px !important;
+  width: 50px !important;
+  color: #ccc !important;
+  border-radius: 100% !important;
+}
+.loginWrapper .card .icon svg {
+  color: #000 !important;
+  opacity: 0.8;
+}
 
-.loginWrapper .card button{padding: 15px 25px !important;}
-.signInOr button{padding: 15px 25px !important; color: #000 !important; font-size: 18px !important;}
-.signInOr button img{width: 40px; margin-right: 15px;}
+.loginWrapper .card button {
+  padding: 15px 25px !important;
+}
+.signInOr button {
+  padding: 15px 25px !important;
+  color: #000 !important;
+  font-size: 18px !important;
+}
+.signInOr button img {
+  width: 40px;
+  margin-right: 15px;
+}
 
+.formLoader {
+  position: absolute !important;
+  background: rgba(255, 255, 255, 0.5) !important;
+}
 
-.formLoader{position: absolute !important; background: rgba(255,255,255,0.5) !important;}
+@media (max-width: 586px) {
+    .loginWrapper {
+        padding: 75px 0px;
+        background: #f1f1f1;
+        height: auto;
+      }
+      .loginWrapper .card {
+        width: 650px;
+        margin: auto;
+        height: auto;
+        padding: 40px;
+        border: 0px !important;
+        height: auto;
+      }
+}
diff --git a/src/pages/SignUp/index.js b/src/pages/SignUp/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import "./style.css";
+import "../SignIn/style.css";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
@@ -30,6 +30,8 @@ const SignUp = () => {
   const [showPassword, setShowPassword] = useState(false);
   const [showPassword1, setShowPassword1] = useState(false);
   const [showLoader, setShowLoader] = useState(false);
+
+
   const [formFields, setFormFields] = useState({
     email: "",
     password: "",
@@ -38,14 +40,23 @@ const SignUp = () => {
 
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [isDisabled, setIsDisabled] = useState(true);
 
-  const [isDisableSignupButton, setDisableSignUpButton] = useState(true);
   const [InputErrors, setInputErrors] = useState({
     email: "",
     password: "",
     confirmPassword: "",
   });
 
+  const checkInputs = (email, password, confirmPassword) => {
+    if (email.trim() !== '' && password.trim() !== '' && confirmPassword.trim() !== '') {
+      setIsDisabled(false);
+    } else {
+      setIsDisabled(true);
+    }
+  };
+
+
   const signUp = () => {
     setShowLoader(true);
     // Check for password strength
@@ -124,6 +135,9 @@ const SignUp = () => {
     const value = e.target.value;
     let errors = { ...InputErrors };
 
+
+
+
     if (name == "email") {
       errors.email = !validateEmail(value) ? "Invalid email address" : "";
     }
@@ -138,14 +152,13 @@ const SignUp = () => {
     }
 
     setInputErrors(errors);
-    setFormFields(() => ({
-      ...formFields,
+    setFormFields((prevFormFields) => ({
+      ...prevFormFields,
       [name]: value,
     }));
+    checkInputs(formFields.email, formFields.password,value);
+
 
-    const hasErrors = Object.values(errors).some((error) => error !== "");
-    if (!hasErrors) setDisableSignUpButton(false);
-    else setDisableSignUpButton(true);
   };
 
   const handleCloseSnackbar = () => {
@@ -194,27 +207,26 @@ const SignUp = () => {
 
         <div className="loginWrapper">
           <div className="card shadow">
-            <Backdrop
+          <Backdrop
               sx={{ color: "#000", zIndex: (theme) => theme.zIndex.drawer + 1 }}
               open={showLoader}
               className="formLoader"
             >
               <CircularProgress color="inherit" />
             </Backdrop>
 
-            <h3>SignUp</h3>
-            <form className="mt-4">
+            <h3 className="text-center">SignUp</h3>
+            <form className="mt-4 w-100">
               <div className="form-group mb-4 w-100">
                 <TextField
                   id="email"
                   type="email"
                   name="email"
-                  label="Email"
                   className="w-100"
+                  placeholder="Email"
                   onChange={onChangeField}
                   value={formFields.email}
                   autoComplete="email"
-                  error={InputErrors.email}
                 />
                 {InputErrors.email && (
                   <Typography
@@ -226,17 +238,16 @@ const SignUp = () => {
                 )}
               </div>
               <div className="form-group mb-4 w-100">
-                <div className="position-relative">
+                <div className="position-relative ">
                   <TextField
                     id="password"
                     type={showPassword === false ? "password" : "text"}
                     name="password"
-                    label="Password"
+                    placeholder="Password"
                     className="w-100"
                     onChange={onChangeField}
                     value={formFields.password}
                     autoComplete="new-password"
-                    error={InputErrors.password}
                   />
                   <Button
                     className="icon"
@@ -265,7 +276,7 @@ const SignUp = () => {
                     id="confirmPassword"
                     type={showPassword1 === false ? "password" : "text"}
                     name="confirmPassword"
-                    label="Confirm Password"
+                    placeholder="Confirm Password"
                     className="w-100"
                     onChange={onChangeField}
                     value={formFields.confirmPassword}
@@ -295,7 +306,7 @@ const SignUp = () => {
 
               <div className="form-group mt-5 mb-4 w-100">
                 <Button
-                  disabled={isDisableSignupButton}
+                  disabled={isDisabled}
                   className="btn btn-g btn-lg w-100"
                   onClick={signUp}
                 >

diff --git a/src/pages/SignUp/style.css b/src/pages/SignUp/style.css