Dark / Light mode added

README.md

@@ -154,6 +154,10 @@ This will start the development server and you can view the application in your
     <td>Denied</td>
     <td><a href="./src/pages/Denied.jsx">/denied</a></td>
   </tr>
+  <tr>
+    <td>Denied</td>
+    <td>/denied</td>
+  </tr>
 </table>
 
 

src/App.jsx

@@ -100,7 +100,6 @@ const App = () => {
                 )
               }
             />
-
             <Route
               path="/chatbot"
               element={
@@ -113,6 +112,8 @@ const App = () => {
                 )
               }
             />
+
+            <Route path="/denied" element={<Denied />} />
           </Routes>
         </ExtraContextProvider>
       </AIChatContextProvider>

src/components/DarkModeToggle.jsx

@@ -0,0 +1,49 @@
+import React, {useState,useEffect} from 'react'
+
+const DarkModeToggle = () => {
+    const [theme, setTheme] = useState('dark');
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+          setTheme(savedTheme);
+        } else {
+          setTheme('dark'); 
+          localStorage.setItem('theme', 'dark'); 
+        }
+      }, []);
+
+    useEffect(() => {
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+      const newTheme = theme === 'dark' ? 'light' : 'dark';
+      setTheme(newTheme);
+    };
+
+  return (
+    <div>
+        <div
+        onClick={toggleTheme}
+        className={`w-14 h-8 flex items-center bg-gray-300 dark:bg-gray-600 rounded-full p-1 cursor-pointer transition-colors duration-300 ${
+          theme === 'dark' ? 'bg-gray-700' : 'bg-gray-400'
+        }`}
+      >
+        {/* Circle inside the switch */}
+        <div
+          className={` w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 ${
+            theme === 'dark' ? 'translate-x-6 bg-[#ff0059da]' : 'translate-x-0 bg-white'
+          }`}
+        ></div>
+      </div>
+    </div>
+  )
+}
+
+export default DarkModeToggle

src/components/FormStep1.jsx

@@ -4,6 +4,7 @@ import { AuthContext } from '../context/AuthContext';
 import { Link } from 'react-router-dom';
 import { validations } from '../utils/formValidations'; 
 
+
 const FormStep1 = ({ onNext }) => {
   const { updateRegisterInfo, registerInfo } = useContext(AuthContext);
   const [errors, setErrors] = useState({});
@@ -36,70 +37,71 @@ const FormStep1 = ({ onNext }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full "
+      className="p-6 rounded-lg shadow-lg h-full bg-white dark:bg-neutral-900"
     >
-      <h2 className="text-lg font-bold text-[#ff0059] text-neutral-700 mb-4">START FOR FREE</h2>
-      <h1 className='text-white text-5xl font-bold mb-6'>Create your account</h1>
-      <p className='text-neutral-400 font-bold mb-14'>Already a member ? <span className='text-yellow-500'><Link to="/login">Log in</Link></span></p>
+      <h2 className="text-lg font-bold text-[#ff0059] dark:text-yellow-400 mb-4">START FOR FREE</h2>
+      <h1 className='text-gray-800 dark:text-white text-5xl font-bold mb-6'>Create your account</h1>
+      <p className='text-neutral-600 dark:text-neutral-400 font-bold mb-14'>
+        Already a member? 
+        <span className='text-yellow-500'>
+          <Link to="/login"> Log in</Link>
+        </span>
+      </p>
       <form className="space-y-4">
         <div className='flex flex-row gap-10'>
-        <label className="w-1/2">
-          <span className="text-gray-400">First Name:</span>
-          <input 
-            type="text" 
-            name="first_name" 
-            value={registerInfo.first_name}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, first_name: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
-          />
-          {errors.first_name && <p className="text-[#ff0059]">{errors.first_name}</p>}
-        </label>
-        <label className="w-1/2">
-          <span className="text-gray-400">Last Name:</span>
-          <input 
-            type="text" 
-            name="last_name" 
-            value={registerInfo.last_name}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, last_name: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
-          />
-          {errors.last_name && <p className="text-[#ff0059]">{errors.last_name}</p>} 
-        </label>
+          <label className="w-1/2">
+            <span className="text-gray-800 dark:text-gray-300">First Name:</span>
+            <input 
+              type="text" 
+              name="first_name" 
+              value={registerInfo.first_name}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, first_name: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
+            />
+            {errors.first_name && <p className="text-[#ff0059]">{errors.first_name}</p>}
+          </label>
+          <label className="w-1/2">
+            <span className="text-gray-800 dark:text-gray-300">Last Name:</span>
+            <input 
+              type="text" 
+              name="last_name" 
+              value={registerInfo.last_name}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, last_name: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
+            />
+            {errors.last_name && <p className="text-[#ff0059]">{errors.last_name}</p>} 
+          </label>
         </div>
         <label className="block">
-          <span className="text-gray-400">Email:</span>
+          <span className="text-gray-800 dark:text-gray-300">Email:</span>
           <input 
             type="email" 
             name="email" 
             value={registerInfo.email}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, email: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
           />
-           {errors.email && <p className="text-[#ff0059]">{errors.email}</p>}
+          {errors.email && <p className="text-[#ff0059]">{errors.email}</p>}
         </label>
-
-
-        <label className="block ">
-          <span className="text-gray-400">Password:</span>
+        <label className="block">
+          <span className="text-gray-800 dark:text-gray-300">Password:</span>
           <input 
             type="password" 
             name="password" 
             value={registerInfo.password}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, password: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600" 
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 border border-gray-300 outline-none text-black dark:bg-neutral-800 dark:text-white" 
           />
             {errors.password && <p className="text-[#ff0059]">{errors.password}</p>}
         </label>
-
-
       </form>
       <button 
-          type="button" 
-          onClick={handleNext} 
-          className="w-1/3 mt-14 mb-10 bg-[#ff0059] hover:bg-red-500 text-white py-4 rounded-md"
-        >
-          Lets Move to Next
-        </button>
+        type="button" 
+        onClick={handleNext} 
+        className="w-1/3 mt-14 mb-10 bg-[#ff0059] hover:bg-red-500 text-white py-4 rounded-md"
+      >
+        Let's Move to Next
+      </button>
     </motion.div>
   );
 };

