From 0fa86ff41634842f1ca23754077702a8e85e141a Mon Sep 17 00:00:00 2001
From: Said Gedik <said.gedik@nttdata.com>
Date: Tue, 14 May 2024 17:43:32 +0200
Subject: [PATCH] hover date range

---
 .../src/app/ntt-gantt/ntt-gantt.component.css |  3 +++
 .../app/ntt-gantt/ntt-gantt.component.html    | 24 +++++++++----------
 2 files changed, 15 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 055dd42..f31c10c 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -254,6 +254,9 @@
   margin: 0 0.5%;
 }
 
+.dateRangePicker input:hover {
+  color: rgb(0, 0, 0);
+}
 
 .dateButton {
   height: 70%;
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 90e73b4..82cce5d 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -101,10 +101,19 @@
   <!-- <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">
+      <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
+        [value]="scalar">
+        {{scalar}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
     <!-- Date Range Picker  -->
-    <div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
-      <div style="height: 70%; display: flex; align-items: center; width: 180px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
-        background-color: white; padding-left: 10px; border-radius: 5px 0px 0px 5px;">
+    <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> -->
         <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
           <input matStartDate formControlName="start" (dateChange)="startDateChanged($event)">
@@ -119,15 +128,6 @@
       <button class="dateButton" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
     </div>
 
-    <!-- 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">
-      <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
-        [value]="scalar">
-        {{scalar}}
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-
     <div class="detailsButton">
       {{languageService.lMap.get('detailButton')}}
       <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"