added close btn

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

@@ -2,7 +2,10 @@
   <div class="overlay-content">
     @if (overlayType === "taskOverlay") {
     <div class="task-overlay">
-      <app-task-overlay [overlayData]="overlayData"></app-task-overlay>
+      <app-task-overlay
+        [overlayData]="overlayData"
+        (closeDialogEmitter)="onCloseOverlay($event)"
+      ></app-task-overlay>
     </div>
     }
   </div>

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

@@ -1,4 +1,10 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { OverlayService } from '../../../services/overlay.service';
 import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
@@ -25,8 +31,8 @@ export class OverlayComponent implements OnInit {
     });
   }
 
-  onCloseOverlay() {
-    this.overlayData = '';
+  onCloseOverlay(emitter: string) {
+    this.overlayData = emitter;
   }
 
   @HostListener('document:click', ['$event'])
@@ -36,7 +42,7 @@ export class OverlayComponent implements OnInit {
       targetElement.closest('.overlay') &&
       !targetElement.closest('.overlay-content')
     ) {
-      this.onCloseOverlay();
+      this.onCloseOverlay('');
     }
   }
 }

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

@@ -1,11 +1,14 @@
 <section>
-  <div
-    class="category"
-    [style.background-color]="
-      categoryColors.get(getTask(overlayData)[0].category)
-    "
-  >
-    {{ getTask(overlayData)[0].category }}
+  <div class="header">
+    <div
+      class="category"
+      [style.background-color]="
+        categoryColors.get(getTask(overlayData)[0].category)
+      "
+    >
+      {{ getTask(overlayData)[0].category }}
+    </div>
+    <app-btn-close (click)="sendMessage()"></app-btn-close>
   </div>
   <div class="headline">{{ getTask(overlayData)[0].title }}</div>
   <div class="description">

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

@@ -6,8 +6,17 @@ section {
   background-color: var(--white);
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
 .category {
-  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 23px;
+  font-weight: 400;
   padding: 4px 16px;
   border-radius: 8px;
   color: var(--white);
@@ -16,16 +25,14 @@ section {
 
 .headline {
   color: var(--dark-blue);
-  font-size: 16px;
+  font-size: 61px;
   font-weight: 700;
-  margin-top: 40px;
+  margin-top: 32px;
 }
 
 .description {
   color: var(--gray);
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 400;
-  margin-top: 8px;
-  max-height: 100px;
-  overflow: auto;
+  margin-top: 32px;
 }

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

@@ -1,15 +1,17 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
+import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [],
+  imports: [BtnCloseComponent],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })
 export class TaskOverlayComponent {
   @Input() overlayData: string = '';
+  @Output() closeDialogEmitter = new EventEmitter<string>();
 
   constructor(private firebaseService: FirebaseService) {}
 
@@ -18,6 +20,10 @@ export class TaskOverlayComponent {
     ['Technical Task', '#20d7c2'],
   ]);
 
+  sendMessage() {
+    this.closeDialogEmitter.emit('');
+  }
+
   getTask(taskId: string) {
     return this.firebaseService
       .getAllTasks()