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/qualification/edit/edit.component.html

@@ -1,24 +1,43 @@
-<h2 mat-dialog-title>Edit Qualification</h2>
-<mat-dialog-content>
-  <form [formGroup]="qualificationForm" (ngSubmit)="edit()">
-    <div class="!space-y-4">
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Edit Qualification</h2>
+
+<mat-dialog-content class="!px-3 md:!px-6">
+  <form [formGroup]="qualificationForm" (ngSubmit)="edit()" class="w-full min-w-[280px] md:min-w-[400px]">
+    <div class="space-y-4 md:space-y-6">
       @if (apiErrorMessage) {
-        <mat-error>{{ apiErrorMessage }}</mat-error>
+        <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+          <div class="flex items-start space-x-2 md:space-x-3">
+            <mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon>
+            <mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error>
+          </div>
+        </div>
       }
 
-      <mat-form-field class="!w-full">
-        <mat-label>Skill</mat-label>
-        <input matInput
-               formControlName="skill"
-               required>
-        <mat-error *ngIf="isFieldInvalid('skill')">
-          {{ getErrorMessage('skill') }}
-        </mat-error>
-      </mat-form-field>
+      <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-3">
+        <mat-form-field class="w-full">
+          <mat-label>Skill</mat-label>
+          <input matInput
+            formControlName="skill" 
+            placeholder="Enter skill name"
+            required>
+          <mat-hint class="text-sm">Enter the skill name</mat-hint>
+          <mat-error *ngIf="isFieldInvalid('skill')" class="text-sm">
+            {{ getErrorMessage('skill') }}
+          </mat-error>
+        </mat-form-field>
+      </div>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Edit</button>
+      <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
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Save Changes
+        </button>
       </mat-dialog-actions>
     </div>
   </form>