From 238aba66ecacc70640fb038a831cae4e96b7ab34 Mon Sep 17 00:00:00 2001
From: data <data@devnull>
Date: Thu, 20 Jun 2019 16:57:03 -0400
Subject: [PATCH] tasks: style input fields

---
 src/components/tasks.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/tasks.js b/src/components/tasks.js
index bc78a9e..ae675ad 100644
--- a/src/components/tasks.js
+++ b/src/components/tasks.js
@@ -6,19 +6,12 @@ function Tasks(props) {
         const completed = props.completed || []
   return (
     <div>
-      <h1>{`Hello, ${props.user.name}!`}</h1>
-
       <h3 className="mt-4">Your open tasks</h3>
+      <form className="form-inline my-2 my-lg-0">
+        <input className="form-control input-sm mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
+        <button className="btn btn-outline-secondary my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Show all</button>
+      </form>
       <ul className="list-group">
-      <li className="list-group-item">
-        <form className="form-inline my-2 my-lg-0 float-right">
-          <input className="form-control mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
-          <button className="btn btn-outline-secondary my-2 my-sm-0" type="submit" onClick={(e) => props.handleSubmit(e) }>Show all</button>
-        </form>
-        <form onSubmit={ props.addTask }>Add task:
-          <input className="ml-1" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
-        </form>
-      </li>
        {filtered.map(task =>
         <li className="list-group-item" key={task.id} onClick={ props.editTask }>
         <button className="btn btn-outline-danger mr-1" onClick={ () => props.deleteTask(task.id) }>X</button>
@@ -26,6 +19,9 @@ function Tasks(props) {
         <button className={`btn btn-${ task.completed ? "secondary" : "outline-success" } float-right`} onClick={ () => props.completeTask(task.id) }>&#10004;</button>
         </li> )
        }
+       <form className="" onSubmit={ props.addTask }>
+          <input className="form-control input-sm" placeholder="Add task" name="newTask" value={props.newTask} onChange={ props.handleChange }/>
+        </form>
       </ul>
 
      { completed.length === 0 ? null : <h3 className="mt-4">Completed</h3> }