added & design priority

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

@@ -18,4 +18,9 @@
     <p>Due Date:</p>
     {{ timeConverter(getTask(overlayData)[0].date) }}
   </div>
+  <div class="priority">
+    <p>Priority:</p>
+    {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
+    <div class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"></div>
+  </div>
 </section>

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

@@ -48,3 +48,39 @@ section {
     width: 25%;
   }
 }
+
+.priority {
+  display: flex;
+  align-items: center;
+  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%;
+  }
+}
+
+.priority-bg {
+  margin-left: 12px;
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 32px;
+  height: 32px;
+}
+
+.prio-urgent {
+  background-image: url(./../../../../../assets/img/urgent.svg);
+}
+
+.prio-medium {
+  background-image: url(./../../../../../assets/img/medium.svg);
+}
+
+.prio-low {
+  background-image: url(./../../../../../assets/img/low.svg);
+}

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

@@ -30,6 +30,10 @@ export class TaskOverlayComponent {
       .filter((task) => task.id === taskId);
   }
 
+  capitalizeFirstLetter(data: string) {
+    return data.charAt(0).toUpperCase() + data.slice(1);
+  }
+
   timeConverter(dateString: string) {
     var a = new Date(dateString);
     var months = [