added close btn component

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

@@ -3,6 +3,9 @@
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />
       <p>Edit contact</p>
+      <app-btn-close
+        [dialogClose]="'sharedService.isDeleteContactDialogOpen'"
+      ></app-btn-close>
     </div>
     <div class="content">
       <div class="badge">

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

@@ -2,12 +2,12 @@ import { Component, Input } from '@angular/core';
 import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
 import { UserService } from '../../../services/user.service';
-import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
+import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/btn-close.component';
 
 @Component({
   selector: 'app-contact-edit',
   standalone: true,
-  imports: [CommonModule, ContactFormComponent, BtnBackComponent],
+  imports: [CommonModule, ContactFormComponent, BtnCloseComponent],
   templateUrl: './contact-edit.component.html',
   styleUrl: './contact-edit.component.scss',
 })

src/app/shared/components/buttons/btn-close/btn-close.component.html

@@ -0,0 +1,3 @@
+<div class="btn">
+  <img (click)="closeClicked()" src="./../../../../assets/img/close.svg" />
+</div>

src/app/shared/components/buttons/btn-close/btn-close.component.scss

@@ -0,0 +1,22 @@
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  img {
+    width: 32px;
+    height: 32px;
+    filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
+      hue-rotate(154deg) brightness(92%) contrast(92%);
+  }
+  &:hover {
+    background-color: var(--light-gray);
+    border-radius: 100%;
+    scale: 1.1;
+    img {
+      scale: 1.1;
+    }
+  }
+}

src/app/shared/components/buttons/btn-close/btn-close.component.spec.ts

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

src/app/shared/components/buttons/btn-close/btn-close.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { SharedService } from '../../../../services/shared.service';
+
+@Component({
+  selector: 'app-btn-close',
+  standalone: true,
+  imports: [],
+  templateUrl: './btn-close.component.html',
+  styleUrl: './btn-close.component.scss',
+})
+export class BtnCloseComponent {
+  @Input() dialogClose!: string | boolean;
+
+  constructor(private sharedService: SharedService) {}
+
+  closeClicked() {
+    this.sharedService.isAnyDialogOpen = false;
+    this.dialogClose = false;
+  }
+}

src/assets/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>