💄 Add styling

src/components/Form.css

@@ -0,0 +1,11 @@
+.todo__input {
+  text-align: center;
+  border-radius: 25px;
+  border: 0.5px solid #171b36;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  width: 500px;
+  max-width: 80%;
+}
+form {
+}

src/components/Form.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import "./Form.css";
 
 export default function Form({ tuduItems, setTuduItems }) {
   const [inputValue, setInputValue] = useState("");
@@ -13,6 +14,7 @@ export default function Form({ tuduItems, setTuduItems }) {
 
   return (
     <form
+      className="todo__form"
       onSubmit={(event) => {
         event.preventDefault();
 
@@ -31,7 +33,7 @@ export default function Form({ tuduItems, setTuduItems }) {
         value={inputValue}
         onChange={(event) => setInputValue(event.target.value)}
         type="text"
-        placeholder="Was willst du dun?"
+        placeholder="Was willst du tun?"
         className="todo__input"
       ></input>
     </form>

src/components/Header.css

@@ -0,0 +1,2 @@
+h1 {
+}

src/components/Header.js

@@ -1,9 +1,10 @@
 import React from "react";
+import "./Header.css";
 
 export default function Header() {
   return (
     <div>
-      <h1>tuDuDasMal!</h1>
+      <h1>Tu-Du Das Mal!</h1>
     </div>
   );
 }

src/components/Todo.css

@@ -3,12 +3,28 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  border-top: 0.5px solid #171b36;
+  padding: 0.25rem;
 }
 .todo__text {
   max-width: 80%;
   word-wrap: break-word;
 }
 .todo__checkbox {
+  width: 20px;
+  height: 20px;
+  /* border-radius: 25px;
+  padding: 0;
+  background-color: #171b36;
+  color: white;
+  cursor: pointer; */
 }
+
 .todo__date {
+  font-style: italic;
+  font-size: 0.8rem;
+}
+.todo__delete {
+  background: none;
+  border: none;
 }

src/components/Todolist.css

@@ -0,0 +1,4 @@
+.Todo__List {
+  padding-inline-start: 0;
+  margin: 1rem 2.5rem;
+}

src/components/Todolist.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Todo from "./Todo";
+import "./Todolist.css";
 
 export default function Todolist({ tuduItems, setTuduItems }) {
   return (

src/global.css

@@ -1,17 +1,31 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900");
+
 *,
 *::after,
 *::before {
   box-sizing: border-box;
-  border: 1px solid black;
+  /* border: 1px solid black; */
 }
 
 body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: "Roboto", sans-serif;
+  background-color: #171b36;
+  text-align: center;
 }
 
 #root {
+  background-color: #171b36;
 }
 .container {
+  background-color: #fff;
+  width: 800px;
+  max-width: 80%;
+  margin: 0 auto;
+  padding-top: 1.5rem;
+  padding-bottom: 2.5rem;
+  margin-top: 5%;
+  border-radius: 25px;
 }