Update Styleing for LoginForm+RegisterForm

package.json

@@ -23,6 +23,7 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.3",
     "yup": "^1.4.0"

src/components/LoginForm/LoginForm.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import styles from './LoginFormModal.module.css';
-import icon from '../../assets/icon.png'; 
+import icon from '../../assets/icon.png';
+import iconEmail from '../../assets/icon_Email.svg';
+import iconLock from '../../assets/icon_lacat.svg';
+import iconLine from '../../assets/icon_Linie.png';
 
 const LoginFormModal = ({ onClose }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -24,7 +27,6 @@ const LoginFormModal = ({ onClose }) => {
   const handleSubmit = (e) => {
     e.preventDefault();
     console.log('Login Data:', loginData);
-
   };
 
   return (
@@ -35,7 +37,7 @@ const LoginFormModal = ({ onClose }) => {
 
         <form className={styles.form} onSubmit={handleSubmit}>
           <div className={styles.inputField}>
-            <i className="fas fa-envelope"></i>
+            <img src={iconEmail} alt="Email Icon" className={styles.inputIcon} />
             <input
               type="email"
               name="email"
@@ -44,9 +46,11 @@ const LoginFormModal = ({ onClose }) => {
               onChange={handleChange}
               required
             />
+            <img src={iconLine} alt="Line Decoration" className={styles.inputLine} />
           </div>
+
           <div className={styles.inputField}>
-            <i className="fas fa-lock"></i>
+            <img src={iconLock} alt="Password Icon" className={styles.inputIcon} />
             <input
               type={isPasswordVisible ? 'text' : 'password'}
               name="password"
@@ -55,14 +59,15 @@ const LoginFormModal = ({ onClose }) => {
               onChange={handleChange}
               required
             />
+            <img src={iconLine} alt="Line Decoration" className={styles.inputLine} />
             <i
-              className={`fas ${isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
+              className={`${styles.passwordToggle} fas ${isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
               onClick={togglePasswordVisibility}
-              style={{ cursor: 'pointer', marginLeft: '8px' }}
             ></i>
           </div>
-          <button type="submit" className={styles.btn}>Log In</button>
-          <button type="button" className={styles.btn} onClick={() => console.log("Register clicked")}>Register</button>
+
+          <button type="submit" className={styles.loginButton}>Log In</button>
+          <button type="button" className={styles.registerButton}>Register</button>
         </form>
       </div>
     </div>

src/components/LoginForm/LoginForm.module.css

@@ -22,6 +22,7 @@
   background-image: url('./assets/loginBackground.png');
   background-size: cover;
   background-position: center;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
 .icon {
@@ -38,40 +39,78 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 25px;
 }
 
 .inputField {
+  position: relative;
   display: flex;
   align-items: center;
-  background-color: rgba(255, 255, 255, 0.8);
   padding: 10px;
+  background-color: rgba(255, 255, 255, 0.8);
   border-radius: 4px;
 }
 
-.inputField i {
-  margin-right: 8px;
-  color: #666;
+.inputIcon {
+  position: absolute;
+  left: 10px;
+  width: 20px;
+  height: 20px;
 }
 
 .inputField input {
-  flex: 1;
+  width: 100%;
+  padding-left: 40px;
   border: none;
   outline: none;
   background: transparent;
+  font-size: 16px;
+  color: #333;
+}
+
+.inputLine {
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid rgba(255, 255, 255, 0.4);
 }
 
-.btn {
-  padding: 10px 15px;
+.passwordToggle {
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+  color: #666;
+}
+
+.loginButton {
+  color: rgba(251, 251, 251, 1);
+  background: linear-gradient(
+    96.76deg,
+    #ffc727 -16.42%,
+    #9e40ba 97.04%,
+    #7000ff 150.71%
+  );
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  width: 100%;
+  height: 50px;
   border: none;
-  color: #fff;
-  background-color: #4caf50;
-  border-radius: 4px;
+  border-radius: 8px;
   cursor: pointer;
   font-size: 16px;
-  margin-top: 10px;
 }
 
-.btn:hover {
-  background-color: #45a049;
+.registerButton {
+  color: rgba(98, 63, 139, 1);
+  background: #fcfcfc;
+  border: 1px solid rgba(74, 86, 226, 1);
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 50px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
 }

src/components/RegistrationForm/RegistrationForm.jsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import styles from './RegisterFormModal.module.css';
 import icon from '../../assets/icon.png';
+
 const RegisterFormModal = ({ onClose }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
   const [registerData, setRegisterData] = useState({
     name: '',
     email: '',
     password: '',
     confirmPassword: '',
   });
+  const [error, setError] = useState('');
 
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible((prev) => !prev);
-  };
+  const togglePasswordVisibility = () => setIsPasswordVisible((prev) => !prev);
+  const toggleConfirmPasswordVisibility = () => setIsConfirmPasswordVisible((prev) => !prev);
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -24,19 +26,23 @@ const RegisterFormModal = ({ onClose }) => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    if (registerData.password !== registerData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    setError('');
     console.log('Register Data:', registerData);
-
   };
 
   return (
     <div className={styles.modalOverlay} onClick={onClose}>
       <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
         <img src={icon} alt="Money Guard Icon" className={styles.icon} />
         <h1 className={styles.title}>Money Guard</h1>
-        
+
         <form className={styles.form} onSubmit={handleSubmit}>
           <div className={styles.inputField}>
-            <i className="fas fa-user"></i>
+            <i className="fas fa-user" aria-label="User icon"></i>
             <input
               type="text"
               name="name"
@@ -47,7 +53,7 @@ const RegisterFormModal = ({ onClose }) => {
             />
           </div>
           <div className={styles.inputField}>
-            <i className="fas fa-envelope"></i>
+            <i className="fas fa-envelope" aria-label="Email icon"></i>
             <input
               type="email"
               name="email"
@@ -58,7 +64,7 @@ const RegisterFormModal = ({ onClose }) => {
             />
           </div>
           <div className={styles.inputField}>
-            <i className="fas fa-lock"></i>
+            <i className="fas fa-lock" aria-label="Password icon"></i>
             <input
               type={isPasswordVisible ? 'text' : 'password'}
               name="password"
@@ -71,21 +77,29 @@ const RegisterFormModal = ({ onClose }) => {
               className={`fas ${isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
               onClick={togglePasswordVisibility}
               style={{ cursor: 'pointer', marginLeft: '8px' }}
+              aria-label="Toggle password visibility"
             ></i>
           </div>
           <div className={styles.inputField}>
-            <i className="fas fa-lock"></i>
+            <i className="fas fa-lock" aria-label="Confirm password icon"></i>
             <input
-              type={isPasswordVisible ? 'text' : 'password'}
+              type={isConfirmPasswordVisible ? 'text' : 'password'}
               name="confirmPassword"
               placeholder="Confirm Password"
               value={registerData.confirmPassword}
               onChange={handleChange}
               required
             />
+            <i
+              className={`fas ${isConfirmPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
+              onClick={toggleConfirmPasswordVisibility}
+              style={{ cursor: 'pointer', marginLeft: '8px' }}
+              aria-label="Toggle confirm password visibility"
+            ></i>
           </div>
-          <button type="submit" className={styles.btn}>Register</button>
-          <button type="button" className={styles.btnAlt} onClick={() => console.log("Log In clicked")}>Log In</button>
+          {error && <p className={styles.error}>{error}</p>}
+          <button type="submit" className={styles.registerButton}>REGISTER</button>
+          <button type="button" className={styles.loginButton} onClick={() => console.log("Log In clicked")}>LOG IN</button>
         </form>
       </div>
     </div>

src/components/RegistrationForm/RegistrationForm.module.css

@@ -5,6 +5,7 @@
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.6);
+  display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
@@ -60,32 +61,43 @@
   background: transparent;
 }
 
-.btn {
-  padding: 10px 15px;
+.registerButton {
+  width: 300px;
+  height: 50px;
+  background: linear-gradient(
+    96.76deg,
+    #ffc727 -16.42%,
+    #9e40ba 97.04%,
+    #7000ff 150.71%
+  );
+  color: rgba(255, 255, 255, 1);
+  font-family: 'Poppins', sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: 0.1em;
+  text-align: center;
   border: none;
-  color: #fff;
-  background-color: #4caf50;
-  border-radius: 4px;
+  border-radius: 20px 0px 0px 0px;
+  box-shadow: 1px 9px 15px rgba(0, 0, 0, 0.2);
   cursor: pointer;
-  font-size: 16px;
   margin-top: 10px;
 }
 
-.btn:hover {
-  background-color: #45a049;
-}
-
-.btnAlt {
-  padding: 10px 15px;
+.loginButton {
+  width: 300px;
+  height: 50px;
+  background: rgba(252, 252, 252, 1);
+  color: rgba(98, 63, 139, 1);
+  font-family: 'Poppins', sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: 0.1em;
+  text-align: center;
   border: none;
-  color: #fff;
-  background-color: #2196f3;
-  border-radius: 4px;
+  border-radius: 20px 0px 0px 0px;
+  box-shadow: 1px 9px 15px rgba(0, 0, 0, 0.2);
   cursor: pointer;
-  font-size: 16px;
   margin-top: 10px;
 }
-
-.btnAlt:hover {
-  background-color: #1976d2;
-}