update design of task-card

Author: codingpaula

src/app/matrix/task-card/task-card.component.html

@@ -4,24 +4,30 @@
       <input formControlName="name" class="name-input" type="text" />
       <textarea formControlName="description"></textarea>
       <div class="row imp-due-date">
-        <input type="number" required formControlName="importance" />
-        <span class="separator">imp.</span>
-        <input type="number" formControlName="dueDay" />
-        <span>.</span>
-        <input type="number" formControlName="dueMonth" />
-        <span>.</span>
-        <span>20</span>
-        <input type="number" formControlName="dueYear" />
+        <div class="row importance">
+          <input type="number" required formControlName="importance" />
+          <span class="separator">imp.</span>
+        </div>
+        <div class="row due-date">
+          <input type="number" formControlName="dueDay" />
+          <span>.</span>
+          <input type="number" formControlName="dueMonth" />
+          <span>.</span>
+          <span>20</span>
+          <input type="number" formControlName="dueYear" />
+        </div>
       </div>
       <div class="row topic-done">
         <select formControlName="topic">
           <option *ngFor="let element of topicOptions" [ngValue]="element.id">
             {{ element.value }}
           </option>
         </select>
-        <button class="delete-btn" (click)="onDeleteTask()">d</button>
-        <button class="done-btn" (click)="onDone()">
-          {{ task.done ? 'mark undone' : 'mark done' }}
+        <button class="delete-btn" type="button" (click)="onDeleteTask()">
+          d
+        </button>
+        <button class="done-btn" type="button" (click)="onDone()">
+          {{ task.done ? 'undo!' : 'done!' }}
         </button>
       </div>
     </form>

src/app/matrix/task-card/task-card.component.scss

@@ -57,6 +57,17 @@
   span {
     padding-right: 4px;
     padding-left: 2px;
+    padding-top: 0.25rem;
+    font-size: 1rem;
+  }
+
+  .importance,
+  .due-date {
+    align-items: center;
+  }
+
+  .importance > span {
+    font-size: 0.75rem;
   }
 }
 
@@ -69,7 +80,7 @@
   font-family: Nunito, Helvetica, sans-serif;
   box-shadow: 4px 4px 5px rgba(32, 32, 32, 0.3);
   border-radius: 20px;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 1.5rem;
 }
 
 .delete-btn {
@@ -103,6 +114,7 @@
       border-radius: 10px;
       box-sizing: border-box;
       width: 2.5rem;
+      text-align: center;
     }
   }
 }