visual changes

frontend/src/app/admin/admin.component.html

@@ -1,35 +1,26 @@
-<div class="flex flex-col items-center justify-center py-2">
-  <h2 class="text-3xl text-center uppercase font-bold">Manage accounts</h2>
-  <div class="container">
-    <div class="grid grid-cols-2 gap-10 mt-5">
-      <div>
-        <h4 class="font-semibold text-xl uppercase mb-5">Student accounts</h4>
-        <ul>
-          <li *ngFor="let student of studentList">
-            <div class="row flex flex-row items-center justify-between my-2">
-              <div class="flex flex-row items-center justify-center">
-                <span class="w-auto p-3 bg-gray-300 text-gray-900 text-3xl text-bold flex items-center justify-center mr-5 rounded-lg">ID: {{student.id}}</span>
-                <p class="text-xl font-semibold">{{student.firstname}} {{student.lastname}}</p>
-              </div>
-              <button class="w-[200px] ml-5 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-gray-900 hover:bg-gray-950 focus:ring-primary-800" (click)="deleteStudent(student)">Delete</button>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <h4 class="font-semibold text-xl uppercase mb-5">Teacher accounts</h4>
-        <ul>
-          <li *ngFor="let teacher of teacherList">
-            <div class="row flex flex-row items-center justify-between my-2">
-              <div class="flex flex-row items-center justify-center">
-                <span class="w-auto p-3 bg-gray-300 text-gray-900 text-3xl text-bold flex items-center justify-center mr-5 rounded-lg">ID: {{teacher.id}}</span>
-                <p class="text-xl font-semibold">{{teacher.firstname}} {{teacher.lastname}}</p>
-              </div>
-              <button class="w-[200px] ml-5 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-gray-900 hover:bg-gray-950 focus:ring-primary-800" (click)="deleteTeacher(teacher)">Delete</button>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
+<div class="container">
+  <div class="card">
+    <h4 class="card-header">Student accounts</h4>
+    <ul class="card-content">
+      <li *ngFor="let student of studentList" class="card-item">
+        <div class="card-item-details">
+          <span class="card-item-id">ID: {{student.id}}</span>
+          <p class="card-item-name">{{student.firstname}} {{student.lastname}}</p>
+        </div>
+        <button class="card-item-button" (click)="deleteStudent(student)">Delete</button>
+      </li>
+    </ul>
+  </div>
+  <div class="card">
+    <h4 class="card-header">Teacher accounts</h4>
+    <ul class="card-content">
+      <li *ngFor="let teacher of teacherList" class="card-item">
+        <div class="card-item-details">
+          <span class="card-item-id">ID: {{teacher.id}}</span>
+          <p class="card-item-name">{{teacher.firstname}} {{teacher.lastname}}</p>
+        </div>
+        <button class="card-item-button" (click)="deleteTeacher(teacher)">Delete</button>
+      </li>
+    </ul>
   </div>
 </div>

frontend/src/app/grade/grade.service.ts

@@ -39,6 +39,12 @@ export class GradeService {
     );
   }
 
+  deleteGrade(id: number): Observable<void> {const url = `${this.gradesUrl}/${id}`;
+    return this.http.delete<void>(url, httpOptions).pipe(
+      catchError(this.handleError<void>('deleteGrade', 'Error while deleting the grade!'))
+    );
+  }
+
   private handleError<T>(operation = 'operation', communicate: string, result?: T) {
     return (error: any): Observable<T> => {
       this.log(`${operation} failed: ${error.message}`);

frontend/src/app/grademanager/grademanager.component.html

@@ -50,17 +50,7 @@
             <div class="grades-container">
               <ng-container *ngFor="let grade of gradeList">
                 <div *ngIf="grade.student.id === student.id" (dblclick)="editGrade(grade)">
-                  <ng-container *ngIf="selectedGrade !== grade; else editMode">
-                    <span class="grade">{{ grade.grade }}</span>
-                  </ng-container>
-                  <ng-template #editMode>
-                    <select [(ngModel)]="selectedGradeValue" (blur)="cancelEdit()" (keydown.enter)="saveEdit()" class="grade-edit">
-                      <option [value]="2">2</option>
-                      <option [value]="3">3</option>
-                      <option [value]="4">4</option>
-                      <option [value]="5">5</option>
-                    </select>
-                  </ng-template>
+
                 </div>
               </ng-container>
             </div>
@@ -71,3 +61,14 @@
     </table>
   </div>
 </div>
+
+
+
+
+
+
+
+
+
+
+