clean code

src/app/app.component.scss

@@ -40,6 +40,10 @@ app-sidebar-mobile {
   filter: blur(5px);
 }
 
+.d-none {
+  display: none;
+}
+
 @media screen and (max-width: 910px) {
   .main-content {
     padding: 32px;

src/app/app.routes.ts

@@ -14,6 +14,7 @@ export const routes: Routes = [
   { path: 'summary', component: SummaryComponent },
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
+  { path: 'task/:id', component: TaskOverlayComponent },
   { path: 'contacts', component: ContactsComponent },
   { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },

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

@@ -172,7 +172,7 @@ export class AddTaskComponent {
   }
 
   closeOverlay() {
-    this.overlayService.setOverlayData('', '', false);
+    this.overlayService.setOverlayData('', '');
   }
 
   untouchedFormFields() {

src/app/components/board/task/task.component.ts

@@ -30,9 +30,9 @@ export class TaskComponent {
 
   openTaskDetailsOverlay(taskId: string | undefined) {
     if (window.innerWidth >= 650) {
-      this.overlayService.setOverlayData('taskOverlay', taskId, false);
+      this.overlayService.setOverlayData('taskOverlay', taskId);
     } else {
-      this.overlayService.setOverlayData('taskOverlay', taskId, true);
+      this.router.navigate(['/task', taskId]);
     }
   }
 

src/app/services/overlay.service.ts

@@ -10,7 +10,7 @@ export class OverlayService {
 
   constructor() {}
 
-  setOverlayData(overlay: string, data: any, mobile: boolean) {
-    this.overlayDataSubject.next({ overlay, data, mobile });
+  setOverlayData(overlay: string, data: any) {
+    this.overlayDataSubject.next({ overlay, data });
   }
 }

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

@@ -1 +1,3 @@
-<img (click)="backClicked()" src="./../../../../assets/img/arrow-left.svg" />
+<div class="btn" (click)="backClicked()">
+  <img src="./../../../../assets/img/arrow-left.svg" />
+</div>

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

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

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

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

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

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

src/app/shared/components/overlay/overlay.component.html

@@ -1,11 +1,8 @@
-<div
-  *ngIf="overlayData"
-  [ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }"
->
+@if (overlayData) {
+<div class="overlay">
   @if (overlayType === "taskOverlay") {
   <app-task-overlay
     [overlayData]="overlayData"
-    [overlayMobile]="overlayMobile"
     (closeDialogEmitter)="onCloseOverlay($event)"
   ></app-task-overlay>
   } @if (overlayType === "taskOverlayEdit") {
@@ -15,3 +12,4 @@
   ></app-task-edit-overlay>
   }
 </div>
+}

src/app/shared/components/overlay/overlay.component.ts

@@ -22,15 +22,9 @@ import { ActivatedRoute } from '@angular/router';
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })
-export class OverlayComponent implements OnInit, OnDestroy {
-  @HostBinding('class.overlay') isOverlay = window.innerWidth >= 650;
-  @HostBinding('class.overlay-mobile') isOverlayMobile =
-    window.innerWidth < 650;
-  private resizeListener!: () => void;
-
+export class OverlayComponent implements OnInit {
   overlayType: any;
   overlayData: any;
-  overlayMobile: boolean = false;
 
   constructor(
     private overlayService: OverlayService,
@@ -39,7 +33,6 @@ export class OverlayComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.checkOverlayData();
-    this.checkWindowWidth();
   }
 
   checkOverlayData() {
@@ -47,19 +40,10 @@ export class OverlayComponent implements OnInit, OnDestroy {
       if (data) {
         this.overlayType = data.overlay;
         this.overlayData = data.data;
-        this.overlayMobile = data.mobile;
       }
     });
   }
 
-  checkWindowWidth() {
-    this.resizeListener = () => {
-      this.isOverlay = window.innerWidth >= 650;
-      this.isOverlayMobile = window.innerWidth < 650;
-    };
-    window.addEventListener('resize', this.resizeListener);
-  }
-
   onCloseOverlay(emitter: string) {
     this.overlayData = emitter;
   }
@@ -74,8 +58,4 @@ export class OverlayComponent implements OnInit, OnDestroy {
       this.onCloseOverlay('');
     }
   }
-
-  ngOnDestroy(): void {
-    window.removeEventListener('resize', this.resizeListener);
-  }
 }

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

@@ -3,6 +3,7 @@
   overlay: !overlayMobile,
   'overlay-mobile': overlayMobile,
 }"
+  *ngIf="overlayData !== '' && getTaskData(overlayData).length > 0"
 >
   <div class="header">
     <div
@@ -13,7 +14,11 @@
     >
       {{ getTaskData(overlayData)[0].category }}
     </div>
+    @if (overlayMobile) {
+    <app-btn-back></app-btn-back>
+    } @else {
     <app-btn-close (click)="closeDialog()"></app-btn-close>
+    }
   </div>
   <div
     [ngClass]="{

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -7,9 +7,7 @@
 }
 
 .overlay-mobile {
-  background-color: var(--white);
-  width: calc(100vw - 24px);
-  height: calc(100vh - 24px);
+  height: calc(100% - 24px);
   padding: 12px;
 }
 
@@ -37,7 +35,7 @@
 }
 
 .content-mobile {
-  height: calc(100vh - 214px);
+  height: calc(100% - 104px);
   overflow-y: auto;
 }
 
