added & design date

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -14,4 +14,8 @@
   <div class="description">
     {{ getTask(overlayData)[0].description }}
   </div>
+  <div class="date">
+    <p>Due Date:</p>
+    {{ timeConverter(getTask(overlayData)[0].date) }}
+  </div>
 </section>

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -24,15 +24,27 @@ section {
 }
 
 .headline {
-  color: var(--dark-blue);
   font-size: 61px;
   font-weight: 700;
   margin-top: 32px;
 }
 
 .description {
-  color: var(--gray);
   font-size: 20px;
   font-weight: 400;
   margin-top: 32px;
 }
+
+.date {
+  display: flex;
+  margin-top: 32px;
+  font-size: 19px;
+  font-weight: 400;
+  width: 100%;
+  p {
+    color: var(--very-dark-gray);
+    font-size: 20px;
+    font-weight: 400;
+    width: 25%;
+  }
+}

src/app/shared/components/overlay/task-overlay/task-overlay.component.ts

@@ -29,4 +29,27 @@ export class TaskOverlayComponent {
       .getAllTasks()
       .filter((task) => task.id === taskId);
   }
+
+  timeConverter(dateString: string) {
+    var a = new Date(dateString);
+    var months = [
+      'Jan.',
+      'Feb.',
+      'Mar.',
+      'Apr.',
+      'May.',
+      'Jun.',
+      'Jul.',
+      'Aug.',
+      'Sep.',
+      'Oct.',
+      'Nov.',
+      'Dec.',
+    ];
+    var year = a.getFullYear();
+    var month = months[a.getMonth()];
+    var date = a.getDate();
+    var time = month + ' ' + date + ', ' + year;
+    return time;
+  }
 }

src/styles.scss

@@ -19,6 +19,7 @@ body {
   --light-blue: #29abe2;
   --dark-blue: #2b3647;
   --very-dark-blue: #091931;
+  --very-dark-gray: #42526e;
   --very-light-gray: #f6f7f8;
   --light-red: #ff8190;
 }