From 15e9b47c2c9a14f0acf82e3e3d6d9f58910eb637 Mon Sep 17 00:00:00 2001
From: Anurag-NURA <anuragrawatz3k@gmail.com>
Date: Mon, 24 Oct 2022 19:26:46 +0530
Subject: [PATCH] dark mode added to the component

---
 package.json                                  |  3 +-
 src/components/Todo/Todo.css                  | 30 +++++++++++++++++++
 src/components/Todo/Todo.tsx                  | 17 +++++++++--
 .../Todo/common/Accordion/style.module.css    |  4 +--
 .../Todo/common/Todo/Form/index.tsx           |  7 +++++
 .../Todo/common/Todo/Item/index.tsx           | 10 +++++--
 yarn.lock                                     |  5 ++++
 7 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Todo/Todo.css

diff --git a/package.json b/package.json
index 7d283e5..64411fb 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "react-uuid": "^1.0.2"
   },
   "dependencies": {
-    "clsx": "^1.2.1"
+    "clsx": "^1.2.1",
+    "react-todo-component": "^2.0.3"
   }
 }
diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css
new file mode 100644
index 0000000..5666488
--- /dev/null
+++ b/src/components/Todo/Todo.css
@@ -0,0 +1,30 @@
+body{
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+}
+
+#light-theme{
+  --font-color: black;
+  --body-bg-color: white;
+  --hover-color: gray;
+}
+
+#dark-theme{
+  --font-color: lightgray;
+  --body-bg-color: #0F3460;
+  --hover-color: #ff4081;
+}
+
+
+
+.todo-container{
+  background-color: var(--body-bg-color);
+  color: var(--font-color)
+}
+
+.theme-switch{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx
index 06fdcab..4587945 100644
--- a/src/components/Todo/Todo.tsx
+++ b/src/components/Todo/Todo.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { Reorder } from "framer-motion";
-import { Container } from "@material-ui/core";
+import { Container, Switch } from "@material-ui/core";
 
+import "./Todo.css";
 import { Item, TodoCompletedList } from "./common";
 import { Form } from "./common/Todo/Form";
 import { TodoItem } from "./common/types";
 
-
 export interface TodoAppProps {
   defaultItems?: TodoItem[];
   onChange: (items: TodoItem[]) => void;
@@ -49,8 +49,14 @@ function TodoApp(props: TodoAppProps) {
     setItems([...updatedItems, ...completedItems]);
   };
 
+  const [theme, setTheme] = useState("light-theme");
+  const toggleTheme = ()=>{
+    setTheme(prevTheme=>(prevTheme === "light-theme"? "dark-theme" : "light-theme"));
+  }
+
   return (
-    <Container>
+    <div id={theme} > 
+    <Container className="todo-container">
       <Form addItem={addItem} />
       <Reorder.Group
         axis="y"
@@ -74,7 +80,12 @@ function TodoApp(props: TodoAppProps) {
         setItemsCallback={setItemsCallback}
         completedItems={completedItems}
       />
+      <div className="theme-switch">
+        <Switch color="secondary" onChange={toggleTheme}/>
+        {theme === "light-theme"? <p>Light Mode</p>: <p>Dark Mode</p>}
+        </div>
     </Container>
+    </div>
   );
 }
 
diff --git a/src/components/Todo/common/Accordion/style.module.css b/src/components/Todo/common/Accordion/style.module.css
index 905078e..300b1fe 100644
--- a/src/components/Todo/common/Accordion/style.module.css
+++ b/src/components/Todo/common/Accordion/style.module.css
@@ -4,7 +4,7 @@
     height: 1em;
     font-size: 1.5rem;
     fill: currentColor;
-    color: rgba(0, 0, 0, .54);
+    color: var(--font-color);
     user-select: none;
 
     position: absolute;
@@ -28,7 +28,7 @@
     font-weight: 400;
     line-height: 1.5;
     letter-spacing: 0.00938em;
-    border-top: 1px solid black;
+    border-top: 1px solid var(--font-color);
     padding: 0 16px;
     padding-left: 4.2%;
     margin-top: 20px;
diff --git a/src/components/Todo/common/Todo/Form/index.tsx b/src/components/Todo/common/Todo/Form/index.tsx
index df2b68f..bb808d6 100644
--- a/src/components/Todo/common/Todo/Form/index.tsx
+++ b/src/components/Todo/common/Todo/Form/index.tsx
@@ -18,6 +18,8 @@ const useStyles = makeStyles({
   root: {
     display: "flex",
     width: "100%",
+    backgroundColor: "var(--body-bg-color)",
+    color: "var(--font-color)"
   },
   plusIcon: {
     margin: "5px 10px 0px 8px",
@@ -61,6 +63,11 @@ export const Form = (props: AddProps) => {
             });
             setItemName("");
           }}
+          InputProps={{
+            style: {
+              color: "var(--font-color)"
+            }
+          }}
           placeholder="Add item."
           value={itemName}
           className="w-10/12"
diff --git a/src/components/Todo/common/Todo/Item/index.tsx b/src/components/Todo/common/Todo/Item/index.tsx
index 0525504..80ef6c8 100644
--- a/src/components/Todo/common/Todo/Item/index.tsx
+++ b/src/components/Todo/common/Todo/Item/index.tsx
@@ -20,6 +20,7 @@ const useStyles = makeStyles({
     width: "100%",
     alignItems: "center",
     zIndex: 0,
+    backgroundColor: "var(--body-bg-color)"
   },
   underline: {
     "&&&:before": {
@@ -36,8 +37,9 @@ const useStyles = makeStyles({
     cursor: "pointer",
      padding:"2px",
     '&:hover': {
-      backgroundColor: "#b9b5b5",
+      backgroundColor: "var(--hover-color)",
       borderRadius: '50%', 
+      color: "var(--body-bg-color)"
     }
 
   },
@@ -97,11 +99,14 @@ export const Item: FC<Props> = ({
               items[itemIndex].isComplete = true;
               setItemsCallback([...items]);
             }}
+            style={{
+              color: "var(--font-color)"
+            }}
           />
           <FormControl fullWidth>
             <TextField
               className={classes.textFeild}
-              InputProps={{ classes: { underline: classes.underline } }}
+              InputProps={{ classes: { underline: classes.underline }, style:{color: "var(--font-color)"} }}
               inputRef={inputRef}
               value={itemText} // innerHTML of the editable div
               onPaste={(e) => {
@@ -135,6 +140,7 @@ export const Item: FC<Props> = ({
                 itemIndex < 1 &&
                 addItem({ name: "", uuid: uuid(), isComplete: false })
               }
+
             />
           </FormControl>
           <CloseIcon
diff --git a/yarn.lock b/yarn.lock
index ffdad24..7f5b7bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10614,6 +10614,11 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
+react-todo-component@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-todo-component/-/react-todo-component-2.0.3.tgz#762878d0ffb86b87bad84b0f6925b1a57c8598b0"
+  integrity sha512-Z/ES1MYRXg3oaS33wEF0I0gvsyv35v2HemeJaZq5KfBBqvZWqjeFNuijKZLsWX/jzuLRCtGNemNVs4lBkLqjHg==
+
 react-transition-group@^4.4.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"