layout changes

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

@@ -10,6 +10,7 @@
   border-right: 1px rgba(0, 0, 0, 0.181) solid;
   margin-left: 15px;
 }
+
 .head {
   color: rgba(41, 46, 50, 0.8);
   padding-left: 10px;
@@ -18,13 +19,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   height: 60px;
   margin-bottom: 5px;
   background-color: white;
 }
 
-
 .head {
   overflow: hidden;
   /* Hides anything that overflows the boundary of this element */
@@ -107,15 +106,17 @@
 }
 
 .restartButton {
-  width: 60px;
   background-color: white;
   border: none;
   border: solid 1px rgba(94, 94, 94, 0.18);
-  color: #000000a7;
   border-radius: 3px;
   cursor: pointer;
 }
 
+.restartButton mat-icon {
+  opacity: 0.75;
+}
+
 .restartButton:hover {
   color: #000000;
   background-color: rgb(240, 240, 240);
@@ -188,7 +189,7 @@
 .restartButton mat-icon {
   transform: scale(0.9);
   margin-right: -2px;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
 }
 
 .detailsButton {
@@ -315,9 +316,10 @@
 }
 
 .dateButton mat-icon {
-  transform: scale(0.8);
+  transform: scale(0.7);
   opacity: 0.75;
-  margin-right: 0px;
+  margin-right: 1px;
+  margin-top: 1px;
 }
 
 .dateButton:hover>mat-icon {
@@ -329,58 +331,61 @@
 }
 
 .editButton{
-  height: 59px;
-  width: 59px;
-  background-color: rgba(0, 0, 0, 0.04);
-  border: none;
-  border-top-right-radius: 4px;
-  margin-right: 15px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70%;
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+  padding-left: 10px;
+  padding-right: 10px;
+  border: solid 1px rgba(0, 0, 0, 0.124);
+  border-radius: 8px;
+  font-weight: 500;
+  gap: 3px;
+  transition: background-color 0.3s ease; /* Add this line for smooth transition */
 }
 
 .editButton:hover {
-  height: 59px;
-  width: 59px;
   background-color: rgba(0, 0, 0, 0.04);
-  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 
-.editButton:checked {
-  height: 59px;
-  width: 59px;
-  background-color: rgba(0, 0, 0, 0.04);
-  border-top-right-radius: 4px;
-  background-color: red;
+
+.editButton mat-icon{
+  transform: scale(0.7);
+  opacity: 0.75;
+}
+.deleteButton mat-icon {
+  transform: scale(0.8);
+  opacity: 0.75;
+}
+.editButton:hover>mat-icon, .deleteButton:hover>mat-icon {
+  opacity: 1;
 }
 
 .deleteButton {
-  height: 59px;
-  width: 59px;
-  background-color: rgba(0, 0, 0, 0.04);
-  border-width: 1px;
-  border: none;
-  border-top-right-radius: 4px;
-  margin-right: 15px;
-  margin-left: -15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70%;
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+  padding-left: 10px;
+  padding-right: 10px;
+  border: solid 1px rgba(0, 0, 0, 0.124);
+  border-radius: 8px;
+  font-weight: 500;
+  gap: 3px;
+  transition: background-color 0.3s ease; /* Add this line for smooth transition */
 }
 
 .deleteButton:hover {
-  height: 59px;
-  width: 59px;
   background-color: rgba(0, 0, 0, 0.04);
-  border-width: 2px;
-  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 
-.deleteButton:checked {
-  height: 59px;
-  width: 59px;
-  background-color: rgba(0, 0, 0, 0.04);
-  border-width: 2px;
-  border-top-right-radius: 4px;
-  background-color: red;
-}
 
 /* .datePickerContainer{
   height: 20px;

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

@@ -1,5 +1,5 @@
 <div class="head" style="">
-  <div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;">
+  <div class="left" style="display: flex; align-items: center; gap: 8px; height: 100%;">
     <h2>W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->