added & design contact delete dialog

src/app/app.component.html

@@ -10,8 +10,16 @@
   </div>
   <app-sidebar-mobile></app-sidebar-mobile>
 </div>
-@if (sharedService.isEditDialogOpen) {
+@if (sharedService.isEditContactDialogOpen) {
 <app-contact-edit
   [currentUserId]="sharedService.currentUserId"
+  [ngClass]="{
+    'blur-background': sharedService.isDeleteContactDialogOpen,
+    'd-none': sharedService.isDeleteContactDialogOpen
+  }"
 ></app-contact-edit>
+} @if (sharedService.isDeleteContactDialogOpen) {
+<app-contact-delete
+  [currentUserId]="sharedService.currentUserId"
+></app-contact-delete>
 }

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { ContactEditComponent } from './components/contacts/contact-edit/contact
 import { CommonModule } from '@angular/common';
 import { SharedService } from './services/shared.service';
 import { Observable } from 'rxjs';
+import { ContactDeleteComponent } from './components/contacts/contact-delete/contact-delete.component';
 
 @Component({
   selector: 'app-root',
@@ -18,6 +19,7 @@ import { Observable } from 'rxjs';
     SidebarComponent,
     SidebarMobileComponent,
     ContactEditComponent,
+    ContactDeleteComponent,
     CommonModule,
   ],
   templateUrl: './app.component.html',

src/app/components/contacts/contact-delete/contact-delete.component.html

@@ -0,0 +1,17 @@
+<section>
+  <div class="dialog">
+    <p>Do you really want to delete the contact?</p>
+    <div class="btns">
+      <div class="btn">
+        <div class="btn-cancle" (click)="deleteCancle()">
+          {{ "contact-delete-dialog.btn-cancle" | translate }}
+        </div>
+      </div>
+      <div class="btn">
+        <div class="btn-delete" (click)="deleteContact()">
+          {{ "contact-delete-dialog.btn-delete" | translate }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/app/components/contacts/contact-delete/contact-delete.component.scss

@@ -0,0 +1,82 @@
+section {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  width: 600px;
+  height: 170px;
+  border-radius: 26px;
+  border: 2px solid rgba($color: #000000, $alpha: 0.1);
+  p {
+    font-size: 27px;
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 111px;
+  height: 57px;
+  margin: 0 24px;
+  font-size: 21px;
+  font-weight: 400;
+}
+
+.btn-cancle {
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  border-color: var(--black);
+  background-color: var(--dark-blue);
+  color: var(--white);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--light-blue);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.btn-delete {
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--red);
+  background-color: var(--white);
+  border: 1px solid var(--red);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--white);
+    background-color: var(--red);
+    border-color: var(--black);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}

src/app/components/contacts/contact-delete/contact-delete.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactDeleteComponent } from './contact-delete.component';
+
+describe('ContactDeleteComponent', () => {
+  let component: ContactDeleteComponent;
+  let fixture: ComponentFixture<ContactDeleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactDeleteComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactDeleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/contacts/contact-delete/contact-delete.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { SharedService } from '../../../services/shared.service';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-contact-delete',
+  standalone: true,
+  imports: [TranslateModule],
+  templateUrl: './contact-delete.component.html',
+  styleUrl: './contact-delete.component.scss',
+})
+export class ContactDeleteComponent {
+  @Input() currentUserId!: string;
+
+  constructor(private sharedService: SharedService) {}
+
+  deleteContact() {
+    console.log('Contact deleted');
+    this.sharedService.isDeleteContactDialogOpen = false;
+    this.sharedService.isAnyDialogOpen = false;
+  }
+
+  deleteCancle() {
+    this.sharedService.isDeleteContactDialogOpen = false;
+    if (!this.sharedService.isEditContactDialogOpen) {
+      this.sharedService.isAnyDialogOpen = false;
+    }
+  }
+}

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -38,9 +38,9 @@
             <img src="./../../../../assets/img/contact/edit.svg" alt="" />
             <p (click)="openEditDialog()">edit</p>
           </div>
-          <div class="btn">
+          <div class="btn btn-delete">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />
-            <p>delete</p>
+            <p (click)="deleteContact()">delete</p>
           </div>
         </div>
       </div>

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -27,7 +27,13 @@ export class ContactDetailComponent {
   }
 
   openEditDialog() {
-    this.sharedService.isEditDialogOpen = !this.sharedService.isEditDialogOpen;
+    this.sharedService.isAnyDialogOpen = true;
+    this.sharedService.isEditContactDialogOpen = true;
+  }
+
+  deleteContact() {
+    this.sharedService.isAnyDialogOpen = true;
+    this.sharedService.isDeleteContactDialogOpen = true;
   }
 
   @HostListener('document:click', ['$event'])
@@ -35,10 +41,14 @@ export class ContactDetailComponent {
     const targetElement = event.target as HTMLElement;
     if (targetElement.closest('.btn-edit')) {
       this.sharedService.isAnyDialogOpen = true;
-      this.sharedService.isEditDialogOpen = true;
+      this.sharedService.isEditContactDialogOpen = true;
+    } else if (targetElement.closest('.btn-delete')) {
+      this.sharedService.isAnyDialogOpen = true;
+      this.sharedService.isDeleteContactDialogOpen = true;
     } else if (!targetElement.closest('.dialog')) {
       this.sharedService.isAnyDialogOpen = false;
-      this.sharedService.isEditDialogOpen = false;
+      this.sharedService.isEditContactDialogOpen = false;
+      this.sharedService.isDeleteContactDialogOpen = false;
     }
   }
 }

