diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
index 30d338f..8be8d05 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
@@ -18,4 +18,9 @@
Due Date:
{{ timeConverter(getTask(overlayData)[0].date) }}
+
+
Priority:
+ {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
+
+
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
index e4f9903..c474847 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
+++ b/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);
+}
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
index 4c3b026..1a43a57 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
+++ b/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 = [