From d929b38ede404e7081fd56982545922bb9d63210 Mon Sep 17 00:00:00 2001
From: Stacey-bee <nakanwagistacie@gmail.com>
Date: Fri, 21 May 2021 11:42:58 +0300
Subject: [PATCH] styling todo app with bootstrap and css

---
 src/App.tsx                 | 10 ++++++----
 src/assets/css/App.css      | 19 ++++++++++++++++---
 src/components/Form.tsx     |  4 ++--
 src/components/TodoList.tsx |  4 ++--
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d1f36be..0ef49e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,12 +6,14 @@ import './assets/css/App.css';
 
 
 function App() {
-  const [todos, setTodos] = useState(["Go for Eid"])
+  const [todos, setTodos] = useState(["Go for choir practice", "Go to the salon", "Shop for groceries", "Prepare dinner"])
+  
   return (
-    <div className="App">
+    <div className="App container">
       <section>
-        <h1>Todo App</h1>
-        <Form />
+        <h1 className = "text-secondary bg-danger display-3 pb-3">My Todos</h1>
+        
+        <Form /> 
         <TodoList mytodos={todos} />
       </section>
 
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 0ab95f3..cf51fb1 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -13,7 +13,20 @@ code {
     monospace;
 }
 
-form{
-  width: 500px;
-  margin: 0 auto;
+button {
+  width: 100%;
+}
+
+ul li{
+  display: block;
+  padding: 10px;
+  margin-right: 50px;
+  margin-left: 20px;
+  background: rgb(216, 211, 208);
+}
+
+ul li:nth-child(even) {
+  background: #e98686;
+  margin-right: 50px;
+  margin-left: 20px; 
 }
\ No newline at end of file
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 0ca5b48..5257bff 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -20,8 +20,8 @@ const Form = (props:any) => {
   };
   return (
     <form onSubmit={Submit}>
-      <input type="text" onChange={handleChange} className="form-control form-control-sm custom" />
-      <button type="submit" className="btn btn-info"> Add</button>
+      <input placeholder="enter item to add to list" type="text" onChange={handleChange} className="form-control form-control-sm custom border border-danger" />
+      <button type="submit" className = "mt-2 btn btn-outline-secondary"> Add</button>
     </form>
   );
 };
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 7de1f81..ee2ce1b 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -3,11 +3,11 @@ import React from "react";
 const TodoList = (props: any) => {
 
   return (
-    <ol>
+    <ul className="mt-2 text-secondary">
       {props.mytodos.map((todo: any) => {
         return <li> {todo}</li>;
       })}
-    </ol>
+    </ul>
   );
 };
 export default TodoList;