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 = [