From be5649deef97c626b399471073396e4334a57ae2 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Sat, 1 Jun 2024 19:49:42 +0530
Subject: [PATCH] added dark mode

---
 frontend/src/App.js                           |  8 +++--
 .../src/components/LoginComponents/Input.js   |  9 +++---
 .../src/components/LoginComponents/Main.js    | 22 ++++++++++----
 .../src/components/SignupComponents/Main.js   | 20 ++++++++-----
 .../components/ToggleMode/DarkModeContext.js  | 30 +++++++++++++++++++
 frontend/src/pages/Home.js                    |  9 +++---
 frontend/src/pages/Service.js                 |  8 +++--
 7 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/ToggleMode/DarkModeContext.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index eb5b42d..df1d680 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -13,6 +13,7 @@ import Settings from './pages/Settings';
 
 import Root,{loader as loadingAction} from './pages/Root';
 import Search from './pages/Search';
+import { DarkModeProvider } from './components/ToggleMode/DarkModeContext';
 
 
 const router = createBrowserRouter([
@@ -60,8 +61,11 @@ const router = createBrowserRouter([
   }
 ]);
 function App() {
-  return (<RouterProvider router={router} />);
-}
+  return (
+  <DarkModeProvider>
+    <RouterProvider router={router} />
+  </DarkModeProvider>
+);}
 
 export default App;
 
