From ed1696c21df7538458b375295521ffaa506ba850 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 15 Jan 2025 11:33:14 +0000
Subject: [PATCH] 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>
---
 src/app/employee/delete/delete.component.html |  2 +-
 src/app/employee/table/table.component.html   | 20 ++++++++---------
 .../create/create.component.html              |  9 +++++---
 .../delete/delete.component.html              | 12 ++++++----
 .../details/details.component.html            |  2 +-
 .../qualification/edit/edit.component.html    |  9 +++++---
 .../qualification/table/table.component.html  | 22 +++++++++----------
 7 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/app/employee/delete/delete.component.html b/src/app/employee/delete/delete.component.html
index 3a3287d..0c99100 100644
--- a/src/app/employee/delete/delete.component.html
+++ b/src/app/employee/delete/delete.component.html
@@ -4,7 +4,7 @@
   <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>
+        <mat-icon class="text-amber-600 text-xl md:text-2xl !w-8 !h-8">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}}?
diff --git a/src/app/employee/table/table.component.html b/src/app/employee/table/table.component.html
index a88e272..7305706 100644
--- a/src/app/employee/table/table.component.html
+++ b/src/app/employee/table/table.component.html
@@ -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">people_outline</mat-icon>
+              <mat-icon class="!w-8 !h-8 !text-gray-400 !mb-4">people</mat-icon>
               <p class="!text-gray-600">No employees 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 employees</h3>
-            <p class="!text-sm !text-red-700">Please try refreshing the page.</p>
-          </div>
+    <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 employees.</p>
+          <p class="text-gray-600 mt-1 text-xs md:text-sm">Please try refreshing the page.</p>
         </div>
-      </mat-card-content>
-    </mat-card>
+      </div>
+    </div>
   } @loading {
     <div class="!flex !justify-center !items-center !py-12">
       <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
diff --git a/src/app/qualification/create/create.component.html b/src/app/qualification/create/create.component.html
index e1a4511..7eaba29 100644
--- a/src/app/qualification/create/create.component.html
+++ b/src/app/qualification/create/create.component.html
@@ -4,10 +4,13 @@
   <form [formGroup]="qualificationForm" (ngSubmit)="create()" class="w-full min-w-[280px] md:min-w-[400px]">
     <div class="space-y-4 md:space-y-6">
       @if (apiErrorMessage) {
-        <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+        <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">error_outline</mat-icon>
-            <mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error>
+            <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 creating the qualification.</p>
+              <p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiErrorMessage }}</p>
+            </div>
           </div>
         </div>
       }
diff --git a/src/app/qualification/delete/delete.component.html b/src/app/qualification/delete/delete.component.html
index b768f05..16e8f63 100644
--- a/src/app/qualification/delete/delete.component.html
+++ b/src/app/qualification/delete/delete.component.html
@@ -3,23 +3,27 @@
 <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">
     @if (apiError) {
-      <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+      <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">error_outline</mat-icon>
-          <mat-error class="text-sm md:text-base text-red-700">{{ apiError }}</mat-error>
+          <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 deleting the qualification.</p>
+            <p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiError }}</p>
+          </div>
         </div>
       </div>
     }
     
     <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>
+        <mat-icon class="text-amber-600 text-xl md:text-2xl !w-8 !h-8">warning</mat-icon>
         <div>
           <p class="text-gray-800 font-medium text-sm md:text-base">Are you sure you want to delete this qualification?</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 
diff --git a/src/app/qualification/details/details.component.html b/src/app/qualification/details/details.component.html
index 43966bf..d44a958 100644
--- a/src/app/qualification/details/details.component.html
+++ b/src/app/qualification/details/details.component.html
@@ -7,7 +7,7 @@
     @if (employees$ | async; as employees) {
       @if (employees.length === 0) {
         <div class="bg-gray-50 p-3 md:p-4 rounded-lg text-center">
-          <mat-icon class="text-gray-400 text-xl md:text-2xl mb-2">person_off</mat-icon>
+          <mat-icon class="text-gray-400 text-xl md:text-2xl mb-2 !w-8 !h-8">person_off</mat-icon>
           <p class="text-gray-600 text-sm md:text-base">No employees found with this qualification.</p>
         </div>
       } @else {
diff --git a/src/app/qualification/edit/edit.component.html b/src/app/qualification/edit/edit.component.html
index ad63f13..7786908 100644
--- a/src/app/qualification/edit/edit.component.html
+++ b/src/app/qualification/edit/edit.component.html
@@ -4,10 +4,13 @@
   <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) {
-        <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+        <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">error_outline</mat-icon>
-            <mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error>
+            <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 editing the qualification.</p>
+              <p class="text-gray-600 mt-1 text-xs md:text-sm">{{ apiErrorMessage }}</p>
+            </div>
           </div>
         </div>
       }
diff --git a/src/app/qualification/table/table.component.html b/src/app/qualification/table/table.component.html
index fac7b1a..ce358e1 100644
--- a/src/app/qualification/table/table.component.html
+++ b/src/app/qualification/table/table.component.html
@@ -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>