added & design assigned users

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

@@ -8,6 +8,7 @@ import {
 import { OverlayService } from '../../../services/overlay.service';
 import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
+import { FirebaseService } from '../../../services/firebase.service';
 
 @Component({
   selector: 'app-overlay',

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

@@ -15,7 +15,7 @@
     {{ getTask(overlayData)[0].description }}
   </div>
   <div class="date">
-    <p>Due Date:</p>
+    <p>Due date:</p>
     {{ timeConverter(getTask(overlayData)[0].date) }}
   </div>
   <div class="priority">
@@ -23,4 +23,33 @@
     {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
     <div class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"></div>
   </div>
+  <div class="assigned">
+    <p>Assigned to:</p>
+    @for (user of getTask(overlayData)[0].assigned; track user; let index =
+    $index) {
+    <div class="content">
+      <div
+        class="circle"
+        [ngStyle]="{
+          'background-color': firebaseService.getUserDetails(user, 'color')
+        }"
+      >
+        <div class="initials">
+          {{ firebaseService.getUserDetails(user, "initials") }}
+        </div>
+      </div>
+      <div class="details">
+        <div class="name">
+          <p>
+            {{ firebaseService.getUserDetails(user, "firstName") }}
+          </p>
+          <span>,&nbsp;</span>
+          <p class="last-name">
+            {{ firebaseService.getUserDetails(user, "lastName") }}
+          </p>
+        </div>
+      </div>
+    </div>
+    }
+  </div>
 </section>

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

@@ -84,3 +84,61 @@ section {
 .prio-low {
   background-image: url(./../../../../../assets/img/low.svg);
 }
+
+// ASSIGNED
+
+.assigned {
+  margin-top: 32px;
+  overflow-y: auto;
+  p {
+    color: var(--very-dark-gray);
+    font-size: 20px;
+    font-weight: 400;
+    margin-bottom: 12px;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 35px;
+  min-width: 35px;
+  height: 35px;
+  border-radius: 100%;
+  border: 2px solid var(--white);
+  .initials {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}
+
+.details {
+  margin-left: 24px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.last-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -1,11 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [BtnCloseComponent],
+  imports: [BtnCloseComponent, CommonModule],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })
@@ -13,7 +14,7 @@ export class TaskOverlayComponent {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
-  constructor(private firebaseService: FirebaseService) {}
+  constructor(public firebaseService: FirebaseService) {}
 
   categoryColors = new Map<string, string>([
     ['User Story', '#0038ff'],