浏览代码

feat: add hover effect for check icon and center align actions header in tareas table

EmilianoChavarria 2 周之前
父节点
当前提交
2e06231d93

+ 4 - 0
Front/src/app/modules/Alumno/pages/tareas/tareas.component.css

@@ -162,6 +162,10 @@
     vertical-align: middle;
 }
 
+.check-icon:hover {
+    color: #2a6c42;
+}
+
 .green {
     background-color: #2a6c42;
     border: none;

+ 6 - 2
Front/src/app/modules/Alumno/pages/tareas/tareas.component.html

@@ -121,13 +121,17 @@
                 </ng-container>
 
                 <ng-container matColumnDef="acciones">
-                    <th mat-header-cell *matHeaderCellDef> Acciones</th>
+                    <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Acciones</th>
                     <td mat-cell *matCellDef="let tarea">
                         <div class="flex-row items-center">
-                            <button mat-menu-item (click)="openDialog(tarea)">
+                            <button mat-menu-item (click)="openDialog(tarea)" style="width: fit-content;">
                                 <mat-icon>preview</mat-icon>
                                 <span>Visualizar</span>
                             </button>
+                            <button class="check-icon" mat-menu-item style="width: fit-content;">
+                                <mat-icon class="check-icon">check</mat-icon>
+                                <span>Completar tarea</span>
+                            </button>
                         </div>
                     </td>
                 </ng-container>