From 9a1b7adf91bdceb4027512c592c302bd02e4b38c Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:16:33 +0200
Subject: [PATCH 01/14] layout changes

---
 .../src/app/ntt-gantt/ntt-gantt.component.css | 23 ++++++
 .../app/ntt-gantt/ntt-gantt.component.html    | 79 +++++++++++--------
 2 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index d5b2cfb..369cbee 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -161,6 +161,28 @@
   margin-right: -6px;
 }
 
+.restartButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70%;
+
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: solid 1px rgba(0, 0, 0, 0.215);
+  border-radius: 8px;
+  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
+}
+
+.restartButton mat-icon {
+  transform: scale(0.9);
+  margin-right: -2px;
+  margin-bottom: 2px;
+}
+
 .detailsButton {
   display: flex;
   align-items: center;
@@ -172,6 +194,7 @@
   gap: 8px;
   user-select: none;
   padding-left: 10px;
+  padding-right: 10px;
 }
 
 .filterButton {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 083fdc6..4bdceb1 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,6 +1,43 @@
 <div class="head">
   <h2>W&I Kalender</h2>
 
+  <!-- Preset Picker -->
+  <mat-form-field appearance="fill" style="width: 300px;">
+    <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
+      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+        <mat-option *ngFor="let preset of group.presets" [value]="preset">
+          {{preset.name}}
+          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+            <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
+        </mat-option>
+      </mat-optgroup>
+    </mat-select>
+  </mat-form-field>
+  <button mat-basic-button *ngIf="isUserPreset" class="editButton"
+    (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
+  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
+    (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
+
+  <!-- Language Picker -->
+  <!-- <mat-form-field style="width: 90px;" appearance="fill">
+    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
+    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
+      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
+        {{lang}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field> -->
+
+  <!-- Language Picker -->
+  <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (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">
+      {{lang}}
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+
+
   <!-- User -->
   <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
     <h3 *ngIf="userId"
@@ -19,41 +56,14 @@
 <div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
 
 
-  <!-- Language Picker -->
-  <mat-form-field style="width: 90px;" appearance="fill">
-    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
-    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
-      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
-        {{lang}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
 
 
 
-  <!-- Preset Picker -->
-  <mat-form-field appearance="fill" style="width: 300px;">
-    <mat-label>Preset</mat-label>
-    <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
-      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
-        <mat-option *ngFor="let preset of group.presets" [value]="preset">
-          {{preset.name}}
-          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
-          <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
-        </mat-option>
-      </mat-optgroup>
-    </mat-select>
-  </mat-form-field>
 
-  <button mat-basic-button *ngIf="isUserPreset" class="editButton"
-    (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
-  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
-    (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
 
-  <!-- Restart Button -->
-  <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
-    <mat-icon>restart_alt</mat-icon>
-  </button>
+
+
+
 </div>
 
 
@@ -100,6 +110,7 @@
   <!-- <div class="split"></div> -->
 
   <div class="right">
+
     <!-- Scale Picker -->
     <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
       name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
@@ -110,7 +121,8 @@
     </mat-button-toggle-group>
 
     <!-- Date Range Picker  -->
-    <div class="dateRangePicker" style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
+    <div class="dateRangePicker"
+      style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
       <div style="height: 70%; display: flex; align-items: center; width: 170px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
         background-color: white; padding-left: 10px; border-radius: 8px 0px 0px 8px;">
         <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
@@ -132,6 +144,11 @@
       <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
         (change)="refreshData()"></mat-slide-toggle>
     </div>
+
+    <!-- Restart Button -->
+    <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
+      <mat-icon>restart_alt</mat-icon>
+    </button>
   </div>
 </div>
 

From 56838f8c4b1fb0612019fd96386bd3859b51d0ed Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:17:38 +0200
Subject: [PATCH 02/14] removed spacing

---
 .../src/app/ntt-gantt/ntt-gantt.component.html     | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 4bdceb1..1103da4 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -53,20 +53,6 @@
   </div>
 </div>
 
-<div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
-
-
-
-
-
-
-
-
-
-
-</div>
-
-
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
   <div class="left">
 

From 91dc832be57e0c8eb23b302b9d12d6da8c728cec Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:25:23 +0200
Subject: [PATCH 03/14] changes

---
 .../src/app/ntt-gantt/ntt-gantt.component.css |  3 +-
 .../app/ntt-gantt/ntt-gantt.component.html    | 57 ++++++++++---------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 369cbee..b374b66 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   height: 50px;
   margin-bottom: 10px;
   background-color: white;
@@ -303,6 +303,7 @@
   border: solid 1px rgba(0, 0, 0, 0.124);
   border-radius: 0px 8px 8px 0px;
   border-left: none;
+  cursor: pointer;
 }
 
 .dateButton mat-icon {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 1103da4..a045144 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,25 +1,26 @@
-<div class="head">
-  <h2>W&I Kalender</h2>
+<div class="head" style="">
+  <div style="display: flex; align-items: center; gap: 15px;">
+    <h2 style="padding-top: 3px;">W&I Kalender</h2>
 
-  <!-- Preset Picker -->
-  <mat-form-field appearance="fill" style="width: 300px;">
-    <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
-      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
-        <mat-option *ngFor="let preset of group.presets" [value]="preset">
-          {{preset.name}}
-          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+    <!-- Preset Picker -->
+    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px;">
+      <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
+        <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+          <mat-option *ngFor="let preset of group.presets" [value]="preset">
+            {{preset.name}}
+            <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
             <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
-        </mat-option>
-      </mat-optgroup>
-    </mat-select>
-  </mat-form-field>
-  <button mat-basic-button *ngIf="isUserPreset" class="editButton"
-    (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
-  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
-    (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </div>
+    <button mat-basic-button *ngIf="isUserPreset" class="editButton"
+      (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
+    <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
+      (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
 
-  <!-- Language Picker -->
-  <!-- <mat-form-field style="width: 90px;" appearance="fill">
+    <!-- Language Picker -->
+    <!-- <mat-form-field style="width: 90px;" appearance="fill">
     <mat-label>{{languageService.lMap.get('language')}}</mat-label>
     <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
       <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
@@ -28,14 +29,16 @@
     </mat-select>
   </mat-form-field> -->
 
-  <!-- Language Picker -->
-  <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (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">
-      {{lang}}
-    </mat-button-toggle>
-  </mat-button-toggle-group>
+    <!-- Language Picker -->
+    <mat-button-toggle-group style="height: 20%; font-size: 13px; border-radius: 8px;" (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">
+        {{lang}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+
 
 
   <!-- User -->

From 2b9675d4948d2fed36d0e47a149787e5d9e193ff Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:27:49 +0200
Subject: [PATCH 04/14] changerd

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index a045144..33ad948 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,6 +1,6 @@
 <div class="head" style="">
-  <div style="display: flex; align-items: center; gap: 15px;">
-    <h2 style="padding-top: 3px;">W&I Kalender</h2>
+  <div style="display: flex; align-items: center; gap: 15px; height: 100%;">
+    <h2 style="padding-top: 5px;">W&I Kalender</h2>
 
     <!-- Preset Picker -->
     <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px;">
@@ -30,7 +30,7 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <mat-button-toggle-group style="height: 20%; font-size: 13px; border-radius: 8px;" (change)="languageChange($event)"
+    <mat-button-toggle-group style="height: 80%; 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">

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 05/14] 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">

From f3204e869d798f23d42d9dac9ce82f61e7cf1156 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:35:12 +0200
Subject: [PATCH 06/14] padding fix

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 9667159..86ad8a7 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,6 +1,6 @@
 <div class="head" style="">
   <div style="display: flex; align-items: center; gap: 15px; height: 100%;">
-    <h2 style="padding-top: 5px;">W&I Kalender</h2>
+    <h2 style="padding-top: 3px;">W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
     <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px;">

From ceb2845e1a98053d8b56bf98a8911d89275b0c54 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:47:59 +0200
Subject: [PATCH 07/14] changes

---
 frontend/src/app/app.component.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
index 36b8481..ae1f382 100644
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@@ -5,6 +5,6 @@
   filter: alpha(opacity = 90);
 }
 
-body, html {
+body {
   overflow-x: hidden;
 }
\ No newline at end of file

From 3e70e7e8e5d899d441baf7255dbe4e8ee0e492f3 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:49:35 +0200
Subject: [PATCH 08/14] font size

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 86ad8a7..631f7ef 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -3,7 +3,7 @@
     <h2 style="padding-top: 3px;">W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
-    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px;">
+    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 13px;">
       <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
         <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
           <mat-option *ngFor="let preset of group.presets" [value]="preset">

From bc91beded92a217dbbcdeac86c7e0581e20246ef Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:50:37 +0200
Subject: [PATCH 09/14] font size

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 631f7ef..814e757 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -3,7 +3,7 @@
     <h2 style="padding-top: 3px;">W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
-    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 13px;">
+    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
       <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
         <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
           <mat-option *ngFor="let preset of group.presets" [value]="preset">

From ad506e7e4f9cdf21e8ccdeaee1f3aa862951cf63 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:51:56 +0200
Subject: [PATCH 10/14] font size

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

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 814e757..876867c 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,6 +1,6 @@
 <div class="head" style="">
   <div style="display: flex; align-items: center; gap: 15px; height: 100%;">
-    <h2 style="padding-top: 3px;">W&I Kalender</h2>
+    <h2>W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
     <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
@@ -42,7 +42,7 @@
 
 
   <!-- User -->
-  <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
+  <div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
     <h3 *ngIf="userId"
       style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
       <mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}

From b1edd89f56ac22964b71382bacd542bfabf2fd1e Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 13:55:37 +0200
Subject: [PATCH 11/14] changes

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

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 433dea3..9518da0 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -18,9 +18,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   height: 60px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   background-color: white;
 }
 

From b45387b403beff128fe1c34d643e2b0d5cff8ac1 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 14:04:49 +0200
Subject: [PATCH 12/14] trans

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

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 9518da0..e53aa5f 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -118,14 +118,15 @@
 
 .restartButton:hover {
   color: #000000;
-  background-color: rgb(243, 243, 243);
+  background-color: rgb(240, 240, 240);
 }
 
 
 .transitionButton {
-  background-color: #00a79d;
   color: white;
   font-weight: 100;
+
+  
 }
 
 
@@ -404,8 +405,9 @@
 } */
 
 .mat-button-toggle-checked {
-  background-color: #ef6c00;
+  background: linear-gradient(45deg, #ff9800, #ef6c00); /* Gradient background */
   color: white;
+  position: relative; /* Needed for the shadow effect */
 }
 
 .dot-badge {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 876867c..39321df 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -30,8 +30,9 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <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-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">
         {{lang}}
@@ -67,8 +68,9 @@
       {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
     </button>
 
-    <button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
-      aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+    <button *ngIf="transitionButton" class="filterButton"
+      style="background: linear-gradient(45deg,#12cec2, #00a79d); border:none; color: white; text-shadow: 1px 1px 3px #00a79d;" aria-label="Filtern"
+      (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
 
     <button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
       (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>

From 0755f668ff8cb87570d3f2e072728bf9534ecc22 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 14:11:52 +0200
Subject: [PATCH 13/14] fixed animation

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

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index e53aa5f..21aee72 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -30,7 +30,7 @@
   /* Hides anything that overflows the boundary of this element */
 }
 
-.head h2 {
+.head .left {
   user-select: none;
   display: inline-block;
   /* Ensures that the element can be transformed */
@@ -122,13 +122,15 @@
 }
 
 
-.transitionButton {
+/* .transitionButton {
   color: white;
   font-weight: 100;
-
-  
 }
 
+.transitionButton:hover {
+  background-color: #0e857d;
+}
+ */
 
 
 
@@ -269,7 +271,6 @@
   animation: slideUp 1.5s forwards;
 }
 
-
 .filterContainer.sticky {
   border-radius: 0;
 }
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 39321df..47ed444 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,5 +1,5 @@
 <div class="head" style="">
-  <div style="display: flex; align-items: center; gap: 15px; height: 100%;">
+  <div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;">
     <h2>W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
@@ -30,9 +30,8 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <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-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">
         {{lang}}
@@ -68,9 +67,8 @@
       {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
     </button>
 
-    <button *ngIf="transitionButton" class="filterButton"
-      style="background: linear-gradient(45deg,#12cec2, #00a79d); border:none; color: white; text-shadow: 1px 1px 3px #00a79d;" aria-label="Filtern"
-      (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+    <button *ngIf="transitionButton" class="filterButton transitionButton" style="background-color: #00a79d; color: white;"
+      aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
 
     <button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
       (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>

From 5880db88e2a72e7f8b1e3bb91bd9ddebf7c699f7 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Wed, 15 May 2024 14:13:43 +0200
Subject: [PATCH 14/14] c

---
 frontend/src/app/ntt-gantt/ntt-gantt.component.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 21aee72..95418f7 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -406,7 +406,7 @@
 } */
 
 .mat-button-toggle-checked {
-  background: linear-gradient(45deg, #ff9800, #ef6c00); /* Gradient background */
+  background-color:#ef6c00; /* Gradient background */
   color: white;
   position: relative; /* Needed for the shadow effect */
 }