src/components/FormStep2.jsx

@@ -33,121 +33,129 @@ const FormStep2 = ({ onNext, onBack }) => {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around"
+      className="p-6 rounded-lg shadow-lg h-full flex flex-col justify-around bg-white dark:bg-neutral-900"
     >
       <div>
-      <h2 className="text-4xl text-white  font-bold text-[#ff0059] text-neutral-700 mb-4">Contact Information</h2>
-      <p className='text-neutral-400  font-bold mb-8'>Don't worry we will keep it to  <span className='text-yellow-600'>ourselves</span> only !</p>
+        <h2 className="text-4xl font-bold text-[#ff0059] dark:text-yellow-400 mb-4">
+          Contact Information
+        </h2>
+        <p className="text-neutral-600 dark:text-neutral-400 font-bold mb-8">
+          Don't worry, we will keep it to <span className="text-yellow-600">ourselves</span> only!
+        </p>
       </div>
-      
+
       <form className="space-y-4">
-        <div className='flex flex-row gap-4 '>
+        <div className="flex flex-row gap-4">
           <label className="w-1/3">
-            <span className="text-gray-400">Gender:</span>
+            <span className="text-gray-800 dark:text-gray-300">Gender:</span>
             <div className="flex mt-1 flex-row gap-4">
-              {['Male', 'Female'].map(gender => (
+              {['Male', 'Female'].map((gender) => (
                 <button
                   key={gender}
                   type="button"
                   name="gender"
                   value={gender}
                   onClick={() => updateRegisterInfo({ ...registerInfo, gender })}
-                  className={`p-2 h-10 rounded-md ${registerInfo.gender === gender ? 'bg-[#ff0059]' : 'bg-neutral-800'} text-white border border-gray-600`}
+                  className={`p-2 h-10 rounded-md ${
+                    registerInfo.gender === gender ? 'bg-[#ff0059] text-gray-200 dark:text-gray-800' : 'bg-gray-200 dark:bg-neutral-800'
+                  } text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600`}
                 >
-                  {gender.charAt(0).toUpperCase() + gender.slice(1)}
+                   {gender.charAt(0).toUpperCase() + gender.slice(1)}
                 </button>
               ))}
             </div>
             {errors.gender && <p className="text-[#ff0059]">{errors.gender}</p>}
           </label>
+
           <label className="w-1/3">
-            <span className="text-gray-400">Age:</span>
+            <span className="text-gray-800 dark:text-gray-300">Age:</span>
             <input
               type="age"
               name="age"
               value={registerInfo.age}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, age: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             />
             {errors.age && <p className="text-[#ff0059]">{errors.age}</p>}
           </label>
+
           <label className="w-1/3">
-          <span className="text-gray-400">Username:</span>
-          <input
-            type="text"
-            name="username"
-            value={registerInfo.username}
-            onChange={(e) => updateRegisterInfo({ ...registerInfo, username: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
-          />
-          {errors.username && <p className="text-[#ff0059]">{errors.username}</p>}
-        </label>
+            <span className="text-gray-800 dark:text-gray-300">Username:</span>
+            <input
+              type="text"
+              name="username"
+              value={registerInfo.username}
+              onChange={(e) => updateRegisterInfo({ ...registerInfo, username: e.target.value })}
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
+            />
+            {errors.username && <p className="text-[#ff0059]">{errors.username}</p>}
+          </label>
         </div>
 
         <label className="block">
-          <span className="text-gray-400">Location:</span>
+          <span className="text-gray-800 dark:text-gray-300">Location:</span>
           <input
             type="text"
             name="location"
             value={registerInfo.location}
             onChange={(e) => updateRegisterInfo({ ...registerInfo, location: e.target.value })}
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
           />
           {errors.location && <p className="text-[#ff0059]">{errors.location}</p>}
         </label>
-        <div className='flex flex-row gap-10'>
+
+        <div className="flex flex-row gap-10">
           <label className="w-1/2">
-            <span className="text-gray-400">Openness:</span>
+            <span className="text-gray-800 dark:text-gray-300">Openness:</span>
             <select
               name="openness"
               value={registerInfo.openness}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, openness: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             >
               <option value="">Select</option>
               <option value="introvert">Introvert</option>
               <option value="extrovert">Extrovert</option>
               <option value="ambivert">Ambivert</option>
             </select>
           </label>
+
           <label className="w-1/2">
-            <span className="text-gray-400">Relation Type:</span>
+            <span className="text-gray-800 dark:text-gray-300">Relation Type:</span>
             <select
               name="relation_type"
               value={registerInfo.relation_type}
               onChange={(e) => updateRegisterInfo({ ...registerInfo, relation_type: e.target.value })}
-              className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+              className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
             >
               <option value="">Select</option>
               <option value="casual">Casual</option>
               <option value="shortTerm">Short Term</option>
               <option value="longTerm">Long Term</option>
             </select>
           </label>
-
         </div>
-         <label className="block">
-          <span className="text-gray-400">Expected Qualities</span>
+
+        <label className="block">
+          <span className="text-gray-800 dark:text-gray-300">Expected Qualities:</span>
           <input
             type="text"
             name="exp_qual"
             value={registerInfo.exp_qual}
-            onChange={(e) =>
-              updateRegisterInfo({ ...registerInfo, exp_qual: e.target.value })
-            }
-            className="mt-1 block w-full p-2 rounded-md bg-neutral-800 outline-none text-white border border-gray-600"
+            onChange={(e) => updateRegisterInfo({ ...registerInfo, exp_qual: e.target.value })}
+            className="mt-1 block w-full p-2 rounded-md bg-gray-200 dark:bg-neutral-800 border border-gray-300 dark:border-gray-600 outline-none text-black dark:text-white"
           />
         </label>
-
       </form>
-      <div className="flex justify-start  gap-4 items-end mt-10 pb-5">
-          <button type="button" onClick={onBack} className="bg-neutral-800 hover:bg-gray-600 text-white py-2 px-4 rounded-md">
-            Back
-          </button>
-          <button type="button" onClick={handleNext} className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md">
-            Next
-          </button>
-        </div>
+
+      <div className="flex justify-start gap-4 items-end mt-10 pb-5">
+        <button type="button" onClick={onBack} className="bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 text-black dark:text-white py-2 px-4 rounded-md">
+          Back
+        </button>
+        <button type="button" onClick={handleNext} className="bg-[#ff0059] hover:bg-red-500 text-white py-2 px-4 rounded-md">
+          Next
+        </button>
+      </div>
     </motion.div>
   );
 };