diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.html b/src/app/components/contacts/contact-edit/contact-edit.component.html index 29b785d..7ae4d3a 100644 --- a/src/app/components/contacts/contact-edit/contact-edit.component.html +++ b/src/app/components/contacts/contact-edit/contact-edit.component.html @@ -3,6 +3,9 @@

Edit contact

+
diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.ts b/src/app/components/contacts/contact-edit/contact-edit.component.ts index 9e7e2eb..429f309 100644 --- a/src/app/components/contacts/contact-edit/contact-edit.component.ts +++ b/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', }) diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.html b/src/app/shared/components/buttons/btn-close/btn-close.component.html new file mode 100644 index 0000000..d9fb310 --- /dev/null +++ b/src/app/shared/components/buttons/btn-close/btn-close.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.scss b/src/app/shared/components/buttons/btn-close/btn-close.component.scss new file mode 100644 index 0000000..c79bfc8 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.spec.ts b/src/app/shared/components/buttons/btn-close/btn-close.component.spec.ts new file mode 100644 index 0000000..083a879 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BtnCloseComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BtnCloseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.ts b/src/app/shared/components/buttons/btn-close/btn-close.component.ts new file mode 100644 index 0000000..4d41723 --- /dev/null +++ b/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; + } +} diff --git a/src/assets/img/close.svg b/src/assets/img/close.svg new file mode 100644 index 0000000..5a60c58 --- /dev/null +++ b/src/assets/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file