@@ -216,7 +214,7 @@
   align-items: center;
   justify-content: right;
   width: 100%;
-  margin: 12px 0;
+  margin-top: 12px;
   img {
     width: 20px;
     height: 20px;

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

@@ -1,24 +1,28 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { CommonModule } from '@angular/common';
 import { OverlayService } from '../../../../services/overlay.service';
+import { ActivatedRoute } from '@angular/router';
+import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [BtnCloseComponent, CommonModule],
+  imports: [BtnCloseComponent, CommonModule, BtnBackComponent],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })
-export class TaskOverlayComponent {
+export class TaskOverlayComponent implements OnInit {
   @Input() overlayData: string = '';
-  @Input() overlayMobile: boolean = false;
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
+  overlayMobile: boolean = false;
+
   constructor(
     public firebaseService: FirebaseService,
-    private overlayService: OverlayService
+    private overlayService: OverlayService,
+    private route: ActivatedRoute
   ) {}
 
   categoryColors = new Map<string, string>([
@@ -30,8 +34,19 @@ export class TaskOverlayComponent {
     this.closeDialogEmitter.emit('');
   }
 
+  ngOnInit() {
+    if (this.overlayData == '') {
+      if (this.route.params.subscribe()) {
+        this.route.params.subscribe((params) => {
+          this.overlayData = params['id'];
+          this.overlayMobile = true;
+        });
+      }
+    }
+  }
+
   editTask(overlayData: string) {
-    this.overlayService.setOverlayData('taskOverlayEdit', overlayData, false);
+    this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
   }
 
   deleteTask(overlayData: string) {

src/assets/img/arrow-left.svg

@@ -1,5 +1,3 @@
-<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="arrow-left-line">
-<path id="Vector" d="M10.437 15.1667H25.333C26.0694 15.1667 26.6663 15.7637 26.6663 16.5001C26.6663 17.2364 26.0694 17.8334 25.333 17.8334H10.437L16.6463 24.0427C17.167 24.5634 17.167 25.4074 16.6463 25.9281C16.1257 26.4487 15.2816 26.4487 14.761 25.9281L6.74722 17.9143C5.96617 17.1332 5.96617 15.8669 6.74722 15.0858L14.761 7.07206C15.2816 6.55144 16.1257 6.55144 16.6463 7.07206C17.167 7.59268 17.167 8.43677 16.6463 8.95739L10.437 15.1667Z" fill="#29ABE2"/>
-</g>
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.70752 8.63255H22.1981C22.9345 8.63255 23.5314 9.2295 23.5314 9.96588C23.5314 10.7023 22.9345 11.2992 22.1981 11.2992H4.70752L10.9169 17.5085C11.4375 18.0292 11.4375 18.8733 10.9168 19.3939C10.3962 19.9145 9.55214 19.9145 9.03152 19.3939L1.01773 11.3801C0.236679 10.599 0.236681 9.33272 1.01773 8.55167L9.03152 0.537881C9.55214 0.0172601 10.3962 0.0172609 10.9168 0.537881C11.4375 1.0585 11.4375 1.90259 10.9168 2.42322L4.70752 8.63255Z" fill="#29ABE2"/>
 </svg>

src/assets/img/close.svg

@@ -1,3 +1,3 @@
-<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.24953 7.00008L11.4925 12.2431M1.00653 12.2431L6.24953 7.00008L1.00653 12.2431ZM11.4925 1.75708L6.24853 7.00008L11.4925 1.75708ZM6.24853 7.00008L1.00653 1.75708L6.24853 7.00008Z" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.9998 8.36587L2.0998 13.2659C1.91647 13.4492 1.68314 13.5409 1.3998 13.5409C1.11647 13.5409 0.883138 13.4492 0.699805 13.2659C0.516471 13.0825 0.424805 12.8492 0.424805 12.5659C0.424805 12.2825 0.516471 12.0492 0.699805 11.8659L5.5998 6.96587L0.699805 2.06587C0.516471 1.88254 0.424805 1.6492 0.424805 1.36587C0.424805 1.08254 0.516471 0.849202 0.699805 0.665869C0.883138 0.482536 1.11647 0.390869 1.3998 0.390869C1.68314 0.390869 1.91647 0.482536 2.0998 0.665869L6.9998 5.56587L11.8998 0.665869C12.0831 0.482536 12.3165 0.390869 12.5998 0.390869C12.8831 0.390869 13.1165 0.482536 13.2998 0.665869C13.4831 0.849202 13.5748 1.08254 13.5748 1.36587C13.5748 1.6492 13.4831 1.88254 13.2998 2.06587L8.3998 6.96587L13.2998 11.8659C13.4831 12.0492 13.5748 12.2825 13.5748 12.5659C13.5748 12.8492 13.4831 13.0825 13.2998 13.2659C13.1165 13.4492 12.8831 13.5409 12.5998 13.5409C12.3165 13.5409 12.0831 13.4492 11.8998 13.2659L6.9998 8.36587Z" fill="#2A3647"/>
 </svg>