styling

src/components/projects.js

@@ -14,7 +14,12 @@ function Projects(props) {
               >
                 X
               </button>
-              <span onClick={() => props.selectProject(project.id)}>{project.name} </span>
+              <button
+                className="btn ml-1"
+                onClick={() => props.selectProject(project.id)}
+              >
+                {project.name}{' '}
+              </button>
             </li>
           ))}
         <form className="" onSubmit={props.createProject}>

src/components/task-row.js

@@ -12,18 +12,9 @@ const TaskRow = props => {
         X
       </button>
 
-      <span onClick={() => props.selectTask(task.id)}>{task.desc}</span>
+      <button className="btn ml-1" onClick={() => props.selectTask(task.id)}>
-      {props.component === 'project' ? (
+        {task.desc}
-        ''
+      </button>
-      ) : (
-        <button
-          className="btn btn-outline-dark ml-5"
-          onClick={() => props.selectProject(task.projectId)}
-        >
-          {project.name}
-        </button>
-      )}
-
       <button
         className={`btn btn-${
           task.completed ? 'secondary' : 'outline-success'
@@ -32,6 +23,16 @@ const TaskRow = props => {
       >
         &#10004;
       </button>
+      {props.component === 'project' ? (
+        ''
+      ) : (
+        <button
+          className="btn ml-3 mr-2 float-right"
+          onClick={() => props.selectProject(task.projectId)}
+        >
+          {project.name}
+        </button>
+      )}
     </li>
   )
 }