Added DarkMode/LightMode

package.json

@@ -7,13 +7,14 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "darkmode-js": "^1.5.7",
     "firebase": "^9.9.4",
     "gh-pages": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
     "react-icons": "^4.4.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "reactjs-popup": "^2.0.5",
     "web-vitals": "^2.1.0"
   },

src/components/Home/Home.css

@@ -24,4 +24,11 @@
     padding-right: 15px;
     padding-top: 15px;
     font-weight: 500;
-}
+}
+
+
+
+/*  CSS for Dark/Light Button... */
+
+
+

src/components/Home/Home.js

@@ -12,11 +12,11 @@ import { BsThreeDotsVertical } from 'react-icons/bs';
 import { MdDelete } from 'react-icons/md';
 
 const Home = () => {
-    const {state} = useContext(UserContext);
+    const { state } = useContext(UserContext);
     const [taskList, setTaskList] = useState([]);
     const [isTaskList, setIsTaskList] = useState(false);
     const [isTaskListLoading, setTaskListLoading] = useState(true);
-
+   
     const GetTaskList = async () => {
         const q = query(collection(db, 'TaskList'), where('board_id', '==', state.default_board));
         onSnapshot(q, (querySnapshot) => {
@@ -37,7 +37,7 @@ const Home = () => {
 
     return (
         <div className='main__container'>
-            { state?.uid && <Navbar /> }
+            {state?.uid && <Navbar />}
             <div className='home__container'>
                 <div className='board_container'>
                     <h3>Main Board</h3>
@@ -56,7 +56,7 @@ const Home = () => {
                         arrowStyle={{ color: '#3A3C45' }}
                         arrow={true}
                     >
-                        <MenuOptions id = {state?.default_board} />
+                        <MenuOptions id={state?.default_board} />
                     </Popup>
                 </div>
 
@@ -75,23 +75,25 @@ const Home = () => {
                         </>
                     }
                 </div>
+
             </div>
+
         </div>
     );
 };
 
 // eslint-disable-next-line react/prop-types
-const MenuOptions = ({id}) => {
+const MenuOptions = ({ id }) => {
     const DeleteTask = async (id) => {
         await deleteDoc(doc(db, 'Board', id));
     };
     return (
         <div className="menu">
             <div className="menu-item"
                 onClick={() => DeleteTask(id)}
-            > 
+            >
                 <MdDelete className='menu-icon' />
-                Delete 
+                Delete
             </div>
         </div>
     );

src/components/Login/Login.js

@@ -5,10 +5,9 @@ import { auth, db, provider } from '../../firebase/firebase';
 import GoogleButton from 'react-google-button';
 import './Login.css';
 import { addDoc, collection, doc, getDoc, setDoc } from 'firebase/firestore';
-
 const Login = () => {
     const {dispatch} = useContext(UserContext);
-
+    
     const Login = async () => {
         const result = await signInWithPopup(auth, provider);
 

src/components/Navbar/Navbar.css

@@ -111,6 +111,7 @@
     display: flex;
     align-items: center;
     margin: 0px 20px;
+    /* margin-right: 130px; */
 }
 
 .profile__pic {
@@ -124,4 +125,11 @@
     position: relative;
     z-index: 0;
     cursor: pointer;
-}
+}
+
+
+
+
+/* CSS for dark/light mode.... */
+
+

src/components/Navbar/Navbar.js

@@ -1,18 +1,19 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import './Navbar.css';
 import { TbMenu2 } from 'react-icons/tb';
 import { AiOutlineSearch } from 'react-icons/ai';
 import { UserContext } from '../../App';
 import Popup from 'reactjs-popup';
 import { BsPower } from 'react-icons/bs';
-
+import Togglebtn from '../ToggleButton/togglebutton';
 const Navbar = () => {
-    const {state} = useContext(UserContext);
-
+    const { state } = useContext(UserContext);
 
 
+
     return (
         <div className='navbar__container'>
+
             {/* TODO: Menu symbol and Logout */}
             <div className='navbar__left'>
                 <TbMenu2 className='navbar__menu' />
@@ -27,15 +28,17 @@ const Navbar = () => {
                 <div className="input__container">
                     <input type="text" placeholder='Search' className='search__input' />
                 </div>
-            </div>
+                <Togglebtn/>
 
-
+            </div>
+
             {/* TODO: Profile Photoz */}
+
 
             <Popup
                 trigger={
                     <div className='navbar__right'>
-                        <img src={state?.photo} alt="" className="profile__pic"  />
+                        <img src={state?.photo} alt="" className="profile__pic" />
                     </div>
                 }
                 position="left top"
@@ -44,29 +47,31 @@ const Navbar = () => {
                 mouseLeaveDelay={300}
                 mouseEnterDelay={0}
                 contentStyle={{ padding: '0px', border: '1px black solid', borderRadius: '10px', }}
-                arrowStyle={{ color: '#3A3C45'}}
+                arrowStyle={{ color: '#3A3C45' }}
                 arrow={false}
             >
                 <MenuOptions />
             </Popup>
+
         </div>
     );
 };
 
 const MenuOptions = () => {
-    const {dispatch} = useContext(UserContext);
+    const { dispatch } = useContext(UserContext);
     const Logout = () => {
         localStorage.clear();
-        dispatch({type:'CLEAR'});
+        dispatch({ type: 'CLEAR' });
     };
     return (
         <div className="menu">
             <div className="menu-item"
                 onClick={Logout}
-            > 
+            >
                 <BsPower className='menu-icon' />
-                Logout 
+                Logout
             </div>
+
         </div>
     );
 };

src/components/ToggleButton/togglebutton.css

@@ -0,0 +1,99 @@
+#toggle_checkbox
+{
+    display: none;
+}
+
+label
+{
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: -80%;
+    /* left: 80%; */
+    width: 80px;
+    height: 40px;
+    margin: 0 auto;
+    background-color: #094992;
+    border-radius: 56px;
+    transform: translate(0,-50%);
+    cursor: pointer;
+    transition: 0.3s ease background-color;
+    overflow: hidden;
+}
+
+#star
+{
+    position: absolute;
+    top: 10px;
+    left: 13px;
+    width: 20px;
+    height: 20px;
+    background-color: #fafd0f;
+    transform: scale(1.3);
+    border-radius: 50%;
+    transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
+    z-index: 1;
+}
+
+
+
+
+
+.star
+{
+    /*  */
+    color: #fafd0f;
+    transition: 0.3s ease color;
+}
+
+#moon
+{
+    position: absolute;
+    bottom: -48px;
+    right: 8px;
+    width: 30px;
+    height: 30px;
+    background-color: #d1a5a5;
+    border-radius: 50%;
+    transition: 0.3s ease bottom;
+}
+
+#moon:before
+{
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: -17px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    transition: 0.3s ease background-color;
+}
+
+#toggle_checkbox:checked + label
+{
+    background-color: #000;
+}
+
+#toggle_checkbox:checked + label #star
+{
+    top: 3px;
+    left: 64px;
+    transform: scale(0);
+    background-color: yellow;
+}
+
+#toggle_checkbox:checked + label .star
+{
+    color: yellow;
+}
+
+#toggle_checkbox:checked + label #moon
+{
+    bottom: 7px;
+}
+
+#toggle_checkbox:checked + label #moon:before
+{
+    background-color: #000;
+}

src/components/ToggleButton/togglebutton.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './togglebutton.css'
+export default function togglebutton() {
+  return (
+    <div>
+        <input type="checkbox" id="toggle_checkbox"/>
+
+<label for="toggle_checkbox">
+  <div id="star">
+    <div class="star" id="star-1">★</div>
+    <div class="star" id="star-2">★</div>
+  </div>
+  <div id="moon"></div>
+</label>
+    </div>
+  )
+}

src/index.css

@@ -11,3 +11,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+html, body
+{
+    height: 100%;
+}
+
+body
+{
+    margin: 0;
+    background-color: #fff;
+}
+