From 14da9f50105f3bde55cff2daf48b71d9fe170d6f Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Thu, 31 Oct 2024 22:31:39 +0530
Subject: [PATCH 1/2] initial #469: add hook and toggle

---
 frontend/src/Pages/Herosection.jsx      |  4 +++-
 frontend/src/components/ThemeToggle.jsx | 32 +++++++++++++++++++++++++
 frontend/src/hooks/useDarkMode.js       | 16 +++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ThemeToggle.jsx
 create mode 100644 frontend/src/hooks/useDarkMode.js

diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 750dcf4..3fbc936 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Herosection.css";
+import ThemeToggle from "../components/ThemeToggle"
 import logo from "../assets/stationsaarthi.svg";
 import navigationsvg from "../assets/svg/navigation.svg";
 import bookingsvg from "../assets/svg/bookings.svg";
@@ -56,8 +57,9 @@ const Herosection = () => {
   return (
     <>
       <div className="relative z-50 flex items-center justify-between gap-[88vw]">
-        <div>
+        <div className="flex flex-row gap-x-2">
           <Navbar />
+          <ThemeToggle />
         </div>
 
         <div className="flex items-center justify-center">
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..d7d0c43
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,32 @@
+import { FaSun, FaMoon } from 'react-icons/fa';
+import useDarkMode from '../hooks/useDarkMode';
+import "../../src/index.css";
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useDarkMode();
+  const isDarkMode = theme === 'dark';
+
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <label className="relative inline-block w-16 h-9">
+  <input
+    type="checkbox"
+    className="sr-only peer"
+    checked={isDarkMode}
+    onChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
+  />
+  <span className="block w-full h-full bg-blue-500 rounded-3xl border-2 border-blue-400 cursor-pointer peer-checked:bg-slate-800 peer-checked:border-blue-400 transition-colors duration-400"></span>
+
+  {/* Sun Icon for Light Mode */}
+  <span className="absolute top-1/2 left-[0.3em] w-4 h-4 bg-gradient-to-r from-pink-500 to-orange-400 rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-100 peer-checked:opacity-0"></span>
+
+  {/* Moon Icon for Dark Mode */}
+  <span className="absolute top-1/2 left-[calc(100%-1.3em)] w-4 h-4 bg-transparent rounded-full transform -translate-y-1/2 transition-all duration-400 opacity-0 peer-checked:opacity-100 peer-checked:shadow-[inset_-3px_-2px_5px_-2px_#8983f7,inset_-8px_-4px_0_0_#a3dafb]"></span>
+</label>
+
+
+      </div>
+  );
+};
+
+export default ThemeSwitcher;
\ No newline at end of file
diff --git a/frontend/src/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
new file mode 100644
index 0000000..1513686
--- /dev/null
+++ b/frontend/src/hooks/useDarkMode.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const isDark = theme === 'dark';
+    root.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+};
+
+export default useDarkMode;
\ No newline at end of file

From fea54e947ed1c7a587dc6f1beb85c83d78a0d6a1 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Mon, 4 Nov 2024 18:05:19 +0530
Subject: [PATCH 2/2] implements #469 for landing page

