From 52473cdafcc8ff6adc681f14e358708f74fc31ac Mon Sep 17 00:00:00 2001
From: masterking008 <masterking008@gmail.com>
Date: Tue, 22 Oct 2024 14:59:00 +0530
Subject: [PATCH 1/3] frontend

---
 .../management/commands/upload_projects.py    | 45 ++++++++++++++++++-
 socfrontend/src/components/Navbar.js          |  2 +-
 socfrontend/src/pages/Home.jsx                | 17 +++----
 socfrontend/src/pages/Login.jsx               | 41 ++++++++++++++---
 4 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/socbackend/projects/management/commands/upload_projects.py b/socbackend/projects/management/commands/upload_projects.py
index 89bc9db..967129e 100644
--- a/socbackend/projects/management/commands/upload_projects.py
+++ b/socbackend/projects/management/commands/upload_projects.py
@@ -1,3 +1,46 @@
 # Write your functions for uploading the projects from csv file.. 
 
-# Use projects.csv 
\ No newline at end of file
+# Use projects.csv 
+import csv
+from django.core.management.base import BaseCommand
+from projects.models import Project  # Assuming you have a Project model
+from django.db import IntegrityError
+
+class Command(BaseCommand):
+    help = 'Upload projects from a CSV file'
+
+    def add_arguments(self, parser):
+        # Argument for the CSV file path
+        parser.add_argument('csv_file', type=str, help='Path to the CSV file')
+
+    def handle(self, *args, **kwargs):
+        csv_file = kwargs['csv_file']
+        
+        # Open the CSV file
+        with open(csv_file, newline='', encoding='utf-8') as file:
+            reader = csv.DictReader(file)
+
+            for row in reader:
+                try:
+                    # Replace 'name', 'description' with your actual field names
+                    project, created = Project.objects.update_or_create(
+                        name=row['name'],
+                        defaults={
+                            'description': row['description'],
+                            'start_date': row['start_date'],  # Adjust field names as per your model
+                            'end_date': row['end_date'],
+                        }
+                    )
+
+                    if created:
+                        self.stdout.write(self.style.SUCCESS(f"Project '{project.name}' created successfully."))
+                    else:
+                        self.stdout.write(self.style.SUCCESS(f"Project '{project.name}' updated successfully."))
+
+                except KeyError as e:
+                    self.stdout.write(self.style.ERROR(f"Missing field in CSV: {e}"))
+                except IntegrityError as e:
+                    self.stdout.write(self.style.ERROR(f"Database error: {e}"))
+                except Exception as e:
+                    self.stdout.write(self.style.ERROR(f"An error occurred: {e}"))
+
diff --git a/socfrontend/src/components/Navbar.js b/socfrontend/src/components/Navbar.js
index fdd959a..dc73149 100644
--- a/socfrontend/src/components/Navbar.js
+++ b/socfrontend/src/components/Navbar.js
@@ -15,7 +15,7 @@ export default function Navbar(props) {
   return (
     <nav className="bg-indigo-600 border-gray-200 dark:bg-gray-900 dark:border-gray-700 shadow-xl opacity-90">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <Link to="#" className="flex items-center space-x-3 rtl:space-x-reverse">
+        <Link to="./" className="flex items-center space-x-3 rtl:space-x-reverse">
           <img src={wncc_logo} className="h-10" alt="WnCC Logo" />
           <span className="self-center text-2xl font-semibold whitespace-nowrap text-white dark:text-white">WnCC</span>
         </Link>
diff --git a/socfrontend/src/pages/Home.jsx b/socfrontend/src/pages/Home.jsx
index 6570c53..25715e0 100644
--- a/socfrontend/src/pages/Home.jsx
+++ b/socfrontend/src/pages/Home.jsx
@@ -6,14 +6,14 @@ function Home() {
     <>
     
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
-            <div className="h-screen">
+            <div>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 x="0"
                 y="0"
                 enableBackground="new 0 0 500 500"
                 viewBox="0 0 500 500"
-                className="animate-fade-up h-auto m-auto"
+                className="animate-fade-up  m-auto lg:h-[calc(100vh-72px)]"
                 >
                 <ellipse
                     cx="250"
@@ -478,23 +478,20 @@ function Home() {
                     </g>
                 </g>
                 </svg>
-                {/* <img src={HomePagePhotu} alt="" className="mt-10"/> */}
             </div>
-            <div className="h-screen rounded-lg font-mono font-left flex flex-col justify-center">
-                <div className="flex flex-col items-center justify-center">
+            <div className="p-8 font-mono ">
+                <div className="flex flex-col items-center text-center">
                     <h1 className="text-indigo-600 text-5xl animate-fade-up flex flex-row">Web and Coding Club</h1>
                     <h1 className="text-indigo-600 text-5xl animate-fade-up flex flex-row">Presents</h1>
                     <h1 className="text-indigo-600 text-4xl animate-fade-up flex flex-row">Seasons of Code</h1>
-                    {/* <h1 className="text-indigo-600 text-6xl animate-fade-up">Of</h1>
-                    <h1 className="text-indigo-600 text-6xl animate-fade-up">Code</h1> */}
                 </div>
-                <div className="h-1/2  mt-10">
-                    <h1 className="animate-fade-up">Welcome to Seasons of Code, the flagship event of the Web and Coding Club at IIT Bombay! We invite all aspiring coders and innovators to embark on an exhilarating journey of project development. Embrace the spirit of creativity as you delve into the realms of technology and coding. Whether you're a seasoned programmer or just starting your coding odyssey, Seasons of Code offers a platform for you to showcase your skills and bring your ideas to life. Join us in shaping the future of technology, one line of code at a time. Let's code, innovate, and inspire together!</h1>
+                <div className="mt-10 flex flex-col items-center ">
+                    <h1 className="animate-fade-up text-justify utilities">Welcome to Seasons of Code, the flagship event of the Web and Coding Club at IIT Bombay! We invite all aspiring coders and innovators to embark on an exhilarating journey of project development. Embrace the spirit of creativity as you delve into the realms of technology and coding. Whether you're a seasoned programmer or just starting your coding odyssey, Seasons of Code offers a platform for you to showcase your skills and bring your ideas to life. Join us in shaping the future of technology, one line of code at a time. Let's code, innovate, and inspire together!</h1>
                     <Link
                         className="animate-fade-up inline-flex items-center gap-2 rounded border border-indigo-600 bg-indigo-600 px-8 py-3 text-white hover:bg-transparent hover:text-indigo-600 focus:outline-none focus:ring active:text-indigo-500 mt-10"
                         to="/current_projects"
                         >
-                        <span className="text-sm font-medium"> Explore Projects </span>
+                        <span className="text-sm font-medium "> Explore Projects </span>
 
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 pl-1">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
diff --git a/socfrontend/src/pages/Login.jsx b/socfrontend/src/pages/Login.jsx
index 5c9b306..2262e92 100644
--- a/socfrontend/src/pages/Login.jsx
+++ b/socfrontend/src/pages/Login.jsx
@@ -26,13 +26,13 @@ export default function Login() {
     // Handling form submission
     const handleSubmit = (e) => {
         e.preventDefault();
-        
+
         const formData = new FormData();
         Object.keys(profile).forEach(key => {
             formData.append(key, profile[key]);
         });
 
-        api.post(process.env.REACT_APP_BACKEND_URL+'/accounts/token/', formData)
+        api.post(process.env.REACT_APP_BACKEND_URL + '/accounts/token/', formData)
             .then(function (response) {
                 const token = response.data.access;  // Extract token
                 console.log("Login successful, token:", token);
@@ -41,9 +41,9 @@ export default function Login() {
                 localStorage.setItem("authToken", token);
                 // Redirect to Dashboard and reload the page
                 window.location.reload();
-                
-                
-                
+
+
+
             })
             .catch(err => {
                 console.log("Login failed:", err);
@@ -52,6 +52,12 @@ export default function Login() {
             });
     };
 
+    const [passwordVisible, setPasswordVisible] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        setPasswordVisible(!passwordVisible);
+    };
+
     // Error message display
     const errorMessage = () => {
         return (
@@ -114,16 +120,34 @@ export default function Login() {
                             <label htmlFor="password">Password</label>
                             <div className="relative">
                                 <input
-                                    type="password"
+                                    type={passwordVisible ? 'text' : 'password'}
                                     id="password"
                                     className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
                                     placeholder="Enter Password"
                                     onChange={handleProfile}
                                     required
                                 />
+                                {/* Eye icon */}
+                                <span
+                                    className="absolute inset-y-0 right-4 flex items-center cursor-pointer"
+                                    onClick={togglePasswordVisibility}
+                                >
+                                    {passwordVisible ? (
+                                        <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M3 3L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                            <path d="M10.5 10.6771C10.1888 11.0296 10 11.4928 10 12C10 13.1045 10.8954 14 12 14C12.5072 14 12.9703 13.8112 13.3229 13.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                            <path d="M7.36185 7.5611C5.68002 8.73968 4.27894 10.4188 3 12C4.88856 14.991 8.2817 18 12 18C13.5499 18 15.0434 17.4772 16.3949 16.6508" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                            <path d="M12 6C16.0084 6 18.7015 9.1582 21 12C20.6815 12.5043 20.3203 13.0092 19.922 13.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    ) : (
+                                        <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                            <path d="M21 12C19.1114 14.991 15.7183 18 12 18C8.2817 18 4.88856 14.991 3 12C5.29855 9.15825 7.99163 6 12 6C16.0084 6 18.7015 9.1582 21 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    )}
+                                </span>
                             </div>
                         </div>
-
                         <button
                             type="submit"
                             className="block w-full rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white"
@@ -131,6 +155,9 @@ export default function Login() {
                             Login
                         </button>
 
+                        <p className="text-center text-sm text-gray-500">
+                            <Link className="underline" to="/forget">Forget Password</Link>
+                        </p>
                         <p className="text-center text-sm text-gray-500">
                             No account? <Link className="underline" to="/register">Register Now</Link>
                         </p>

From 3fc8adf519f3de2c7cb966a727bd451cc7c609bd Mon Sep 17 00:00:00 2001
From: masterking008 <masterking008@gmail.com>
Date: Sat, 9 Nov 2024 18:41:13 +0530
Subject: [PATCH 2/3] latest commit

---
 .../management/commands/upload_projects.py    | 58 +++++++++----------
 socfrontend/public/dark.svg                   |  1 +
 socfrontend/public/light.svg                  |  1 +
 socfrontend/src/components/Navbar.js          | 38 +++++++++++-
 socfrontend/src/pages/Home.jsx                |  8 +--
 socfrontend/src/pages/Login.jsx               | 12 ++--
 socfrontend/src/pages/PreferenceForm.jsx      |  2 +-
 socfrontend/src/pages/Projects.jsx            | 16 ++---
 socfrontend/src/pages/Register.jsx            | 18 +++---
 socfrontend/src/pages/Wishlist.jsx            |  4 +-
 socfrontend/tailwind.config.js                |  1 +
 11 files changed, 100 insertions(+), 59 deletions(-)
 create mode 100644 socfrontend/public/dark.svg
 create mode 100644 socfrontend/public/light.svg

diff --git a/socbackend/projects/management/commands/upload_projects.py b/socbackend/projects/management/commands/upload_projects.py
index 967129e..f089610 100644
--- a/socbackend/projects/management/commands/upload_projects.py
+++ b/socbackend/projects/management/commands/upload_projects.py
@@ -1,46 +1,46 @@
-# Write your functions for uploading the projects from csv file.. 
-
-# Use projects.csv 
 import csv
-from django.core.management.base import BaseCommand
-from projects.models import Project  # Assuming you have a Project model
-from django.db import IntegrityError
+import os
+from django.core.management.base import BaseCommand, CommandError
+from projects.models import Project  
+from django.conf import settings
 
 class Command(BaseCommand):
-    help = 'Upload projects from a CSV file'
+    help = 'Upload project data from a CSV file'
 
     def add_arguments(self, parser):
-        # Argument for the CSV file path
-        parser.add_argument('csv_file', type=str, help='Path to the CSV file')
+        parser.add_argument('csv_file', type=str, help='The path to the CSV file to be processed')
+
+    def handle(self, *args, **options):
+        csv_file_path = options['csv_file']
 
-    def handle(self, *args, **kwargs):
-        csv_file = kwargs['csv_file']
-        
-        # Open the CSV file
-        with open(csv_file, newline='', encoding='utf-8') as file:
-            reader = csv.DictReader(file)
+        if not os.path.exists(csv_file_path):
+            raise CommandError(f"File '{csv_file_path}' does not exist.")
 
+        with open(csv_file_path, newline='') as csvfile:
+            reader = csv.DictReader(csvfile)
             for row in reader:
                 try:
-                    # Replace 'name', 'description' with your actual field names
                     project, created = Project.objects.update_or_create(
-                        name=row['name'],
+                        project_id=row['project_id'],
                         defaults={
-                            'description': row['description'],
-                            'start_date': row['start_date'],  # Adjust field names as per your model
-                            'end_date': row['end_date'],
+                            'primary_mentor': row['primary_mentor'],
+                            'project_title': row['project_title'],
+                            'co_mentor_details': row['co_mentor_details'],
+                            'project_category_specific': row['project_category_specific'],
+                            'project_description': row['project_description'],
+                            'maximum_mentees': row['maximum_mentees'],
+                            'prereuisites': row['prereuisites'],
+                            'banner_image_path': row['banner_image_path'],
+                            'banner_image_url': row['banner_image_url'],
+                            'project_timeline': row['project_timeline'],
+                            'project_checkpoints': row['project_checkpoints'],
+                            'project_category_general': row['project_category_general'],
                         }
                     )
-
                     if created:
-                        self.stdout.write(self.style.SUCCESS(f"Project '{project.name}' created successfully."))
+                        self.stdout.write(self.style.SUCCESS(f"Successfully created project {project.project_title}"))
                     else:
-                        self.stdout.write(self.style.SUCCESS(f"Project '{project.name}' updated successfully."))
-
-                except KeyError as e:
-                    self.stdout.write(self.style.ERROR(f"Missing field in CSV: {e}"))
-                except IntegrityError as e:
-                    self.stdout.write(self.style.ERROR(f"Database error: {e}"))
+                        self.stdout.write(self.style.SUCCESS(f"Updated project {project.project_title}"))
                 except Exception as e:
-                    self.stdout.write(self.style.ERROR(f"An error occurred: {e}"))
+                    self.stdout.write(self.style.ERROR(f"Error processing row {row}: {e}"))
 
diff --git a/socfrontend/public/dark.svg b/socfrontend/public/dark.svg
new file mode 100644
index 0000000..fd03116
--- /dev/null
+++ b/socfrontend/public/dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
\ No newline at end of file
diff --git a/socfrontend/public/light.svg b/socfrontend/public/light.svg
new file mode 100644
index 0000000..4210bd0
--- /dev/null
+++ b/socfrontend/public/light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
\ No newline at end of file
diff --git a/socfrontend/src/components/Navbar.js b/socfrontend/src/components/Navbar.js
index dc73149..4daf564 100644
--- a/socfrontend/src/components/Navbar.js
+++ b/socfrontend/src/components/Navbar.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 import wncc_logo from '../assets/wncc-logo.png';
 import PropTypes from "prop-types";
 
@@ -8,10 +8,38 @@ export default function Navbar(props) {
   const authToken = localStorage.getItem('authToken');
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [location]);
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
 
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      document.documentElement.classList.add('dark');
+      setDarkMode(true);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    if (darkMode) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+
   return (
     <nav className="bg-indigo-600 border-gray-200 dark:bg-gray-900 dark:border-gray-700 shadow-xl opacity-90">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
@@ -47,6 +75,12 @@ export default function Navbar(props) {
 
         <div className={`w-full md:flex md:w-auto ${isMenuOpen ? 'block' : 'hidden'}`} id="navbar-menu">
           <ul className="flex flex-col md:flex-row font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 dark:border-gray-700">
+            <button onClick={toggleDarkMode}
+              className=" text-white "
+            >
+              {!darkMode ? <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>}
+
+            </button>
             <li>
               <Link to="" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Home</Link>
             </li>
diff --git a/socfrontend/src/pages/Home.jsx b/socfrontend/src/pages/Home.jsx
index 25715e0..c3a2018 100644
--- a/socfrontend/src/pages/Home.jsx
+++ b/socfrontend/src/pages/Home.jsx
@@ -5,7 +5,7 @@ function Home() {
     return (  
     <>
     
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8 dark:bg-gray-800">
             <div>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -13,7 +13,7 @@ function Home() {
                 y="0"
                 enableBackground="new 0 0 500 500"
                 viewBox="0 0 500 500"
-                className="animate-fade-up  m-auto lg:h-[calc(100vh-72px)]"
+                className="animate-fade-down m-auto lg:h-[calc(100vh-72px)]"
                 >
                 <ellipse
                     cx="250"
@@ -479,13 +479,13 @@ function Home() {
                 </g>
                 </svg>
             </div>
-            <div className="p-8 font-mono ">
+            <div className="p-8 font-mono flex flex-col justify-center">
                 <div className="flex flex-col items-center text-center">
                     <h1 className="text-indigo-600 text-5xl animate-fade-up flex flex-row">Web and Coding Club</h1>
                     <h1 className="text-indigo-600 text-5xl animate-fade-up flex flex-row">Presents</h1>
                     <h1 className="text-indigo-600 text-4xl animate-fade-up flex flex-row">Seasons of Code</h1>
                 </div>
-                <div className="mt-10 flex flex-col items-center ">
+                <div className="mt-10 flex flex-col items-center dark:text-white ">
                     <h1 className="animate-fade-up text-justify utilities">Welcome to Seasons of Code, the flagship event of the Web and Coding Club at IIT Bombay! We invite all aspiring coders and innovators to embark on an exhilarating journey of project development. Embrace the spirit of creativity as you delve into the realms of technology and coding. Whether you're a seasoned programmer or just starting your coding odyssey, Seasons of Code offers a platform for you to showcase your skills and bring your ideas to life. Join us in shaping the future of technology, one line of code at a time. Let's code, innovate, and inspire together!</h1>
                     <Link
                         className="animate-fade-up inline-flex items-center gap-2 rounded border border-indigo-600 bg-indigo-600 px-8 py-3 text-white hover:bg-transparent hover:text-indigo-600 focus:outline-none focus:ring active:text-indigo-500 mt-10"
diff --git a/socfrontend/src/pages/Login.jsx b/socfrontend/src/pages/Login.jsx
index 2262e92..8278eef 100644
--- a/socfrontend/src/pages/Login.jsx
+++ b/socfrontend/src/pages/Login.jsx
@@ -82,7 +82,7 @@ export default function Login() {
     };
 
     return (
-        <div className="form">
+        <div className="form h-[calc(100vh-72px)] dark:bg-gray-800 dark:text-white">
             <div className="messages">
                 {errorMessage()}
             </div>
@@ -99,7 +99,7 @@ export default function Login() {
                         </svg>
                     </h1>
 
-                    <form onSubmit={handleSubmit} className="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8">
+                    <form onSubmit={handleSubmit} className="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 dark:bg-slate-700 ">
                         <p className="text-center text-lg font-medium">Login to your account</p>
 
                         <div>
@@ -108,7 +108,7 @@ export default function Login() {
                                 <input
                                     type="text"
                                     id="username"
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Roll No."
                                     onChange={handleProfile}
                                     required
@@ -122,12 +122,11 @@ export default function Login() {
                                 <input
                                     type={passwordVisible ? 'text' : 'password'}
                                     id="password"
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Password"
                                     onChange={handleProfile}
                                     required
                                 />
-                                {/* Eye icon */}
                                 <span
                                     className="absolute inset-y-0 right-4 flex items-center cursor-pointer"
                                     onClick={togglePasswordVisibility}
@@ -158,6 +157,9 @@ export default function Login() {
                         <p className="text-center text-sm text-gray-500">
                             <Link className="underline" to="/forget">Forget Password</Link>
                         </p>
+                        <p className="text-center text-sm text-gray-500">
+                            <Link className="underline" to="/forget">Forget Username</Link>
+                        </p>
                         <p className="text-center text-sm text-gray-500">
                             No account? <Link className="underline" to="/register">Register Now</Link>
                         </p>
diff --git a/socfrontend/src/pages/PreferenceForm.jsx b/socfrontend/src/pages/PreferenceForm.jsx
index 1496922..691fa48 100644
--- a/socfrontend/src/pages/PreferenceForm.jsx
+++ b/socfrontend/src/pages/PreferenceForm.jsx
@@ -266,7 +266,7 @@ export default function PreferenceForm() {
 
     return (
         <>
-            <div className="form">
+            <div className="form h-[calc(100vh-72px)] dark:bg-gray-800 dark:text-white">
 
             {/* Calling to the methods */}
             <div className="messages">
diff --git a/socfrontend/src/pages/Projects.jsx b/socfrontend/src/pages/Projects.jsx
index a741a4d..2b89f62 100644
--- a/socfrontend/src/pages/Projects.jsx
+++ b/socfrontend/src/pages/Projects.jsx
@@ -102,26 +102,28 @@ export default function Projects() {
   const [active, setActive] = useState('b1');
 
 
-  return (<section className="project-card " >
+  return (
+  
+  <section className="project-card min-h-[calc(100vh-72px)] dark:bg-gray-800 dark:text-white " >
 
     <div className="pt-8 flex items-center justify-center ">
       <div className="inline-flex sm:flex-wrap rounded-md shadow-sm" role="group">
-        <button type="button" onClick={() => {handleFilterChange('All'); setActive('b1')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b1' ? 'text-white' :'text-gray-900'} ${active==='b1' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 rounded-s-lg hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2  `}>
+        <button type="button" onClick={() => {handleFilterChange('All'); setActive('b1')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b1' ? 'text-white' :'text-gray-900'} ${active==='b1' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 rounded-s-lg hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2  `}>
           ALL
         </button>
-        <button type="button" onClick={() => {handleFilterChange('ML'); setActive('b2')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b2' ? 'text-white' :'text-gray-900'} ${active==='b2' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2`}>
+        <button type="button" onClick={() => {handleFilterChange('ML'); setActive('b2')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b2' ? 'text-white' :'text-gray-900'} ${active==='b2' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2`}>
           ML
         </button>
-        <button type="button" onClick={() => {handleFilterChange('Development'); setActive('b3')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b3' ? 'text-white' :'text-gray-900'} ${active==='b3' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
+        <button type="button" onClick={() => {handleFilterChange('Development'); setActive('b3')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b3' ? 'text-white' :'text-gray-900'} ${active==='b3' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
           Development
         </button>
-        <button type="button" onClick={() => {handleFilterChange('Blockchain'); setActive('b4')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b4' ? 'text-white' :'text-gray-900'} ${active==='b4' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
+        <button type="button" onClick={() => {handleFilterChange('Blockchain'); setActive('b4')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b4' ? 'text-white' :'text-gray-900'} ${active==='b4' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
           Blockchain
         </button>
-        <button type="button" onClick={() => {handleFilterChange('CP'); setActive('b5')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b5' ? 'text-white' :'text-gray-900'} ${active==='b5' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
+        <button type="button" onClick={() => {handleFilterChange('CP'); setActive('b5')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b5' ? 'text-white' :'text-gray-900'} ${active==='b5' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 `}>
           CP
         </button>
-        <button type="button" onClick={() => {handleFilterChange('Others'); setActive('b6')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b6' ? 'text-white' :'text-gray-900'} ${active==='b6' ? 'bg-indigo-600' : 'bg-white'} border border-gray-500 rounded-e-lg hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 `}>
+        <button type="button" onClick={() => {handleFilterChange('Others'); setActive('b6')}} className={`w-40 px-4 py-2 text-sm font-medium ${active==='b6' ? 'text-white' :'text-gray-900'} ${active==='b6' ? 'bg-indigo-600' : 'bg-white dark:bg-slate-400'} border border-gray-500 rounded-e-lg hover:bg-indigo-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 `}>
           Others
         </button>
       </div>
diff --git a/socfrontend/src/pages/Register.jsx b/socfrontend/src/pages/Register.jsx
index 4505b35..be0e285 100644
--- a/socfrontend/src/pages/Register.jsx
+++ b/socfrontend/src/pages/Register.jsx
@@ -153,7 +153,7 @@ export default function Register() {
 
 
 
-        <div className="form">
+        <div className="form  dark:bg-gray-800 dark:text-white">
 
             {/* Calling to the methods */}
             <div className="messages">
@@ -163,11 +163,11 @@ export default function Register() {
             </div>
 
 
-            <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
+            <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 ">
                 <div className="mx-auto max-w-lg">
                     <h1 className="text-center text-2xl font-bold text-indigo-600 sm:text-3xl">&lt;/&gt;Seasons of Code&lt;/&gt;</h1>
 
-                    <form onSubmit={handleSubmit} className="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-2xl sm:p-6 lg:p-8">
+                    <form onSubmit={handleSubmit} className="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-2xl sm:p-6 lg:p-8  dark:bg-slate-700">
                         <p className="text-center text-lg font-medium">Registration Form</p>
 
                         {/* <div className="grid grid-cols-1 gap-4 text-center sm:grid-cols-2">
@@ -203,7 +203,7 @@ export default function Register() {
                                 <input
                                     type="text"
                                     id='name'
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Your Name"
                                     onChange={handleProfile}
                                     required
@@ -219,7 +219,7 @@ export default function Register() {
                                 <input
                                     type="text"
                                     id='roll_number'
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Roll No."
                                     onChange={handleProfile}
                                     required
@@ -235,7 +235,7 @@ export default function Register() {
                                 <input
                                     type="tel"
                                     id='phone_number'
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Mobile No.(preferably WhatsApp)"
                                     onChange={handleProfile}
                                     required
@@ -252,7 +252,7 @@ export default function Register() {
                                 <input
                                     type="password"
                                     id="password"
-                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
+                                    className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800"
                                     placeholder="Enter Password"
                                     onChange={handleProfile}
                                     required
@@ -262,7 +262,7 @@ export default function Register() {
                         </div>
                         <div className="inline-block relative w-full">
                         <label for="year">Year of Study</label>
-                            <select id="year" onChange={handleProfile} className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm" required>
+                            <select id="year" onChange={handleProfile} className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800" required>
                                 <option disabled selected>Select Year of Study</option>   
                                 {years.flat().filter((year, index, self) => self.indexOf(year) === index).map((year, index) => (
                                     <option key={index} value={year}>{year}</option>
@@ -271,7 +271,7 @@ export default function Register() {
                         </div>
                         <div className="inline-block relative w-full">
                         <label for="department">Department</label>
-                            <select id="department" onChange={handleProfile} className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm" required>
+                            <select id="department" onChange={handleProfile} className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm dark:bg-gray-800" required>
                                 <option disabled selected>Select Department</option>   
                                 {departments.flat().filter((department, index, self) => self.indexOf(department) === index).map((department, index) => (
                                     <option key={index} value={department}>{department}</option>
diff --git a/socfrontend/src/pages/Wishlist.jsx b/socfrontend/src/pages/Wishlist.jsx
index 7ab1aaf..443c4b4 100644
--- a/socfrontend/src/pages/Wishlist.jsx
+++ b/socfrontend/src/pages/Wishlist.jsx
@@ -105,7 +105,7 @@ export default function Wishlist() {
   return (
     <section className="project-card " >
     {details.length===0 ? (<>
-      <div className="grid h-screen place-content-center bg-white px-4 ">
+      <div className="grid h-screen place-content-center bg-white dark:bg-gray-800 dark:text-white px-4 ">
           <div className="text-center ">
             <span className="text-green-600 flex justify-center items-center">
             <svg
@@ -182,7 +182,7 @@ export default function Wishlist() {
     </svg>
                     </span>
 
-                <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Wishlist Empty</p>
+                <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white ">Wishlist Empty</p>
 
                 <p className="mt-4 text-gray-500">Keep browsing through the projects and add to wishlist</p>
 
diff --git a/socfrontend/tailwind.config.js b/socfrontend/tailwind.config.js
index c5139b6..df0cfec 100644
--- a/socfrontend/tailwind.config.js
+++ b/socfrontend/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  darkMode: 'class', 
   theme: {
     extend: {},
   },

From f16a0ed8b6dd77c4b493934d3f17ec9cbb757d83 Mon Sep 17 00:00:00 2001
From: masterking008 <masterking008@gmail.com>
Date: Sat, 9 Nov 2024 18:53:08 +0530
Subject: [PATCH 3/3] added dark mode

---
 socfrontend/src/components/Navbar.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/socfrontend/src/components/Navbar.js b/socfrontend/src/components/Navbar.js
index 4daf564..1435c50 100644
--- a/socfrontend/src/components/Navbar.js
+++ b/socfrontend/src/components/Navbar.js
@@ -51,7 +51,7 @@ export default function Navbar(props) {
         <button
           id="menubutton"
           onClick={toggleMenu}
-          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-transparent dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
           aria-controls="navbar-menu"
           aria-expanded={isMenuOpen ? "true" : "false"}
         >
@@ -75,38 +75,40 @@ export default function Navbar(props) {
 
         <div className={`w-full md:flex md:w-auto ${isMenuOpen ? 'block' : 'hidden'}`} id="navbar-menu">
           <ul className="flex flex-col md:flex-row font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 dark:border-gray-700">
-            <button onClick={toggleDarkMode}
-              className=" text-white "
-            >
-              {!darkMode ? <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>}
+            
+              <button onClick={toggleDarkMode}
+                className=" text-white px-3"
+              >
+                {!darkMode ? <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" /></svg>}
 
-            </button>
+              </button>
+        
             <li>
-              <Link to="" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Home</Link>
+              <Link to="" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Home</Link>
             </li>
 
             {authToken ? (
               <>
                 <li>
-                  <Link to="current_projects" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Projects</Link>
+                  <Link to="current_projects" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Projects</Link>
                 </li>
                 <li>
-                  <Link to="wishlist" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Wishlist</Link>
+                  <Link to="wishlist" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Wishlist</Link>
                 </li>
                 <li>
-                  <Link to="PreferenceForm" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Preference</Link>
+                  <Link to="PreferenceForm" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Preference</Link>
                 </li>
                 <li>
-                  <Link to="logout" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Logout</Link>
+                  <Link to="logout" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Logout</Link>
                 </li>
               </>
             ) : (
               <>
                 <li>
-                  <Link to="login" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Login</Link>
+                  <Link to="login" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Login</Link>
                 </li>
                 <li>
-                  <Link to="register" className="block py-2 px-3 text-white rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Register</Link>
+                  <Link to="register" className="block py-2 px-3 text-white rounded hover:bg-gray-100 hover:text-gray-500 md:hover:bg-transparent md:border-0 md:hover:text-black-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Register</Link>
                 </li>
               </>
             )}