UI styling added

src/components/Todo/Todo.js

@@ -1,5 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import LoadingSpinner from "../Loader/LoadinSpinner";
+import "./style.css";
 
 const Todo = () => {
 	const [value, setValue] = useState([]);
@@ -53,9 +54,26 @@ const Todo = () => {
 		<div>
 			<div className="main-content">
 				<div className="todo-list-content">
+					<div style={{ textAlign: "center", fontSize: "25px" }}>
+						Todo List
+					</div>
 					<ul>
 						{todoList.map((val) => {
-							return <li key={val.id}>{val.title}</li>;
+							let dynamicTitle =
+								"This is the Title of the User " + val.id;
+							return (
+								<div key={val.id} title={dynamicTitle}>
+									<span
+										style={{
+											color: "#0B0F3D",
+											fontWeight: "600",
+										}}
+									>
+										{val.id}
+									</span>
+									. {val.title}
+								</div>
+							);
 						})}
 					</ul>
 				</div>
@@ -66,10 +84,9 @@ const Todo = () => {
 						value={filter}
 						onChange={handleChangeFilter}
 					>
-						<option value="">-- Please Select --</option>
+						<option value="">All</option>
 						<option value="Completed">Completed</option>
 						<option value="Incompleted">Incompleted</option>
-						<option value="Both">Both</option>
 					</select>
 				</div>
 			</div>

src/components/Todo/style.css

@@ -0,0 +1,30 @@
+.main-content{
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+.main-content .todo-list-content ul{
+    list-style: number;
+}
+.main-content .todo-list-content ul div{
+    padding: 10px;
+    border: 1px solid red;
+}
+.main-content .short-content label{
+    padding-right: 10px;
+}
+.main-content .short-content{
+    font-size: 20px;
+}
+.main-content .short-content select{
+    font-size: 20px;
+    width: 150px;
+    padding: 2px;
+    border-radius: 5px;
+    text-align: center;
+    background-color: transparent;
+}
+.main-content .short-content select option{
+    font-size: 20px;
+}

src/styles/App.css

@@ -35,18 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
-.main-content{
-  margin-top: 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-}
-/* .main-content .todo-list-content{} */
-.main-content .todo-list-content ul{
-  list-style: number;
-}
-.main-content .todo-list-content ul li{
-  padding: 10px;
 }