design and font change

db.json

 {
   "task": [
     {
-      "title": "rhrhrhrytyty",
+      "title": "Travel to head office",
       "isCompleted": false,
       "id": 1
+    },
+    {
+      "title": "Buy food",
+      "isCompleted": true,
+      "id": 2
     }
   ]
 }
\ No newline at end of file

src/components/base/layout/layout.css

 .container {
-  min-height: 50vh;
-  width: min(100dvw - 5rem);
+  min-height: 40vh;
 
+  height: auto;
   margin-inline: auto;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
   background: white;
 
   position: relative;
 }
 .container h2 {
-  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  border: 1px solid #ccc;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
+  border: none;
   text-align: center;
   padding: 1.3rem 0px;
   margin: 0;
-  font-weight: 800px;
-  background: white;
+  position: relative;
+  z-index: 1;
 }
 h3 {
   margin-left: 1rem;

src/components/top-level/form/form.css

 .form-section {
-  width: calc(100% - 2.5rem);
   padding: 1rem;
   background: white;
 }

src/components/top-level/task/index.js

@@ -23,7 +23,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   // (useCallback)---> to avoid calling the checkbox component without any action applied on checkbox
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
-    onChange({ id, isCompleted: !ischeck });
+    onChange({ id, title, isCompleted: !ischeck });
     toast.success(
       `${!ischeck ? "Task completed" : "Task not completed"}`,
       "success"
@@ -49,7 +49,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     //after 2 second it will execute
     const handler = setTimeout(() => {
       if (textarea_ref.current.value !== title) {
-        onChange({ id, title: debouncetitle });
+        onChange({ id, title: debouncetitle, isCompleted: !ischeck });
         toast.success("Task updated");
       }
     }, 2000);

src/components/top-level/task/task.css

 .task-section {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.8rem;
+  padding: 0.3rem 0.8rem;
   justify-content: space-between;
-  background: white;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+  border-top: 1px solid #ccc;
+  /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */
   clip-path: inset(0 -100vmax);
 }
+.task-section:first-child {
+  border-top: none;
+}
 .task-section > div {
   display: flex;
   align-items: center;
@@ -30,10 +33,12 @@ input:focus {
   width: 100%;
   resize: none;
   border: none;
-  border-bottom: 1px solid #ccc;
   outline: none;
-  margin: 0.3rem;
+  margin: 20px 0px 0px 5px;
   padding: 0;
+  font-size: 17px;
+  color: #8e8d8d;
+  font-family: "Open Sans", sans-serif;
 }
 
 .task-section textarea::-webkit-scrollbar {

src/index.css

-@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@600&family=Poppins:wght@600&display=swap');
+/* @import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@600&family=Poppins:wght@600&display=swap"); */
+
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans&display=swap");
 
 body {
   margin: 0;
-
-  font-family: "PT Sans", sans-serif;
+  font-family: "Open Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-image: -webkit-linear-gradient(

src/lib/api.js

@@ -15,12 +15,12 @@ export async function addTodo({ title, isCompleted }) {
   }
 }
 //PATCH METHOD
-export async function updateTodo({ id, ...item }) {
+export async function updateTodo({ id, title, isCompleted }) {
   try {
     await fetch(url + `/${id}`, {
       method: "PATCH",
       headers: { "Content-type": "application/json" },
-      body: JSON.stringify({ ...item }),
+      body: JSON.stringify({ title, isCompleted }),
     });
     const response = await getTodos();
     return response;

src/pages/index.js

@@ -11,7 +11,7 @@ export default function Pages() {
     getTodos();
   }, []);
   return (
-    <div>
+    <>
       <Layout count={todo?.filter((e) => !e.isCompleted).length}>
         {todo?.length > 0 ? (
           <Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
@@ -20,6 +20,6 @@ export default function Pages() {
         )}
         <Form onSubmit={addTodo} />
       </Layout>
-    </div>
+    </>
   );
 }