src/app/components/contacts/contact-form/contact-form.component.html

@@ -62,8 +62,9 @@
     <span>{{ "form.invalid-msg" | translate }}</span>
     }
     <div class="btns">
-      <div class="btn" (click)="deleteContact()">
+      <div class="btn">
         <input
+          (click)="deleteContact()"
           class="btn-delete"
           type="button"
           value="{{ 'form.btn-delete' | translate }}"

src/app/components/contacts/contact-form/contact-form.component.scss

@@ -28,11 +28,13 @@ span {
     border: 1px solid var(--red);
     font-size: 23px;
     font-weight: 400;
+    transition: 125ms ease-in-out;
     cursor: pointer;
     &:hover {
       color: var(--white);
       background-color: var(--red);
       border-color: var(--black);
+      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
     }
   }
   input {
@@ -79,8 +81,9 @@ span {
   background-color: var(--light-gray);
   font-size: 23px;
   font-weight: 400;
-  transition: 200ms ease-in-out;
+  transition: 125ms ease-in-out;
   &:hover:not(:disabled) {
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
     background-color: var(--light-blue) !important;
     cursor: pointer;
   }

src/app/components/contacts/contact-form/contact-form.component.ts

@@ -57,11 +57,12 @@ export class ContactFormComponent implements OnChanges {
   }
 
   deleteContact() {
-    this.closeEditDialog();
+    this.sharedService.isDeleteContactDialogOpen = true;
+    this.sharedService.isAnyDialogOpen = true;
   }
 
   closeEditDialog() {
-    this.sharedService.isEditDialogOpen = false;
+    this.sharedService.isEditContactDialogOpen = false;
     this.sharedService.isAnyDialogOpen = false;
   }
 }

src/app/services/shared.service.ts

@@ -5,7 +5,8 @@ import { Injectable } from '@angular/core';
 })
 export class SharedService {
   isAnyDialogOpen: boolean = false;
-  isEditDialogOpen: boolean = false;
+  isEditContactDialogOpen: boolean = false;
+  isDeleteContactDialogOpen: boolean = false;
   currentUserId: string = '';
 
   constructor() {}

src/assets/i18n/en.json

@@ -19,6 +19,10 @@
     "msg-send0": "Your message has been sent successfully.",
     "msg-send1": "I will contact you shortly."
   },
+  "contact-delete-dialog": {
+    "btn-cancle": "Cancle",
+    "btn-delete": "Delete"
+  },
   "summary": {
     "headlineDescription": "Key Metrics at a Glance",
     "morning": "Good Morning",