---
 frontend/src/Pages/Herosection.jsx | 52 +++++++++++++++---------------
 frontend/src/Pages/hamburger.jsx   |  5 +--
 frontend/src/components/navbar.jsx |  2 +-
 frontend/src/components/popup.jsx  | 16 ++++-----
 frontend/src/hooks/useDarkMode.js  |  2 ++
 frontend/tailwind.config.js        |  7 ++--
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 3fbc936..a6e72a0 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -57,7 +57,7 @@ const Herosection = () => {
   return (
     <>
       <div className="relative z-50 flex items-center justify-between gap-[88vw]">
-        <div className="flex flex-row gap-x-2">
+        <div className="flex flex-col gap-x-2">
           <Navbar />
           <ThemeToggle />
         </div>
@@ -68,7 +68,7 @@ const Herosection = () => {
           </div>
 
           <button type="submit" onClick={UserCLick} className="">
-            <FaUserAlt className="bg-blue-200 border-2 text-blue-600 border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg mr-2" />
+            <FaUserAlt className="bg-blue-200  dark:bg-black border-2 text-blue-600 dark:text-white border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg mr-2" />
           </button>
         </div>
       </div>
@@ -79,7 +79,7 @@ const Herosection = () => {
         <GoogleTranslate />
       </div>
 
-      <h1 className="pl-4 text-4xl font-black text-center text-white ">
+      <h1 className="pl-4 text-4xl font-black text-center text-white">
         Namaste !! Yatree{" "}
       </h1>
       <div className="relative flex items-center justify-center bg-center bg-cover herosection">
@@ -94,7 +94,7 @@ const Herosection = () => {
       </div>
       <br></br>
 
-      <div className="grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center ">
+      <div className="dark:bg-black grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center ">
         <div
           type="submit"
           onClick={ContributorCLick}
@@ -104,11 +104,11 @@ const Herosection = () => {
             src={contributorsvg}
             alt=""
             className="
-      bg-blue-200 border-2 border-blue-100 rounded-full 
+      bg-blue-200 border-2 border-blue-100 rounded-full  dark:bg-black
       w-[64px] h-[64px] p-2
     "
           />
-          <h1 className="text-xs font-bold text-black">Contributors</h1>
+          <h1 className="text-xs font-bold text-black dark:text-white">Contributors</h1>
         </div>
 
         <div
@@ -120,10 +120,10 @@ const Herosection = () => {
             src={navigationsvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
+            className="dark:bg-black bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
           />
-          <button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
-            <h1 className="font-bold text-white">Navigation</h1>
+          <button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
+            <h1 className="font-bold text-white dark:text-black">Navigation</h1>
           </button>
         </div>
         <div
@@ -135,14 +135,14 @@ const Herosection = () => {
             src={bookingsvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
+            className="bg-blue-200 border-2 dark:bg-black border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
           />
           <button
             type="submit"
             onClick={BookingCLick}
-            className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
+            className="w-20 py-1 mt-2 font-semibold dark:bg-white text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
           >
-            <h1 className="font-bold text-white">Booking</h1>
+            <h1 className="font-bold text-white dark:text-black">Booking</h1>
           </button>
         </div>
         <div
@@ -154,10 +154,10 @@ const Herosection = () => {
             src={stationsvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
+            className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
           />
-          <button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
-            <h1 className="font-bold text-white">Station</h1>
+          <button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
+            <h1 className="font-bold text-white dark:text-black">Station</h1>
           </button>
         </div>
         <div
@@ -169,15 +169,15 @@ const Herosection = () => {
             src={mapsvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
+            className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
           />{" "}
           <button
             type="submit"
             onClick={MapCLick}
-            className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
+            className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
           >
             {" "}
-            <h1 className="font-bold text-white">3D Map</h1>
+            <h1 className="font-bold text-white dark:text-black">3D Map</h1>
           </button>
         </div>
 
@@ -190,15 +190,15 @@ const Herosection = () => {
             src={schedulesvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
+            className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
           />
           <button
             type="submit"
             onClick={ScheduleCLick}
-            className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
+            className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
           >
             {" "}
-            <h1 className="font-bold text-white">Schedule</h1>
+            <h1 className="font-bold text-white dark:text-black">Schedule</h1>
           </button>
         </div>
 
@@ -211,22 +211,22 @@ const Herosection = () => {
             src={noticationsvg}
             alt=""
             srcset=""
-            className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
+            className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
           />{" "}
           <button
             type="submit"
             onClick={NotificationCLick}
-            className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
+            className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
           >
             {" "}
-            <h1 className="font-bold text-white">Notification</h1>
+            <h1 className="font-bold text-white dark:text-black">Notification</h1>
           </button>
         </div>
       </div>
-      <div className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  right-5 -bottom-8 md:-bottom-7">
+      <div className="fixed dark:bg-black flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  right-5 -bottom-8 md:-bottom-7">
         <Popup />
         <Chatbot />
-        <h1 className="text-xs font-bold text-black">Saarthi</h1>
+        <h1 className="text-xs font-bold text-black dark:text-white">Saarthi</h1>
       </div>
     </>
   );
diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx
index 83d24a8..d581f49 100644
--- a/frontend/src/Pages/hamburger.jsx
+++ b/frontend/src/Pages/hamburger.jsx
@@ -214,8 +214,8 @@ const Hamburger = () => {
 
   return (
     <div>
-      <SearchContainer>
-        <SearchIcon onClick={toggleSearch} />
+      <SearchContainer className="dark:bg-black">
+        <SearchIcon onClick={toggleSearch} className="dark:text-white"/>
         <SearchInput
           isFocused={isFocused}
           type="text"
@@ -226,6 +226,7 @@ const Hamburger = () => {
           onChange={handleSearchChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          className="dark:bg-black dark:text-white dark:placeholder:text-gray-300"
         />
         {showSearch && searchTerm && <ClearIcon onClick={clearSearch} />}
       </SearchContainer>
diff --git a/frontend/src/components/navbar.jsx b/frontend/src/components/navbar.jsx
index 00c09a5..6953bbf 100644
--- a/frontend/src/components/navbar.jsx
+++ b/frontend/src/components/navbar.jsx
@@ -93,7 +93,7 @@ const Navbar = () => {
   return (
     <>
       {/* Navigation Toggle for All Screens (Mobile and Larger Screens) */}
-      <div className="flex items-center justify-between p-4 bg-blue-500">
+      <div className="flex items-center justify-between p-4 bg-blue-500 dark:bg-black">
         <button onClick={toggleMenu}>
           {isOpen ? <FaTimes className="text-2xl text-black" /> : <FaBars className="text-2xl text-white" />}
         </button>
diff --git a/frontend/src/components/popup.jsx b/frontend/src/components/popup.jsx
index 37495e7..d24c3f8 100644
--- a/frontend/src/components/popup.jsx
+++ b/frontend/src/components/popup.jsx
@@ -28,10 +28,10 @@ const Popup = () => {
 
   return (
     isVisible && (
-      <div className="fixed bottom-5 right-5 flex items-center justify-center bg-[rgba(252,249,249,0.8)] z-[100000] rounded-lg shadow-lg w-[400px] p-5">
-        <div className="relative flex flex-col w-full bg-[#f0eeee] rounded-lg overflow-hidden">
+      <div className="fixed bottom-5 right-5 flex items-center justify-center bg-[rgba(252,249,249,0.8)] dark:bg-black z-[100000] rounded-lg shadow-lg w-[400px] p-5">
+        <div className="relative flex flex-col w-full bg-[#f0eeee] dark:bg-gray-600 rounded-lg overflow-hidden">
           <button
-            className="absolute top-3 right-3 text-black font-bold text-2xl z-[1001]"
+            className="absolute top-3 right-3 text-black dark:text-white font-bold text-2xl z-[1001]"
             onClick={handleClose}
           >
             X
@@ -40,13 +40,13 @@ const Popup = () => {
             <img src={railwaysImage} alt="Railways" className="w-full h-full object-cover rounded-1/2" />
           </div>
           <div className="w-full p-4 flex flex-col items-center justify-center">
-            <h1 className="text-2xl font-bold text-center text-[#131010] mb-2">Welcome to Station Saarthi</h1>
-            <h2 className="text-lg font-semibold text-center text-[#261d1d] mb-4">Travel without stress. Sign in now!</h2>
+            <h1 className="text-2xl font-bold text-center text-[#131010] dark:text-white mb-2">Welcome to Station Saarthi</h1>
+            <h2 className="text-lg font-semibold text-center text-[#261d1d] dark:text-white mb-4">Travel without stress. Sign in now!</h2>
             <form onSubmit={handleSubmit} className="w-full flex flex-col items-center">
               <input
                 type="email"
                 id="popup-email"
-                className="p-2 w-4/5 border border-gray-400 rounded-md mb-4 text-base"
+                className="p-2 w-4/5 border dark:bg-gray-400 dark:placeholder:text-white border-gray-400 rounded-md mb-4 text-base"
                 placeholder="Enter Email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -54,12 +54,12 @@ const Popup = () => {
               />
               <button
                 type="submit"
-                className="w-4/5 p-2 bg-blue-600 text-white rounded-md text-base font-bold cursor-pointer"
+                className="w-4/5 p-2 bg-blue-600 dark:bg-gray-900 text-white rounded-md text-base font-bold cursor-pointer"
               >
                 Sign me up!
               </button>
             </form>
-            <p className="text-xs text-center text-[#0e0a0a] mt-4">
+            <p className="text-xs text-center text-[#0e0a0a] dark:text-white mt-4">
               By signing in, I agree to Station Saarthi's{' '}
               <a href="#" className="text-blue-500">Terms of Service</a> and{' '}
               <a href="#" className="text-blue-500">Privacy Policy</a>.
diff --git a/frontend/src/hooks/useDarkMode.js b/frontend/src/hooks/useDarkMode.js
index 1513686..b391abf 100644
--- a/frontend/src/hooks/useDarkMode.js
+++ b/frontend/src/hooks/useDarkMode.js
@@ -7,8 +7,10 @@ const useDarkMode = () => {
     const root = document.documentElement;
     const isDark = theme === 'dark';
     root.classList.toggle('dark', isDark);
+    console.log(`Theme set to ${theme}, dark mode is ${isDark ? 'enabled' : 'disabled'}`);
     localStorage.setItem('theme', theme);
   }, [theme]);
+  
 
   return [theme, setTheme];
 };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6bdcac8..52339c9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,9 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+    },
   },
   plugins: [],
-}
-
+};