From bca6c923d901d827e8fff0830619222ca7a25870 Mon Sep 17 00:00:00 2001
From: lauravikanis <lauravikanis@yahoo.de>
Date: Sun, 1 Nov 2020 17:34:21 +0100
Subject: [PATCH] :lipstick: Add styling

---
 src/components/Form.css     | 11 +++++++++++
 src/components/Form.js      |  4 +++-
 src/components/Header.css   |  2 ++
 src/components/Header.js    |  3 ++-
 src/components/Todo.css     | 16 ++++++++++++++++
 src/components/Todolist.css |  4 ++++
 src/components/Todolist.js  |  1 +
 src/global.css              | 16 +++++++++++++++-
 8 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/components/Form.css b/src/components/Form.css
index e69de29..3f81e7d 100644
--- a/src/components/Form.css
+++ b/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 {
+}
diff --git a/src/components/Form.js b/src/components/Form.js
index ce9d927..d4ca3a3 100644
--- a/src/components/Form.js
+++ b/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>
diff --git a/src/components/Header.css b/src/components/Header.css
index e69de29..5da122d 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -0,0 +1,2 @@
+h1 {
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index e37c7c1..3d36479 100644
--- a/src/components/Header.js
+++ b/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>
   );
 }
diff --git a/src/components/Todo.css b/src/components/Todo.css
index b8e6509..1ff01fe 100644
--- a/src/components/Todo.css
+++ b/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;
 }
diff --git a/src/components/Todolist.css b/src/components/Todolist.css
index e69de29..9e91086 100644
--- a/src/components/Todolist.css
+++ b/src/components/Todolist.css
@@ -0,0 +1,4 @@
+.Todo__List {
+  padding-inline-start: 0;
+  margin: 1rem 2.5rem;
+}
diff --git a/src/components/Todolist.js b/src/components/Todolist.js
index 8d2c621..4e59512 100644
--- a/src/components/Todolist.js
+++ b/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 (
diff --git a/src/global.css b/src/global.css
index 813e843..e1d8004 100644
--- a/src/global.css
+++ b/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;
 }