task/update-error-message-styling (#40)

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/40
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
2025-01-15 11:33:14 +00:00
committed by Hop In, I Have Puppies AND WiFi
parent 3980408403
commit c41eceb51d
7 changed files with 41 additions and 35 deletions

View File

@ -61,7 +61,7 @@
} @else {
<mat-card class="!text-center !py-8">
<mat-card-content>
<mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon>
<mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">school</mat-icon>
<p class="!text-gray-600">No qualifications found</p>
</mat-card-content>
</mat-card>
@ -86,17 +86,15 @@
</div>
</div>
} @error {
<mat-card class="!bg-red-50 !border !border-red-100">
<mat-card-content class="!p-4">
<div class="!flex !items-center !gap-4 !text-red-800">
<mat-icon class="!text-red-500">error_outline</mat-icon>
<div>
<h3 class="!font-medium !mb-1">Error loading qualifications</h3>
<p class="!text-sm !text-red-700">Please try refreshing the page.</p>
</div>
</div>
</mat-card-content>
</mat-card>
<div class="bg-red-50 p-3 md:p-4 rounded-lg border border-red-200">
<div class="flex items-start space-x-2 md:space-x-3">
<mat-icon class="text-red-600 text-xl md:text-2xl !w-8 !h-8">error</mat-icon>
<div>
<p class="text-gray-800 font-medium text-sm md:text-base">There was an error loading the qualifications.</p>
<p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
</div>
</div>
</div>
} @loading {
<div class="!flex !justify-center !items-center !py-12">
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>