Added css to todo tasks

package.json

@@ -17,8 +17,11 @@
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "css-loader": "^6.4.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
     "rollup": "^2.32.1",
+    "style-loader": "^3.3.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
   },

styles.css

@@ -11,4 +11,26 @@
   
   .book__author {
     color: var(--text-muted);
-  }
+  }
+
+.todo-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 30px 20px 0;
+  width: 70%;
+  border-bottom: 1px solid #cecece;
+  font-family: Roboto, sans-serif;
+  font-weight: 100;
+  font-size: 15px;
+  color: #ffffff;
+}
+
+input[type=checkbox] {
+  margin-right: 10px;
+  font-size: 30px;
+}
+
+input[type=checkbox]:focus {
+  outline: 0;
+}

view/App.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { getTasks } from "./habiticaAPI"
+import TodoItem from "./TodoItem"
 
-const username = "<key>"
-const credentials = "<key>"
+
+const username = "5b70c4ea-ed91-4fc4-8231-edd1984ec02c"
+const credentials = "ccbeec3b-fe55-4952-a2fa-023d0fbbab85"
 
 class App extends React.Component<any,any> {
     constructor(props: any) {
@@ -40,7 +42,8 @@ class App extends React.Component<any,any> {
             return <div>Loading...</div>;
         } else {
             const listItems = tasks.map((tasks: any) =>
-                <li>{tasks.text}</li>
+                <TodoItem key={tasks.id} task={tasks}/>
+                
             );
             return (
                 <ul>{listItems}</ul>

view/TodoItem.tsx

@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function TodoItem(props: any) {
+    return (
+        <div className="todo-item">
+            <input type="checkbox" />
+            <p>{props.task.text}</p>
+        </div>
+    )
+}
+
+export default TodoItem