diff --git a/frontend/src/components/LoginComponents/Input.js b/frontend/src/components/LoginComponents/Input.js
index 862de15..2c9e4d7 100644
--- a/frontend/src/components/LoginComponents/Input.js
+++ b/frontend/src/components/LoginComponents/Input.js
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import { DarkModeContext } from '../ToggleMode/DarkModeContext';
 export default function Input({text,type,placeholder,onSetData,name}) {
-
+  const {isDarkMode}=useContext(DarkModeContext)
   function setInput(e)
   {
     onSetData((data)=>{
@@ -13,8 +14,8 @@ export default function Input({text,type,placeholder,onSetData,name}) {
 
   return (
     <div className='mt-3 '>
-          <div className='font-poppiins font-medium mb-2 text-[#BFBFBF] '>{text}</div>
-          <input spellCheck="false" onChange={setInput}type={type} className='outline-0 border-[1px] rounded-md w-[100%] px-2 py-2  font-poppins border-[#BFBFBF]' placeholder={placeholder}></input>
+          <div className={`font-poppiins font-medium mb-2 text-[#BFBFBF] ${isDarkMode?"text-white outline-none border-none border-b-2 border-white":""}`}>{text}</div>
+          <input spellCheck="false" onChange={setInput}type={type} className={` outline-0 border-[1px] rounded-md w-[100%] px-2 py-2  font-poppins border-[#BFBFBF]`}   placeholder={placeholder}></input>
         </div>
   )
 }
diff --git a/frontend/src/components/LoginComponents/Main.js b/frontend/src/components/LoginComponents/Main.js
index 2c99de4..4a280af 100644
--- a/frontend/src/components/LoginComponents/Main.js
+++ b/frontend/src/components/LoginComponents/Main.js
@@ -1,4 +1,4 @@
-import React,{useState} from 'react'
+import React,{useContext, useState} from 'react'
 import { Link } from 'react-router-dom'
 import Input from './Input'
 import Square from './Square'
@@ -14,10 +14,14 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { ToastContainer, toast } from "react-toastify";
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { DarkModeContext } from '../ToggleMode/DarkModeContext'
+import {FaSun,FaMoon} from 'react-icons/fa6'
+
 export default function Main() {
 
 
   const submit=useSubmit();
+  const {isDarkMode,toggleMode}=useContext(DarkModeContext)
   const [loginData,setloginData]=useState({email:'',password:''});
   const [submitting,setSubmiting]=useState(false)
   const [showPassword, setShowPassword] = useState(false);
@@ -73,18 +77,23 @@ export default function Main() {
   const handleMouseDownPassword = (event) => event.preventDefault(); // Prevent default action on mouse down
 
   return (
-    <div className='flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2'>
+    <>
+   
+                    <div className='absolute right-10 z-[99] top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' className='z-[99]' size={'2rem'}/>:<FaMoon size={'2rem'} className='z-[99]' />}</button></div>
+
+    <div className={`flex flex-col ${isDarkMode?"bg-black":""} items-center h-[100vh] w-[100vw] relative overflow-hidden px-2`}>
+
     <Square></Square>
     <Square isRight={true}></Square>
-  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' elevation={3}>
+  <Paper className={`  z-20 w-full max-w-[370px] p-[2rem] my-auto`} style={{backgroundColor:`${isDarkMode?"rgba(255,255,255,0.1)":""}`}} elevation={3}>
 
-        <div className='font-Poppins text-3xl font-extrabold flex items-center flex-col'>
+        <div className={`${isDarkMode?"text-white":""} font-Poppins text-3xl font-extrabold flex items-center flex-col`}>
         <LockOpenIcon fontSize='large' color='primary'/>
           <Typography variant='h5'>Log In</Typography>
         </div>
 <br />
 <hr></hr>
-<form className='mt-6 relative'>
+<form className={` mt-6 relative`}>
   <Input onSetData={setloginData}  name='email' text="Email ID" placeholder="Email address" type='text'></Input>
   <div className='relative'>
             <Input
@@ -112,7 +121,7 @@ export default function Main() {
     </Box>}
     </Button>
   </div>
-  <Typography className='text-center py-3'>Already have and account ? <Link className='text-blue-600' to="/signup">SignUp</Link></Typography>
+  <Typography className={`${isDarkMode?"text-white":""} text-center py-3`}>Already have and account ? <Link className='text-blue-600' to="/signup">SignUp</Link></Typography>
 
   <div className='h-[1px] w-[100%] mt-10 bg-[#808080]'></div>
   <div className='flex flex-col items-center mt-6'>
@@ -123,5 +132,6 @@ export default function Main() {
 </form>
 </Paper>
 </div>
+</>
   )
 }
diff --git a/frontend/src/components/SignupComponents/Main.js b/frontend/src/components/SignupComponents/Main.js
index 910b306..3b0367c 100644
--- a/frontend/src/components/SignupComponents/Main.js
+++ b/frontend/src/components/SignupComponents/Main.js
@@ -1,4 +1,4 @@
-import React,{useState} from 'react'
+import React,{useContext, useState} from 'react'
 import Input from '../LoginComponents/Input'
 import Square from '../LoginComponents/Square'
 import { GoogleLogin } from '@react-oauth/google'
@@ -13,12 +13,15 @@ import HowToRegIcon from '@mui/icons-material/HowToReg';
 import { ToastContainer, toast } from "react-toastify";
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { DarkModeContext } from '../ToggleMode/DarkModeContext';
+import {FaSun,FaMoon} from 'react-icons/fa6'
 
 export default function Main() {
 
 
   const navigation=useNavigation();
   const submit=useSubmit();
+  const {isDarkMode,toggleMode}=useContext(DarkModeContext)
   const [SignUpData,setSignUpData]=useState({name:'',email:'',password:''});
   const[submiting,setSubmiting]=useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -143,18 +146,21 @@ export default function Main() {
   const handleClickShowPassword = () => setShowPassword(!showPassword); // Toggle password visibility
   const handleMouseDownPassword = (event) => event.preventDefault(); // Prevent default action on mouse down
   return (
-    <div className='flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2'>
+    <>
+                        <div className='absolute right-10 z-[99] top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' className='z-[99]' size={'2rem'}/>:<FaMoon size={'2rem'} className='z-[99]' />}</button></div>
+
+    <div className={`flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2 ${isDarkMode?"bg-black":""} `}>
     <Square></Square>
     <Square isRight={true}></Square>
-  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' elevation={3}>
-        <div className='font-Poppins text-3xl font-extrabold flex items-center flex-col'>
+  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' style={{backgroundColor:`${isDarkMode?"rgba(255,255,255,0.1)":""}`}}  elevation={3}>
+        <div className={`font-Poppins text-3xl font-extrabold flex items-center flex-col ${isDarkMode?"text-white":""}`}>
         <HowToRegIcon fontSize='large' color='primary'/>
           <Typography variant='h5'>Sign Up</Typography>
         </div>
 <br />
 <hr></hr>
 <form className='mt-6 relative'>
-  <Input onSetData={setSignUpData} name='name' text='Name' placeholder='Enter your name' type='text'></Input>
+  <Input  onSetData={setSignUpData} name='name' text='Name' placeholder='Enter your name' type='text'></Input>
   <Input onSetData={setSignUpData} name='email' text="Email ID" placeholder="Enter Email Address" type='text'></Input>
   <div className='relative'>
             <Input
@@ -182,7 +188,7 @@ export default function Main() {
     </Box>}
   </Button>
   </div>
-  <Typography className='text-center py-3'>Already have and account ? <Link className='text-blue-600' to="/login">LogIn</Link></Typography>
+  <Typography className={`${isDarkMode?"text-white":""} text-center py-3 `}>Already have and account ? <Link className='text-blue-600' to="/login">LogIn</Link></Typography>
   <div className='h-[1px] w-[100%] mt-4 bg-[#808080]'></div>
   <div className='flex flex-col items-center mt-6'>
       {/* <Link to='/signup' className='text-[#5A5A5A] font-medium border-2 border-[#5A5A5A] hover:border-black px-32 rounded-[40px] mt-7 py-4 tracking-wide'>SIGN UP FOR SPOTIFY</Link> */}
@@ -190,6 +196,6 @@ export default function Main() {
   </div>
 </form>
     </Paper>
-</div>
+</div></>
   )
 }
diff --git a/frontend/src/components/ToggleMode/DarkModeContext.js b/frontend/src/components/ToggleMode/DarkModeContext.js
new file mode 100644
index 0000000..7ff181d
--- /dev/null
+++ b/frontend/src/components/ToggleMode/DarkModeContext.js
@@ -0,0 +1,30 @@
+import React, { createContext, useEffect, useState } from 'react';
+import {FaSun,FaMoon} from 'react-icons/fa6'
+export const DarkModeContext = createContext();
+
+export function DarkModeProvider({ children }) {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedMode = localStorage.getItem('mode') || 'light';
+    setIsDarkMode(savedMode === 'dark');
+  }, []);
+
+  const toggleMode = () => {
+    if (isDarkMode) {
+      setIsDarkMode(false);
+      localStorage.setItem('mode', 'light');
+    } else {
+      setIsDarkMode(true);
+      localStorage.setItem('mode', 'dark');
+    }
+  };
+
+  return (
+    <DarkModeContext.Provider value={{ isDarkMode ,toggleMode}}>
+        <div className='absolute right-10 top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' size={'2rem'}/>:<FaMoon size={'2rem'} />}</button></div>
+        {children}
+     
+    </DarkModeContext.Provider>
+  );
+}
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 2b7a65a..2c535b3 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import NavBar from '../components/HomeComponents/NavBar'
 import Description from '../components/HomeComponents/Description'
 import Service from './Service'
@@ -6,8 +6,9 @@ import { useState } from 'react'
 import LoadingPage from './LoadingPage'
 
 import { useNavigate } from 'react-router-dom'
+import { DarkModeContext } from '../components/ToggleMode/DarkModeContext'
 export default function Home() {
-
+  const {isDarkMode}=useContext(DarkModeContext)
   const navigate=useNavigate();
   const [isLoading,setIsLoading]=useState(true);
 
@@ -15,7 +16,7 @@ export default function Home() {
     
     const checkIfLoggedIn=async()=>{
       const cookie=localStorage.getItem('jwt');
-      const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`,{
+      const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`,{     
       method:'post',
       headers:{
         'Content-type':'application/json',
@@ -39,7 +40,7 @@ export default function Home() {
   return (
      <div>
       {isLoading&&<LoadingPage></LoadingPage>}
-      {!isLoading&&(<><div className='h-[100vh] px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
+      {!isLoading&&(<><div className={` h-[100vh] ${isDarkMode?"text-white bg-black":""} px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]`}>
         <NavBar/>
         <Description></Description>
      </div>
diff --git a/frontend/src/pages/Service.js b/frontend/src/pages/Service.js
index 22f5b92..db065d7 100644
--- a/frontend/src/pages/Service.js
+++ b/frontend/src/pages/Service.js
@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Card from '../components/HomeComponents/Card'
+import { DarkModeContext } from '../components/ToggleMode/DarkModeContext'
 
 export default function Service() {
+  const {isDarkMode}=useContext(DarkModeContext)
   return (
-    <div className='h-[100vh] px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center'>
+    <div className={`h-[100vh] ${isDarkMode?"bg-black text-white":""} px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center`}>
     <div className='flex flex-col items-center'>
       <div className='w-[60%]'>
-      <div className='text-[#384055] text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl'>Get the best of all the features</div>
+      <div className={`text-[#384055]  ${isDarkMode?"bg-black text-white":""} text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl`}>Get the best of all the features</div>
       </div>
       <div className=" mt-[10%] w-[70vw] max-[653px]:gap-4 grid grid-cols-1 place-items-center sm:grid-cols-2 gap-10">
         <Card title='Simple' description='With intuitive interface,ChatBox is so simple you already know how to use it'></Card>