added animation

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

@@ -16,10 +16,8 @@ export class TaskComponent {
   @Input() task!: Task;
 
   categoryColors = new Map<string, string>([
-    ['HTML', '#E54B20'],
+    ['User Story', '#0038ff'],
-    ['CSS', '#214CE4'],
+    ['Technical Task', '#20d7c2'],
-    ['JavaScript', '#D5BA32'],
-    ['Angular', '#DD002D'],
   ]);
 
   constructor(

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

@@ -5,7 +5,12 @@
     <div class="metrics-txt">Better with a team</div>
   </div>
   @if (paramsId) {
-  <div>
+  <div
+    class="contact-details"
+    [ngClass]="{
+      'animation-coming-in': paramsId
+    }"
+  >
     <div class="header">
       <div
         class="circle"

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

@@ -8,6 +8,24 @@ section {
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
 }
 
+/*------------- ANIMATION -------------*/
+
+.animation-coming-in {
+  animation: coming-in 1s ease-in-out;
+  opacity: 1;
+}
+
+@keyframes coming-in {
+  0% {
+    opacity: 0;
+    transform: translateX(100vw);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 .headerline {
   display: flex;
   align-items: center;

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';