From e703941f042665f3be6ac47b5c71c81ca54d2c81 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:33:36 +0200
Subject: [PATCH] animation

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.css  | 10 ++++++++--
 frontend/src/app/ntt-gantt/ntt-gantt.component.html |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index b374b66..433dea3 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -5,6 +5,11 @@
   overflow: hidden;
 }
 
+.splitter {
+  height: 50%;
+  border-right: 1px rgba(0, 0, 0, 0.181) solid;
+  margin-left: 15px;
+}
 .head {
   color: rgba(41, 46, 50, 0.8);
   padding-left: 10px;
@@ -13,8 +18,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
-  height: 50px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  height: 60px;
   margin-bottom: 10px;
   background-color: white;
 }
@@ -260,6 +265,7 @@
   z-index: 1000; /* Ensure it is above other content */
   border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(2px); /* Blur effect */
+  animation: slideUp 1.5s forwards;
 }
 
 
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 33ad948..9667159 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,7 +1,7 @@
 <div class="head" style="">
   <div style="display: flex; align-items: center; gap: 15px; height: 100%;">
     <h2 style="padding-top: 5px;">W&I Kalender</h2>
-
+    <div class="splitter"></div>
     <!-- Preset Picker -->
     <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px;">
       <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
@@ -30,7 +30,7 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <mat-button-toggle-group style="height: 80%; font-size: 13px; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)"
+    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)"
       name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
       <mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
         [value]="lang">