Added dark mode compatibility and responsiveness to OTP & Profile pages

website3.0/components/Login-Signup.js

@@ -22,7 +22,9 @@ export const Login = ({ onClose, onSignupClick }) => {
       <input type="password" placeholder="Password" /><br/>
       <a href="#" className='sign' onClick={onSignupClick}>New here? Sign up now</a><br/>
       <button className="login-btn">Login</button>
-      <button className="close-btn" onClick={onClose}>X</button>
+      <button className="close-btn" onClick={onClose}>
+       &#10005; {/* Cross Unicode character */}
+      </button>
     </div>
   );
 };
@@ -106,7 +108,9 @@ export const Signup = ({ onClose, onLoginClick }) => {
       /><br/>
       <a href="#" className='sign'  onClick={onLoginClick}>Already have an account? Login</a><br/>
       <button className="continue-btn" onClick={handleContinue}>Continue</button>
-      <button className="close-btn" onClick={onClose}>X</button>
+      <button className="close-btn" onClick={onClose}>
+       &#10005; {/* Cross Unicode character */}
+      </button>
     </div>
   );
 };

website3.0/pages/OTP.js

@@ -40,6 +40,10 @@ const OTP = ({ onClose, onOTPSubmit, onBack }) => {
       <button className="back-arrow" onClick={onBack}>
         &#8592; {/* Left arrow Unicode character */}
       </button>
+      {/* Close button */}
+      <button className="close-btn" onClick={onClose}>
+        &#10005; {/* Cross Unicode character */}
+      </button>
       <h5>To continue, enter the OTP sent to your registered email address.</h5>
       <p>This helps us keep your account secure.</p>
       {/* OTP input fields */}

website3.0/pages/Profile.js

@@ -3,28 +3,30 @@ import React, { useState } from 'react';
 import "@stylesheets/profile.css"
 
 const Profile = ({ onClose }) => {
-  // State for form fields
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
 
   // Handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault();
-    // TODO: Add account creation logic here
-    await fetch('/api/createaccount',{
-      method:'POST',
-      body:JSON.stringify({
-        email:localStorage.getItem('email'),
-        name:username,
-        password:password
+    await fetch('/api/createaccount', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: localStorage.getItem('email'),
+        name: username,
+        password: password
       })
     })
     onClose();
   };
 
   return (
     <div className="profile-container">
+      {/* Close button */}
+      <button className="close-btn" onClick={onClose}>
+        &#10005; {/* Cross Unicode character */}
+      </button>
       <h1>Profile</h1>
       <img src="circle.png" alt="Profile-circle" />
       <form onSubmit={handleSubmit}>

website3.0/stylesheets/login-signup.css

@@ -225,6 +225,11 @@
     background-color: #ff8c00;
   }
 
+  .dark-mode .login-auth-container .close-btn,
+  .dark-mode .signup-auth-container .close-btn{
+    color: #f5f5f5;
+  }
+
 
   @media screen and (max-width: 600px) {
     .login-auth-container,

website3.0/stylesheets/otp.css

@@ -54,4 +54,100 @@
     border-radius: 16px;
     cursor: pointer;
     margin-top: 20px;
+  }
+
+  .otp-container .close-btn {
+    position: absolute;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #333;
+  }
+
+  .otp-container .close-btn {
+    top: 10px;
+    right: 10px;
+  }
+
+  .otp-container .close-btn:hover {
+    color: #666;
+  }
+
+  .dark-mode .otp-container{
+    background-color: #333;
+  }
+
+  .dark-mode .otp-container button{
+    color: black;
+  }
+
+  .dark-mode .otp-container .back-arrow{
+    color: #f5f5f5;
+  }
+
+  .dark-mode .otp-container .close-btn{
+    color: #f5f5f5;
+  }
+
+   /* Responsiveness for smaller screens */
+   @media screen and (max-width: 768px) {
+    .otp-container {
+      width: 90%;
+      height: auto;
+      min-height: 400px;
+      margin-left: 15px;
+    }
+
+    .otp-container h5 {
+      margin-top: 40px;
+      font-size: 16px;
+    }
+
+    .otp-container p {
+      font-size: 14px;
+    }
+
+    .otp-input {
+      margin-top: 30px;
+    }
+
+    .otp-field {
+      width: 35px;
+      height: 40px;
+      font-size: 16px;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .otp-container {
+      width: 90%;
+      min-height: 350px;
+      margin-left: 15px;
+    }
+
+    .otp-container h5 {
+      margin-top: 30px;
+      font-size: 14px;
+    }
+
+    .otp-container p {
+      font-size: 13px;
+    }
+
+    .otp-input {
+      margin-top: 20px;
+    }
+
+    .otp-field {
+      width: 30px;
+      height: 35px;
+      font-size: 14px;
+      margin: 0 3px;
+    }
+
+    .continue-btn {
+      padding: 8px 16px;
+      font-size: 14px;
+    }
   }

website3.0/stylesheets/profile.css

@@ -6,6 +6,7 @@
     text-align: center;
     width: 650px;
     height: 500px;
+    position: relative;
   }
 
   .profile-container h1 {
@@ -46,4 +47,92 @@
     border-radius: 16px;
     cursor: pointer;
     margin-top: 20px;
+  }
+
+  .close-btn {
+    position: absolute;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #333;
+  }
+
+
+  .close-btn {
+    top: 10px;
+    right: 10px;
+  }
+
+  .close-btn:hover {
+    color: #666;
+  }
+
+  .dark-mode .close-btn{
+    color: #f5f5f5;
+  }
+
+  .dark-mode .profile-container{
+    background-color: #333;
+  }
+
+  .dark-mode .profile-container input{
+    border-bottom: 1px solid #f5f5f5;
+    color: #f5f5f5;
+  }
+
+  .dark-mode .profile-container .create-account-btn{
+    background-color: #ffa500;
+    color: black;
+  }
+
+  /* Responsiveness for smaller screens */
+  @media screen and (max-width: 768px) {
+    .profile-container {
+      width: 400px;
+      height: auto;
+      min-height: 450px;
+      padding: 15px;
+    }
+
+    .profile-container h1 {
+      font-size: 22px;
+    }
+
+    .profile-container img {
+      margin-left: 40%;
+      width: 20%;
+    }
+
+    .profile-container .form-group input {
+      width: 80%;
+      margin-left: 10%;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .profile-container {
+      width: 300px;
+      min-height: 420px;
+    }
+
+    .profile-container h1 {
+      font-size: 20px;
+    }
+
+    .profile-container img {
+      margin-left: 35%;
+      width: 30%;
+    }
+
+    .profile-container .form-group input {
+      width: 90%;
+      margin-left: 5%;
+      font-size: 14px;
+    }
+
+    .profile-container .create-account-btn {
+      padding: 8px 16px;
+      font-size: 14px;
+    }
   }