From 357b55a94a6abc75afc6f26d947393e164c75c30 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 28 Mar 2024 07:49:40 +0100
Subject: [PATCH] added animation

---
 .../components/board/task/task.component.ts    |  6 ++----
 .../contact-detail.component.html              |  7 ++++++-
 .../contact-detail.component.scss              | 18 ++++++++++++++++++
 .../contact-detail/contact-detail.component.ts |  2 +-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts
index 9bac4b6..1b314ab 100644
--- a/src/app/components/board/task/task.component.ts
+++ b/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'],
-    ['CSS', '#214CE4'],
-    ['JavaScript', '#D5BA32'],
-    ['Angular', '#DD002D'],
+    ['User Story', '#0038ff'],
+    ['Technical Task', '#20d7c2'],
   ]);
 
   constructor(
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html
index b3d643b..4c3f303 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.html
+++ b/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"
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss
index 01a45e8..dab2414 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/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;
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts
index 0f464b8..ae3d0ad 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.ts
+++ b/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';