bugfixes

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

@@ -18,7 +18,9 @@ export class ContactDeleteComponent {
     private sharedService: SharedService,
     private firebaseService: FirebaseService,
     private router: Router
-  ) {}
+  ) {
+    console.log(this.sharedService.isEditContactDialogOpen);
+  }
 
   deleteContact() {
     this.firebaseService.deleteUser(this.currentUserId);

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

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

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

@@ -29,14 +29,16 @@
         required
       />
     </div>
-    @if ((!firstName.valid && firstName.touched) && (!lastName.valid &&
-    lastName.touched)) {
-    <span>{{ "contact-dialog-form.invalid-name" | translate }}</span>
-    } @else { @if (!firstName.valid && firstName.touched) {
-    <span>{{ "contact-dialog-form.invalid-firstName" | translate }}</span>
-    } @else { @if (!lastName.valid && lastName.touched) {
-    <span>{{ "contact-dialog-form.invalid-lastName" | translate }}</span>
-    } } }
+    <div class="error-msg">
+      @if ((!firstName.valid && firstName.touched) && (!lastName.valid &&
+      lastName.touched)) {
+      <p>{{ "contact-dialog-form.invalid-name" | translate }}</p>
+      } @else { @if (!firstName.valid && firstName.touched) {
+      <p>{{ "contact-dialog-form.invalid-firstName" | translate }}</p>
+      } @else { @if (!lastName.valid && lastName.touched) {
+      <p>{{ "contact-dialog-form.invalid-lastName" | translate }}</p>
+      } } }
+    </div>
     <input
       id="email"
       type="email"
@@ -47,9 +49,11 @@
       autocomplete="off"
       required
     />
-    @if (!email.valid && email.touched) {
-    <span>{{ "contact-dialog-form.invalid-email" | translate }}</span>
-    }
+    <div class="error-msg">
+      @if (!email.valid && email.touched) {
+      <p>{{ "contact-dialog-form.invalid-email" | translate }}</p>
+      }
+    </div>
     <input
       id="phone"
       type="phone"
@@ -60,9 +64,11 @@
       autocomplete="off"
       required
     />
-    @if (!phone.valid && phone.touched) {
-    <span>{{ "contact-dialog-form.invalid-phone" | translate }}</span>
-    }
+    <div class="error-msg">
+      @if (!phone.valid && phone.touched) {
+      <p>{{ "contact-dialog-form.invalid-phone" | translate }}</p>
+      }
+    </div>
     <div class="btns">
       <app-form-btn
         class="btn-delete"

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

@@ -4,11 +4,15 @@ section {
   align-items: center;
 }
 
-span {
-  font-size: 14px;
-  font-weight: 400;
-  color: red;
-  padding: 0 0 10px 20px;
+.error-msg {
+  min-height: 18px;
+  padding: 6px;
+  margin-left: 12px;
+  p {
+    color: var(--red);
+    font-size: 12px;
+    font-weight: 400;
+  }
 }
 
 .name {
@@ -26,7 +30,7 @@ span {
     font-size: 20px;
     font-weight: 400;
     padding: 12px;
-    margin: 12px 12px;
+    margin: 0 12px;
     width: 90%;
     &:hover {
       border-color: var(--light-blue);

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

@@ -9,12 +9,12 @@ import { SharedService } from '../../../../services/shared.service';
   styleUrl: './btn-close.component.scss',
 })
 export class BtnCloseComponent {
-  @Input() dialogClose!: string | boolean;
+  @Input() isEditContactDialogOpen: boolean = false;
 
   constructor(private sharedService: SharedService) {}
 
   closeClicked() {
     this.sharedService.isAnyDialogOpen = false;
-    this.dialogClose = false;
+    this.sharedService.isEditContactDialogOpen = this.isEditContactDialogOpen;
   }
 }