clear filter hover

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -196,8 +196,7 @@
   align-items: center;
   justify-content: center;
   height: 70%;
-
-  background-color: rgb(255, 255, 255);
+  background-color: rgba(255, 255, 255, 0.175);
   cursor: pointer;
   padding-left: 15px;
   padding-right: 15px;
@@ -205,12 +204,15 @@
   border-radius: 8px;
   font-weight: 500;
   gap: 3px;
+  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+
 }
 
 .clearFilter:hover {
-  background-color: #ff370016;
+  background-color: rgba(255, 255, 255, 0.729);
 }
 
+
 .filterButton:hover {
   background-color: rgb(240, 240, 240);
 }
@@ -220,7 +222,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #f5f5f5;
+  background-color: rgba(245, 245, 245, 0.528); /* Semi-transparent background */
   border: solid rgba(0, 0, 0, 0.1) 1px;
   border-bottom: none;
   border-radius: 10px 10px 0px 0px;
@@ -233,8 +235,10 @@
   top: 0;
   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 */
 }
 
+
 .filterContainer.sticky {
   border-radius: 0;
 }

frontend/src/app/ntt-gantt/ntt-gantt.component.html

@@ -64,8 +64,7 @@
       {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
     </button>
 
-    <button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
-      style="background-color: transparent;" (click)="clearFilter()">
+    <button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
       {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
     </button>