Dark Mode added

src/App.jsx

@@ -1,14 +1,25 @@
+import React from 'react';
 import Header from './components/Header';
 import ToDoContainer from './components/ToDoContainer';
+import '../src/dark.css';
 
 function App() {
+  const [darkToggle, setDarkToggle] = React.useState(false);
   return (
-    <>
-      <Header />
-      <div className='w-[95%] flex flex-col m-auto mt-12 bg-white rounded-md md:w-[80%] lg:w-1/2'>
-        <ToDoContainer />
+    <div className={`${darkToggle && 'dark'}`}>
+      <div className={`h-[100vh] dark:bg-gray-800`}>
+        <Header />
+        <div
+          className={`w-[95%] flex flex-col m-auto mt-12 bg-white dark:bg-gray-800 rounded-md md:w-[80%] lg:w-1/2`}
+        >
+          <label className='toggleDarkBtn'>
+            <input type='checkbox' onClick={() => setDarkToggle(!darkToggle)} />
+            <span className='slideBtnTg round'></span>
+          </label>
+          <ToDoContainer />
+        </div>
       </div>
-    </>
+    </div>
   );
 }
 

src/components/Header.jsx

@@ -2,9 +2,11 @@ import coffeelogo from '../assets/coffee-to-go.svg';
 
 export default function Header() {
   return (
-    <div className='flex justify-center my-4'>
+    <div className='flex justify-center my-4 dark:bg-gray-800'>
       <img src={coffeelogo} className='w-10 mx-3' alt='logo' />
-      <span className='text-coffeeDark text-3xl font-extrabold'>Coffee Tasks</span>
+      <span className='text-coffeeDark text-3xl font-extrabold dark:text-orange-400'>
+        Coffee Tasks
+      </span>
     </div>
   );
 }

src/components/Nav.jsx

