Some styles added

Author: Carlosqu24

src/components/TaskForm/TaskForm.css

@@ -1,7 +1,8 @@
 form {
       padding: 1rem;
 
-      background: rgb(236, 236, 236);
+      background: rgb(255, 255, 255);
+      box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
 
       display: flex;
       flex-direction: column;
@@ -10,5 +11,8 @@ form {
 }
 
 .form-control {
-      margin: 10px 0;
+      margin-bottom: 10px;
+      padding: 1rem;
+      outline: none;
+      border: 1px solid rgba(0, 0, 0, 0.329);
 }

src/components/TaskForm/TaskForm.tsx

@@ -22,6 +22,8 @@ export const TaskForm = (props: any) => {
 
       return (
             <form onSubmit={(e) => handleSubmit(e)}>
+                  <h2>Add Task</h2>
+
                   <input 
                         type="text"
                         name="title"
@@ -38,7 +40,16 @@ export const TaskForm = (props: any) => {
                         onChange={(e) => handleInputChange(e)}
                   />
 
-                  <button type="submit" >Save Task</button>
+                  <select 
+                        name="done"
+                        className="form-control"
+                        onChange={handleInputChange}      
+                  >
+                        <option value={`${true}`}>Hecha</option>
+                        <option value={`${false}`}>Pendiente</option>
+                  </select>
+
+                  <button className="form-control" type="submit" >Save Task</button>
             </form>
       )
 }

src/components/TasksList/TaskList.css

@@ -1,3 +1,7 @@
+.tasks-list {
+      margin-top: 20px;
+}
+
 .tasks-container {
       width: 100%;
 
@@ -30,7 +34,6 @@
 
 .card__status {
       padding: 8px;
-      border-radius: 10px;
 }
 
 .card__status.success {

src/components/TasksList/TasksList.tsx

@@ -6,7 +6,7 @@ export const TasksList = (props: any) => {
 
 
       return (
-            <div>
+            <div className="tasks-list">
                   <h2>TasksList</h2>
                   <div className="tasks-container">
                         {
@@ -15,9 +15,9 @@ export const TasksList = (props: any) => {
                                           <h3 className="card__title" >{task.title}</h3>
                                           <p className="card__description">{task.description}</p>
                                           <span 
-                                                className={`card__status ${task.done ? 'success' : 'pending'}`}
+                                                className={`card__status ${task.done == 'true' ? 'success' : 'pending'}`}
                                           >
-                                                { task.done ? 'Hecha' : 'Pendiente'}
+                                                { task.done == 'true' ? 'Hecha' : 'Pendiente'}
                                           </span>
                                     </div>
                               ))