fix: additional bug fixes in OverlayComponent

src/app/components/add-task/add-task.component.ts

@@ -83,13 +83,13 @@ export class AddTaskComponent implements OnInit {
   }
 
   async loadExistingTaskData() {
-    if (this.overlayData) {
+    if (this.overlayType === 'newTaskOverlay') {
+      this.taskData.status = this.overlayData;
+    } else if (this.overlayData) {
       const taskData = await firstValueFrom(this.getTaskData(this.overlayData));
       if (taskData) {
         this.taskData = { ...this.taskData, ...taskData };
       }
-    } else if (this.overlayType === 'newTaskOverlay') {
-      this.taskData.status = this.overlayData;
     }
   }
 

src/app/components/board/board.component.html

@@ -31,7 +31,7 @@
         >
         <span class="line"></span>
       </div>
-      <button class="btn" type="submit" (click)="addNewTaskOverlay('none')">
+      <button class="btn" type="submit" (click)="addNewTaskOverlay(TODO)">
         <div class="btn-inside">
           <span>{{ "board.addTask" | translate }}</span>
           <img src="./../../../assets/img/board/add_white.svg" alt="check" />

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html

@@ -1,4 +1,3 @@
-<section>
 <form
   (ngSubmit)="onSubmit(contactForm)"
   (keyup)="updateFormData()"
@@ -92,11 +91,11 @@
     @if(!email.valid && email.touched &&
     !checkIfUserEmailIsValid(contactData.email)) {
     <p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
-      } @else { @if (email.touched &&
-      !checkIfUserEmailIsValid(contactData.email)) {
+    } @else { @if (email.touched && !checkIfUserEmailIsValid(contactData.email))
+    {
     <p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
-      } @else { @if (existEmailOnServer(contactData.email) &&
-      !contactData.email) {
+    } @else { @if (existEmailOnServer(contactData.email) && !contactData.email)
+    {
     <p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
     } } }
   </div>
@@ -153,7 +152,6 @@
     ></app-form-btn>
   </div>
 </form>
-</section>
 
 <!-- Confirm dialog -->
 <app-confirm-dialog

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

@@ -1,6 +1,6 @@
 @if (overlayData !== "new") {
-<section class="overlay">
-  <div class="dialog">
+
+<div class="overlay">
   <div class="header">
     <img src="./../../../../assets/img/logo.svg" alt="" />
     <p>{{ "contacts.editContact" | translate }}</p>
@@ -34,10 +34,9 @@
   </div>
   <div class="notice">{{ "contacts.notice" | translate }}</div>
 </div>
-</section>
 } @else {
-<section class="overlay">
-  <div class="dialog">
+
+<div class="overlay">
   <div class="header">
     <img src="./../../../../assets/img/logo.svg" alt="" />
     <p>{{ "contacts.addContact" | translate }}</p>
@@ -65,5 +64,4 @@
   </div>
   <div class="notice">{{ "contacts.notice" | translate }}</div>
 </div>
-</section>
 }

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

@@ -1,17 +1,4 @@
-section {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dialog {
+.overlay {
   background-color: var(--white);
   width: 760px;
   height: auto;

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

@@ -59,19 +59,15 @@ export class OverlayComponent implements OnInit {
   }
 
   @HostListener('document:click', ['$event'])
-
   /**
-   * Checks if a click event occurred within the overlay but outside the content or dialog elements.
-   * If so, closes the overlay by emitting an event.
+   * Closes the contact edit overlay if the user clicks on the overlay background.
    *
-   * @param event The MouseEvent that triggered the check.
+   * @param event The MouseEvent triggered by a click action.
    */
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-    if (
-      targetElement.closest('.overlay') &&
-      (!targetElement.closest('.content') || !targetElement.closest('.dialog'))
-    ) {
+
+    if (targetElement === document.querySelector('.overlay')) {
       this.onCloseOverlay(false);
     }
   }