Update EmployeeList.css

src/components/EmployeeList.css

@@ -1,34 +1,34 @@
 .employeeList {
     margin: 20px;
     padding: 20px;
-    border: 1px solid #555; /* Más oscuro que antes */
+    border: 1px solid #555;
     border-radius: 8px;
-    background-color: #333; /* Fondo oscuro para la lista */
-    color: #ddd; /* Texto claro */
+    background-color: #333;
+    color: #ddd; 
 }
 
 .employeeItem {
     display: flex;
-    align-items: center; /* Asegura que los elementos estén alineados verticalmente */
-    gap: 10px; /* Espacio entre el checkbox y el nombre del empleado */
+    align-items: center;
+    gap: 10px; 
     padding: 10px;
-    border-bottom: 1px solid #666; /* Ajuste para modo oscuro */
+    border-bottom: 1px solid #666;
 }
 
 .employeeItem input[type="checkbox"] {
-    margin-right: 10px; /* Puedes ajustar este valor según necesites */
+    margin-right: 10px; 
 }
 
 .employeeDetails {
     flex-grow: 1;
 }
 
 .employeeItem:nth-child(odd) {
-    background-color: #2c2c2c; /* Tono oscuro para ítems impares */
+    background-color: #2c2c2c;
 }
 
 .employeeItem:nth-child(even) {
-    background-color: #252525; /* Tono aún más oscuro para ítems pares */
+    background-color: #252525;
 }
 
 .button {
@@ -42,50 +42,46 @@
 }
 
 .addButton {
-    background-color: #4CAF50; /* Verde */
+    background-color: #4CAF50;
     color: #fff;
 }
 
 .addButton:hover {
     background-color: #45a049;
 }
 
-/* Estilo para el botón de eliminar seleccionados */
 .deleteButton {
-    background-color: #f44336; /* Rojo */
+    background-color: #f44336; 
     color: #fff;
 }
 
 .deleteButton:hover {
     background-color: #da190b;
 }
 
-/* Estilo para el botón de cargar todos los empleados */
 .loadButton {
-    background-color: #008CBA; /* Azul */
+    background-color: #008CBA;
     color: #fff;
 }
 
 .loadButton:hover {
     background-color: #007ba7;
 }
 
-/* Estilo para botones deshabilitados */
 .button:disabled {
-    background-color: #555; /* Gris oscuro */
+    background-color: #555; 
     cursor: not-allowed;
 }
 
 .button.edit {
     background-color: #007bff;
-    justify-content: right; /* Azul que contrasta bien en modo oscuro */
+    justify-content: right; 
 }
 
 .button.delete {
-    background-color: #dc3545; /* Rojo para acciones de eliminar, buena visibilidad en oscuro */
+    background-color: #dc3545; 
 }
 
-/* Estilo adicional para mejorar la visibilidad de los checkboxes */
 input[type="checkbox"] {
-    accent-color: #007bff; /* Color del botón de checkbox para mejorar contraste */
+    accent-color: #007bff; 
 }