@@ -17,13 +17,13 @@ export default function Nav({ setTodos, setFilter }) {
   };
 
   return (
-    <div className='flex justify-between py-2.5 border-b-2 border-coffeeDark'>
+    <div className='flex justify-between px-5 py-2.5 border-b-2 border-coffeeDark'>
       <PopUp visible={popUpvisible} trigger={setPopUpvisible} setTodos={setTodos} />
 
       <div className='w-[100%] flex justify-between align-middle'>
         <Button
           clickHandler={handlePopUpOpen}
-          className='mt-[2px] mr-3 text-[8px] sm:text-[10px] lg:text-[16px]'
+          className='mt-[2px] mr-3 dark:bg-stone-800 dark:border-none text-[8px] sm:text-[10px] lg:text-[16px]'
           title='Add Task'
         />
         <SelectButton

src/components/PopUp.jsx

@@ -1,58 +1,45 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SelectButton from './atomic/SelectButton';
 import Input from './atomic/Input';
 import Button from './atomic/Button';
 import multiply from '../assets/multiply.svg';
+import { v4 as uuid } from 'uuid';
 
 const options = [
   { value: 'complete', label: 'Complete' },
   { value: 'incomplete', label: 'Incomplete' },
 ];
 export default function PopUp({ trigger, todos, setTodos, visible, editTodo }) {
-  const [status, setStatus] = useState(editTodo ? editTodo.status : 'incomplete');
-  const [currentTask, setCurrentTask] = useState(editTodo ? editTodo.title : '');
-  const [description, setDescription] = useState(editTodo ? editTodo.description : '');
-  const [showFields, setShowFields] = useState(false);
-  const [error, setError] = useState(null);
-
   const handleKeyDown = (e) => {
     if (e.key === 'Enter') {
       if (editTodo) return editTask(e);
       else return addTask(e);
     }
   };
+  const [status, setStatus] = useState(editTodo ? editTodo.status : 'incomplete');
+  const [currentTask, setCurrentTask] = useState(editTodo ? editTodo.title : '');
+  const [error, setError] = useState(null);
 
   const handleInputChange = (e) => {
     setCurrentTask(e.target.value);
   };
 
-  const handleDescriptionChange = (e) => {
-    setDescription(e.target.value);
-  };
-
   const handleClosePupUp = () => {
     setError(null);
     trigger(false);
   };
-
   const defaultState = () => {
     setCurrentTask('');
-    setDescription('');
     setError(null);
     trigger(false);
   };
-
   const editTask = (e) => {
     e.preventDefault();
     if (currentTask === '') setError('Please enter the title!');
     else {
       const newTodo = {
         title: currentTask,
-        description,
         status: status.value ? status.value : status,
         id: uuid(),
       };
@@ -63,15 +50,13 @@ export default function PopUp({ trigger, todos, setTodos, visible, editTodo }) {
       defaultState();
     }
   };
-
   const addTask = (e) => {
     e.preventDefault();
     if (currentTask === '') setError('Please enter the title!');
-    else if(currentTask.trim().length == 0) setError('Please enter a non empty title!');
+    else if (currentTask.trim().length == 0) setError('Please enter a non empty title!');
     else {
       const newTodo = {
         title: currentTask,
-        description,
         status: status.value ? status.value : status,
         id: uuid(),
       };
@@ -84,8 +69,7 @@ export default function PopUp({ trigger, todos, setTodos, visible, editTodo }) {
     <div
       style={{ zIndex: 9 }}
       className={`${
-        visible ? `scale-100` : `scale-0`
-      } flex absolute inset-0 w-full h-full bg-black/50 flex-col justify-center items-center z-[9999]`}
+        visible ? `scale-100` : `scale-0`} flex absolute inset-0 w-full h-full bg-black/50 flex-col justify-center items-center z-[9999]`}
     >
       <div className={'w-4/5 max-w-sm'}>
         <div className='w-[10%] bg-coffeePrimaryLight mb-2 flex justify-center ml-auto cursor-pointer'>
@@ -138,29 +122,6 @@ export default function PopUp({ trigger, todos, setTodos, visible, editTodo }) {
               value={currentTask}
             />
 
-            {/* Any additional field can be hidden initially by nesting it here */}
-            {showFields && (
-              <>
-                <label>Description</label>
-                <textarea
-                  placeholder='Add text description'
-                  className='p-2 border-2 border-coffeeDark rounded-md w-full my-3'
-                  onChange={handleDescriptionChange}
-                >
-                  {description}
-                </textarea>
-              </>
-            )}
-
-            <FontAwesomeIcon
-              cursor='pointer'
-              title={`${showFields ? 'collapse' : 'expand'} fields`}
-              className='self-end w-fit relative -top-2.5 text-coffeeDark'
-              alignmentBaseline='after-edge'
-              onClick={() => setShowFields(!showFields)}
-              icon={showFields ? faCaretUp : faCaretDown}
-            />
-
             <label htmlFor=''>Status</label>
             <SelectButton
               width='100%'

src/components/ToDoContainer.jsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react';
 import Nav from './Nav';
 import PopUp from './PopUp';
-import DeletionDialog from './DeletionDialog';
 import Todo from './Todo';
+import '../dark.css';
 
 export default function ToDoContainer() {
   const [popUpvisible, setPopUpvisible] = useState(false);
-  const [todoIndex, setTodoIndex] = useState(false);
-  const [show, setShow] = useState(false);
   const [editPopUp, setEditPopUp] = useState(null);
   const [todos, setTodos] = useState(() => {
     const savedTodos = localStorage.getItem('todos');
@@ -51,22 +49,13 @@ export default function ToDoContainer() {
     newTodos.splice(index, 1);
     localStorage.setItem('todos', JSON.stringify(newTodos));
     setTodos(newTodos);
-    closeDialog();
   }
   function handleEdit(index) {
     setPopUpvisible(!popUpvisible);
     setEditPopUp(todos[index]);
     // console.log(editTodo);
     return;
   }
-  function openDialog(index) {
-    setTodoIndex(index);
-    setShow(!show);
-    console.log(index);
-  }
-  function closeDialog() {
-    setShow(!show);
-  }
   useEffect(() => {
     localStorage.setItem('todos', JSON.stringify(todos));
     if (todos?.length) return;
@@ -82,7 +71,7 @@ export default function ToDoContainer() {
         checkedOrNot={checkedOrNot}
         checkboxhandler={checkboxhandler}
         handleEdit={handleEdit}
-        handleDelete={openDialog}
+        handleDelete={handleDelete}
       />
     ) : (
       ''
@@ -97,15 +86,15 @@ export default function ToDoContainer() {
       checkedOrNot={checkedOrNot}
       checkboxhandler={checkboxhandler}
       handleEdit={handleEdit}
-      handleDelete={openDialog}
+      handleDelete={handleDelete}
     />
   ));
   return (
     <>
       <Nav setTodos={setTodos} setFilter={setFilter} />
-      <div className='bg-coffeePrimaryLight py-1 text-center rounded-md md:py-2.5 md:px-2'>
+      <div className='bg-coffeePrimaryLight dark:bg-orange-900 py-1 text-center rounded-md md:py-2.5 md:px-2'>
         {!todos?.length ? (
-          <span className='text-white font-semibold'>
+          <span className='text-stone-800 dark:text-stone-200 font-semibold'>
             You have no tasks. Let&#39;s add a task to get started.
           </span>
         ) : (
@@ -121,13 +110,6 @@ export default function ToDoContainer() {
           editTodo={editPopUp}
         />
       )}
-
-      <DeletionDialog
-        show={show}
-        closeDialog={closeDialog}
-        handleDelete={handleDelete}
-        index={todoIndex}
-      />
     </>
   );
 }

src/components/atomic/SelectButton.jsx

@@ -40,7 +40,7 @@ export default function SelectButton({ onChange, options, defaultValue, width })
   };
 
   return (
-    <>
+    <div>
       <div className={`text-white text-xs font-semibold font-poppins tracking-widest sm:text-base`}>
         <Select
           onChange={onChange}
@@ -50,7 +50,7 @@ export default function SelectButton({ onChange, options, defaultValue, width })
           styles={customStyles}
         />
       </div>
-    </>
+    </div>
   );
 }
 

src/dark.css

@@ -0,0 +1,52 @@
+@import url("index.css");
+
+.toggleDarkBtn {
+  position: relative;
+  display: inline-block;
+  width: 65px;
+  height: 41px;
+}
+.toggleDarkBtn input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slideBtnTg {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgb(241, 40, 40);
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+.slideBtnTg:before {
+  position: absolute;
+  content: "";
+  height: 30px;
+  width: 30px;
+  left: 5px;
+  bottom: 5px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  background-color: white;
+}
+input:checked + .slideBtnTg {
+  background-color: #1d1e1f;
+}
+input:focus + .slideBtnTg {
+  box-shadow: 0 0 1px #2196f3;
+}
+input:checked + .slideBtnTg:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+.slideBtnTg.round {
+  border-radius: 34px;
+}
+.slideBtnTg.round:before {
+  border-radius: 50%;
+}