From 5090d0efbc3be1be5309571ab1dd7da257cbbc59 Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Tue, 14 May 2024 12:20:57 +0200
Subject: [PATCH] custom toolbar

---
 .../src/app/ntt-gantt/ntt-gantt.component.css | 23 +++++++---
 .../app/ntt-gantt/ntt-gantt.component.html    | 43 +++++++++----------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index d491473..30f40f4 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -60,9 +60,6 @@
 }
 
 
-
-
-
 #topbar {
   display: flex;
   flex-direction: row;
@@ -83,7 +80,6 @@
   }
 }
 
-
 .restartButton {
   width: 60px;
   background-color: white;
@@ -99,6 +95,16 @@
   background-color: rgb(243, 243, 243);
 }
 
+
+.transitionButton {
+  background-color: #00a79d; 
+  color: white; 
+  font-weight: 100;
+}
+
+
+
+
 .example-radio-group {
   display: flex;
   flex-direction: column;
@@ -132,8 +138,13 @@
 .filterContainer {
   width: 100%;
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
+  background-color: #f5f5f5;
+  border: solid rgba(0, 0, 0, 0.1) 1px;  
+  border-bottom: none;
+  border-radius: 10px 10px 0px 0px;
+  height: 60px;
+  padding-left: 10px;
 }
 
 .clearFilter {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 215204a..27ad7df 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -14,11 +14,9 @@
       style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
         style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
   </div>
-
 </div>
+
 <div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
-
-
   <!-- Date Range Picker  -->
   <div style="display: flex; gap: 10px;">
     <div style="display: flex;">
@@ -80,35 +78,34 @@
     <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
       <mat-icon>restart_alt</mat-icon>
     </button>
-
   </div>
-
-
-
-
-
-
 </div>
 
 
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
-  <button *ngIf="transitionButton" mat-raised-button
-    style="margin-bottom: 2px; background-color: #00a79d; margin-left: 1px; margin-right: 1px;" class="filterButton"
-    aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
-  <button *ngIf="approveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
-    class="filterButton" aria-label="Filtern" (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
-  <button *ngIf="rejectButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
-    class="filterButton" aria-label="Filtern" (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
-  <button *ngIf="cancelButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
-    class="filterButton" aria-label="Filtern" (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
-  <button *ngIf="reApproveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
-    class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur Genehmigung</button>
-  <button *ngIf="implementerButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
-    class="filterButton" aria-label="Filtern"
+
+  <button *ngIf="transitionButton" mat-raised-button class="transitionButton" aria-label="Filtern"
+    (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+
+  <button *ngIf="approveButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
+
+  <button *ngIf="rejectButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
+
+  <button *ngIf="cancelButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
+
+  <button *ngIf="reApproveButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    (click)="reApprove()">Erneut zur Genehmigung</button>
+
+  <button *ngIf="implementerButton" mat-raised-button class="filterButton" aria-label="Filtern"
     (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
+
   <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
     {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
   </button>
+
   <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
 
   <button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>