Revert "Revert "Add Full Dark Mode Support with Tailwind CSS v4 + ThemeContex""

client/src/App.jsx

@@ -1,58 +1,63 @@
-import { useState } from 'react';
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import LandingPage from './pages/LandingPage';
-import SignupPage from './pages/SignupPage';
-import LoginPage from './pages/LoginPage';
-import NotesPage from './pages/NotesPage';
-import PyqsPage from './pages/PyqsPage';
-import UploadNotesPage from './pages/UploadNotesPage';
-import UploadPyqsPage from './pages/UploadPyqsPage';
-import Navbar from './components/Navbar';
-import { AuthProvider } from './context/AuthContext';
-import Profile from './pages/Profile';
-import UserProfile from './pages/UserProfile';
-import MyNotes from './pages/MyNotes';
-import MyPyqs from './pages/MyPyqs';
-import About from './pages/About'
-import ContactUs from './pages/ContactUs'
+import { useState } from "react";
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+import LandingPage from "./pages/LandingPage";
+import SignupPage from "./pages/SignupPage";
+import LoginPage from "./pages/LoginPage";
+import NotesPage from "./pages/NotesPage";
+import PyqsPage from "./pages/PyqsPage";
+import UploadNotesPage from "./pages/UploadNotesPage";
+import UploadPyqsPage from "./pages/UploadPyqsPage";
+import Navbar from "./components/Navbar";
+import { AuthProvider } from "./context/AuthContext";
+import Profile from "./pages/Profile";
+import UserProfile from "./pages/UserProfile";
+import MyNotes from "./pages/MyNotes";
+import MyPyqs from "./pages/MyPyqs";
+import About from "./pages/About";
+import ContactUs from "./pages/ContactUs";
 import ReactGA from "react-ga4";
-import usePageTracking from './hooks/usePageTracking';
+import usePageTracking from "./hooks/usePageTracking";
 
 ReactGA.initialize(import.meta.env.VITE_GA_MEASUREMENT_ID);
+
 function App() {
   return (
     <AuthProvider>
       <Router>
         <GAListener />
-        <div className="min-h-screen bg-gray-50">
+        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
           <Navbar />
           <Routes>
             <Route path="/" element={<LandingPage />} />
             <Route path="/signup" element={<SignupPage />} />
             <Route path="/login" element={<LoginPage />} />
             <Route path="/AllNotes" element={<NotesPage />} />
             <Route path="/pyqs" element={<PyqsPage />} />
-            <Route path="/upload-notes" element={<UploadNotesPage/>} />
+            <Route path="/upload-notes" element={<UploadNotesPage />} />
             <Route path="/upload-pyqs" element={<UploadPyqsPage />} />
             <Route path="/Profile" element={<Profile />} />
             <Route path="/Profile/:userId" element={<UserProfile />} />
             <Route path="/my-notes" element={<MyNotes />} />
             <Route path="/my-pyqs" element={<MyPyqs />} />
             <Route path="/About" element={<About />} />
             <Route path="/ContactUs" element={<ContactUs />} />
-
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </div>
       </Router>
     </AuthProvider>
-  )
+  );
 }
 
-export default App
+export default App;
 
 function GAListener() {
   usePageTracking();
   return null;
-}
+}

client/src/components/GoogleButton.jsx

@@ -3,86 +3,56 @@ import { Chrome } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { authenticationPopup, getGoogleToken } from '../../firebase/firebasePopup';
 import { toast } from 'react-hot-toast';
