tasks: style input fields

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>
-      <ul className="list-group">
+      <form className="form-inline my-2 my-lg-0">
-      <li className="list-group-item">
+        <input className="form-control input-sm mr-sm-2" type="search" value={props.search} name="search" placeholder="Filter" onChange={(e) => props.handleChange(e)} />
-        <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:
+      <ul className="list-group">
-          <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> }