bugfixes & update design

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

@@ -45,6 +45,8 @@ select {
   border: 1px solid var(--light-gray);
   padding: 12px 21px;
   width: calc(100% - 42px);
+  color: var(--black);
+  background-color: var(--white);
   resize: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -17,6 +17,13 @@
         autocomplete="off"
         required
       />
+      @if (sharedService.isContactViewMedia) {
+      <div class="error-msg">
+        @if (!firstName.valid && firstName.touched) {
+        <p>{{ "contact-dialog-form.invalid-firstName" | translate }}</p>
+        }
+      </div>
+      }
       <input
         id="lastName"
         type="text"
@@ -29,6 +36,13 @@
         required
       />
     </div>
+    @if (sharedService.isContactViewMedia) {
+    <div class="error-msg">
+      @if (!lastName.valid && lastName.touched) {
+      <p>{{ "contact-dialog-form.invalid-lastName" | translate }}</p>
+      }
+    </div>
+    } @if (!sharedService.isContactViewMedia) {
     <div class="error-msg">
       @if ((!firstName.valid && firstName.touched) && (!lastName.valid &&
       lastName.touched)) {
@@ -39,6 +53,7 @@
       <p>{{ "contact-dialog-form.invalid-lastName" | translate }}</p>
       } } }
     </div>
+    }
     <input
       id="email"
       type="email"

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

@@ -17,7 +17,7 @@ export class ContactFormComponent implements OnChanges {
 
   constructor(
     private firebaseService: FirebaseService,
-    private sharedService: SharedService
+    public sharedService: SharedService
   ) {
     this.updateContactData();
   }

src/app/services/shared.service.ts

@@ -8,6 +8,7 @@ export class SharedService {
   isEditContactDialogOpen: boolean = false;
   isDeleteContactDialogOpen: boolean = false;
   isPageViewMedia: boolean = window.innerWidth <= 650;
+  isContactViewMedia: boolean = window.innerWidth <= 800;
   currentUserId: string = '';
 
   private resizeListener!: () => void;
@@ -29,6 +30,7 @@ export class SharedService {
 
   private onResize() {
     this.isPageViewMedia = window.innerWidth <= 650;
+    this.isContactViewMedia = window.innerWidth <= 800;
   }
 
   cleanup() {

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html

@@ -7,11 +7,7 @@
   @if (overlayType === 'newTaskOverlay' || (overlayData !== '' &&
   getTaskData(overlayData).length > 0)) {
   <div class="header">
-    @if (overlayMobile) {
-    <app-btn-back></app-btn-back>
-    } @else {
     <app-btn-close (click)="closeDialog()"></app-btn-close>
-    }
   </div>
   <app-add-task
     [overlayData]="overlayData"

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts

@@ -8,7 +8,7 @@ import { CommonModule } from '@angular/common';
 import { User } from '../../../../interfaces/user.interface';
 import { AssignedComponent } from '../../../../components/add-task/assigned/assigned.component';
 import { AddTaskComponent } from '../../../../components/add-task/add-task.component';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 
 @Component({
@@ -35,7 +35,8 @@ export class TaskEditOverlayComponent {
   constructor(
     public firebaseService: FirebaseService,
     private overlayService: OverlayService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -57,7 +58,9 @@ export class TaskEditOverlayComponent {
   }
 
   closeDialog() {
-    this.closeDialogEmitter.emit('');
+    this.overlayMobile
+      ? this.router.navigate(['/board'])
+      : this.closeDialogEmitter.emit('');
     this.removeTaskData();
   }