From 51ad53711ba9c8101f112c346582653e9f3e3834 Mon Sep 17 00:00:00 2001
From: rhys-childs <rhys.childs@canopytax.com>
Date: Tue, 23 Jul 2024 09:01:09 -0600
Subject: [PATCH 1/3] clean up form and layout

---
 src/App.css                 | 43 ++++++++++++++++---------------------
 src/App.jsx                 | 20 ++++++++++++++---
 src/components/TaskItem.jsx | 14 +++++++-----
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6dee511..6798b71 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,22 +5,18 @@ body {
   padding: 0;
 }
 
-.App {
-  max-width: 600px;
+.content {
+  padding: 20px;
+  max-width: 800px;
   margin: 50px auto;
   background: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
 }
 
-.content {
-  padding: 20px;
-}
-
 form {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 20px;
 }
 
 input {
@@ -38,6 +34,7 @@ button {
   color: white;
   border-radius: 4px;
   cursor: pointer;
+  font-weight: 600;
 }
 
 button:hover {
@@ -51,11 +48,10 @@ ul {
 
 li {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   background: #f9f9f9;
   padding: 10px;
-  border: 1px solid #eee;
+  border: 1px solid #dddedf;
   border-radius: 4px;
   margin-bottom: 10px;
 }
@@ -73,23 +69,20 @@ li span.completed {
 .filter-buttons {
   display: flex;
   justify-content: center;
-  margin-bottom: 20px;
-}
-
-.filter-buttons button {
-  margin: 0 5px;
-  padding: 10px 20px;
-  border: none;
-  background-color: #007bff;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
+  align-items: center;
+  gap: 10px;
 }
 
-.filter-buttons button:hover {
-  background-color: #0056b3;
+.task-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 
-.task-item button {
-  margin-right: 10px
+.task-item-buttons {
+  display: flex;
+  gap: 10px;
+  margin-left: auto;
+  align-items: center;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 140496e..2e9ce06 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,9 +7,21 @@ import "./App.css";
 
 function App() {
   const [tasks, setTasks] = useState([
-    { name: "created task 1", completed: false },
-    { name: "edited task", completed: false },
-    { name: "new cool task", completed: true },
+    {
+      name: "Complete TPS reports",
+      completed: false,
+      addedBy: { id: 1, name: "John" },
+    },
+    {
+      name: "Reconcile Dunder Mifflin accounts",
+      completed: false,
+      addedBy: { id: 2, name: "Jane" },
+    },
+    {
+      name: "Review Peter's timesheet",
+      completed: true,
+      addedBy: { id: 1, name: "John" },
+    },
   ]);
   const [filter, setFilter] = useState("all");
 
@@ -19,6 +31,8 @@ function App() {
       <div className="App">
         <div className="content">
           <TaskForm setTasks={setTasks} />
+        </div>
+        <div className="content">
           <FilterButtons setFilter={setFilter} />
           <TaskList tasks={tasks} filter={filter} setTasks={setTasks} />
         </div>
diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx
index a224728..a8ca620 100644
--- a/src/components/TaskItem.jsx
+++ b/src/components/TaskItem.jsx
@@ -15,11 +15,15 @@ function TaskItem({ task, index, setTasks }) {
 
   return (
     <li className="task-item">
-      <span className={task.completed ? "completed" : ""}>{task.name}</span>
-      <button onClick={toggleCompletion}>
-        {task.completed ? "Undo" : "Complete"}
-      </button>
-      <button onClick={deleteTask}>Delete</button>
+      <div className="task-item-header">
+        <span className={task.completed ? "completed" : ""}>{task.name}</span>
+      </div>
+      <div className="task-item-buttons">
+        <button onClick={toggleCompletion}>
+          {task.completed ? "Undo" : "Complete"}
+        </button>
+        <button onClick={deleteTask}>Delete</button>
+      </div>
     </li>
   );
 }

From 0f063cdce7cf073f3ee86f8c69cc7c10524094a9 Mon Sep 17 00:00:00 2001
From: rhys-childs <rhys.childs@canopytax.com>
Date: Tue, 23 Jul 2024 09:07:36 -0600
Subject: [PATCH 2/3] better mock data

---
 src/App.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2e9ce06..1ff4333 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,17 +10,22 @@ function App() {
     {
       name: "Complete TPS reports",
       completed: false,
-      addedBy: { id: 1, name: "John" },
+      addedBy: { id: 1, name: "Kevin" },
     },
     {
       name: "Reconcile Dunder Mifflin accounts",
       completed: false,
-      addedBy: { id: 2, name: "Jane" },
+      addedBy: { id: 2, name: "Angela" },
     },
     {
       name: "Review Peter's timesheet",
       completed: true,
-      addedBy: { id: 1, name: "John" },
+      addedBy: { id: 1, name: "Oscar" },
+    },
+    {
+      name: "Party Planning Committee expenses",
+      completed: false,
+      addedBy: { id: 2, name: "Angela" },
     },
   ]);
   const [filter, setFilter] = useState("all");

From 7d879c85cd99fcf66461d0f91d83b59be19fd155 Mon Sep 17 00:00:00 2001
From: rhys-childs <rhys.childs@canopytax.com>
Date: Tue, 23 Jul 2024 09:08:33 -0600
Subject: [PATCH 3/3] name fix

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1ff4333..9144f05 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -23,7 +23,7 @@ function App() {
       addedBy: { id: 1, name: "Oscar" },
     },
     {
-      name: "Party Planning Committee expenses",
+      name: "Party Planning Committee expense reports",
       completed: false,
       addedBy: { id: 2, name: "Angela" },
     },