-import axios from 'axios'
+import axios from 'axios';
 import { useAuth } from '../context/AuthContext';
 
 const GoogleAuthButton = () => {
   const navigate = useNavigate();
-  const {login} = useAuth()
+  const { login } = useAuth();
 
-  const chromeIconStyle = {
-    width: "1.25rem",
-    height: "1.25rem",
-    marginRight: "0.75rem",
-    color: "#3b82f6",
-  };
-
-  const buttonStyle = {
-    margin:"auto",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    maxWidth: "20rem",
-    padding: "0.75rem 1.5rem",
-    fontSize: "1rem",
-    fontWeight: 500,
-    color: "#4b5563", 
-    backgroundColor: "#ffffff", 
-    border: "1px solid #d1d5db",
-    borderRadius: "0.5rem", 
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
-    transition: "background-color 0.2s, color 0.2s",
-    cursor: "pointer",
-  };
-
-  const buttonHoverStyle = {
-    backgroundColor: "#f9fafb", 
-  };
-
-  const buttonFocusStyle = {
-    outline: "none",
-    boxShadow: "0 0 0 2px rgba(59, 130, 246, 0.5)", 
-  };
-
-
-  async function handleGoogleAuth() {
+  const handleGoogleAuth = async () => {
     try {
       await authenticationPopup();
       const googleToken = await getGoogleToken();
-      const response = await axios.post(`${import.meta.env.VITE_BASE_URL_BACKEND}/google-auth`, {}, {
-        headers:{
-            authorization:`Bearer ${googleToken}`
+
+      const response = await axios.post(
+        `${import.meta.env.VITE_BASE_URL_BACKEND}/google-auth`,
+        {},
+        {
+          headers: {
+            authorization: `Bearer ${googleToken}`,
+          },
         }
-      })
-      if(!response){
-        console.log("Error in Authenticating through google");
-        toast('⚠️ Failed to Authenticate You');
+      );
+
+      if (!response) {
+        toast.error('⚠️ Failed to Authenticate You');
         return;
-    }
-    console.log("response of google auth ", response.data);
-      login(response.data.user, response.data.token)
+      }
+
+      login(response.data.user, response.data.token);
       navigate('/');
       toast.success('Authenticated!!!');
-  } catch (error) {
+    } catch (error) {
       if (error.response && error.response.data) {
-      toast.error(error.response.data.message); // 👈 you catch the backend message here
-    }
-      // toast.error(`${error.message}`);
-      console.error("Google Authentication failed:", error);
+        toast.error(error.response.data.message);
+      }
+      console.error('Google Authentication failed:', error);
     }
-  }
+  };
 
   return (
     <button
       onClick={handleGoogleAuth}
-      style={buttonStyle}
-      onMouseEnter={(e) => Object.assign(e.target.style, buttonHoverStyle)}
-      onMouseLeave={(e) => Object.assign(e.target.style, buttonStyle)}
-      onFocus={(e) => Object.assign(e.target.style, buttonFocusStyle)}
-      onBlur={(e) => Object.assign(e.target.style, buttonStyle)}
+      className="w- max-w-xs flex items-center m-auto justify-center gap-3 px-6 py-3 rounded-md 
+                 text-gray-600 dark:text-gray-200 
+                 bg-white dark:bg-gray-800 
+                 border border-gray-300 dark:border-gray-700 
+                 shadow transition-colors duration-300 
+                 hover:bg-gray-50 dark:hover:bg-gray-700 
+                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-offset-gray-900"
     >
-      <Chrome style={chromeIconStyle} />
+      <Chrome className="w-5 h-5 text-blue-500" />
       Continue with Google
     </button>
   );

client/src/components/Mainlayout.jsx

@@ -1,48 +1,24 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import Navbar from './Navbar';
 import Sidebar from './Sidebar';
-import LandingPage from './LandingPage';
-import React from 'react';
+import LandingPage from '../pages/LandingPage';
+import { ThemeContext } from '../context/ThemeContext'; // 
 
 const MainLayout = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [darkMode, setDarkMode] = useState(() => {
-    if (typeof window !== 'undefined') {
-      const savedMode = localStorage.getItem('darkMode');
-      if (savedMode !== null) {
-        return savedMode === 'true';
-      }
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    return false;
-  });
-
-  useEffect(() => {
-    const html = document.documentElement;
-    if (darkMode) {
-      html.classList.add('dark');
-      localStorage.setItem('darkMode', 'true');
-    } else {
-      html.classList.remove('dark');
-      localStorage.setItem('darkMode', 'false');
-    }
-  }, [darkMode]);
+  const { theme, toggleTheme } = useContext(ThemeContext); 
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-  };
-
   return (
-    <div className="relative">
+    <div className="relative transition-colors duration-500">
       <Navbar 
         isSidebarOpen={isSidebarOpen}
         toggleSidebar={toggleSidebar}
-        toggleDarkMode={toggleDarkMode}
-        darkMode={darkMode}
+        toggleDarkMode={toggleTheme} //  use context method
+        darkMode={theme === 'dark'} //  send theme info
       />
       <Sidebar 
         isOpen={isSidebarOpen}
@@ -53,4 +29,4 @@ const MainLayout = () => {
   );
 };
 
-export default MainLayout;
+export default MainLayout;