set hover classes

ohcnetwork · Jan 10, 2025 · 3bd6a03 · 3bd6a03
1 parent 86eba9b
commit 3bd6a03
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx
@@ -38,13 +38,20 @@ export const Appointments = (props: PatientProps) => {
 
   const getStatusBadge = (status: string) => {
     const statusColors: Record<string, string> = {
-      booked: "bg-yellow-100 text-yellow-800",
-      checked_in: "bg-green-100 text-green-800",
-      cancelled: "bg-red-100 text-red-800",
+      booked:
+        "bg-yellow-100 text-yellow-800 hover:bg-yellow-200 hover:text-yellow-900",
+      checked_in:
+        "bg-green-100 text-green-800 hover:bg-green-200 hover:text-green-900",
+      cancelled: "bg-red-100 text-red-800 hover:bg-red-200 hover:text-red-900",
     };
 
     return (
-      <Badge className={statusColors[status] || "bg-gray-100 text-gray-800"}>
+      <Badge
+        className={
+          statusColors[status] ||
+          "bg-gray-100 text-gray-800 hover:bg-gray-200 hover:text-gray-900"
+        }
+      >
         {status.replace("_", " ").toUpperCase()}
       </Badge>
     );