Enhance employee and qualification forms with hints and improved layouts (#37)

- Added hints to input fields in create and edit employee forms for better user guidance.
- Updated the layout of dialog actions in employee and qualification forms for improved usability.
- Enhanced delete confirmation dialogs for qualifications and employees with better styling and error handling.
- Improved the display of employee details and qualifications with better formatting and structure.

These changes aim to improve user experience and accessibility across the application.

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/37
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>

src/app/employee/delete/delete.component.html

@@ -1,6 +1,33 @@
-<h2 mat-dialog-title>Delete {{employee.firstName}} {{employee.lastName}}</h2>
-<mat-dialog-content>Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone.</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="false">Cancel</button>
-  <button mat-button mat-dialog-close (click)="deleteEmployee(employee.id ?? 0)" cdkFocusInitial>Delete</button>
-</mat-dialog-actions>
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Delete Employee</h2>
+
+<mat-dialog-content class="!px-3 md:!px-6">
+  <div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
+    <div class="bg-amber-50 p-3 md:p-4 rounded-lg border border-amber-200">
+      <div class="flex items-start space-x-2 md:space-x-3">
+        <mat-icon class="text-amber-600 text-xl md:text-2xl">warning</mat-icon>
+        <div>
+          <p class="text-gray-800 font-medium text-sm md:text-base">
+            Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}?
+          </p>
+          <p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p>
+        </div>
+      </div>
+    </div>
+
+    <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+      <button mat-button 
+              [mat-dialog-close]="false"
+              class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
+        Cancel
+      </button>
+      <button mat-flat-button 
+              color="warn"
+              (click)="deleteEmployee(employee.id ?? 0)"
+              mat-dialog-close
+              class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1"
+              cdkFocusInitial>
+        Delete
+      </button>
+    </mat-dialog-actions>
+  </div>
+</mat-dialog-content>