Fix: Inconsistent Feature Badge Styling Across Pages (#10839)

ohcnetwork · Feb 27, 2025 · f1150a8 · f1150a8
1 parent 5ffc6b3
commit f1150a8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 42 deletions.
diff --git a/src/common/constants.tsx b/src/common/constants.tsx
@@ -123,37 +123,37 @@ export const FACILITY_FEATURE_TYPES: {
     id: 1,
     name: "CT Scan",
     icon: "l-compact-disc",
-    variant: "green",
+    variant: "blue",
   },
   {
     id: 2,
     name: "Maternity Care",
     icon: "l-baby-carriage",
-    variant: "blue",
+    variant: "pink",
   },
   {
     id: 3,
     name: "X-Ray",
     icon: "l-clipboard-alt",
-    variant: "amber",
+    variant: "blue",
   },
   {
     id: 4,
     name: "Neonatal Care",
     icon: "l-baby-carriage",
-    variant: "teal",
+    variant: "pink",
   },
   {
     id: 5,
     name: "Operation Theater",
     icon: "l-syringe",
-    variant: "red",
+    variant: "orange",
   },
   {
     id: 6,
     name: "Blood Bank",
     icon: "l-medical-drip",
-    variant: "orange",
+    variant: "purple",
   },
   {
     id: 7,
@@ -165,43 +165,43 @@ export const FACILITY_FEATURE_TYPES: {
     id: 8,
     name: "Inpatient Services",
     icon: "l-hospital",
-    variant: "red",
+    variant: "orange",
   },
   {
     id: 9,
     name: "Outpatient Services",
     icon: "l-hospital",
-    variant: "red",
+    variant: "indigo",
   },
   {
     id: 10,
-    name: "Intensive Care Units",
+    name: "Intensive Care Units (ICU)",
     icon: "l-hospital",
     variant: "red",
   },
   {
     id: 11,
     name: "Pharmacy",
     icon: "l-hospital",
-    variant: "red",
+    variant: "indigo",
   },
   {
     id: 12,
     name: "Rehabilitation Services",
     icon: "l-hospital",
-    variant: "red",
+    variant: "teal",
   },
   {
     id: 13,
     name: "Home Care Services",
     icon: "l-hospital",
-    variant: "red",
+    variant: "teal",
   },
   {
     id: 14,
     name: "Psychosocial Support",
     icon: "l-hospital",
-    variant: "red",
+    variant: "purple",
   },
   {
     id: 15,
@@ -213,7 +213,7 @@ export const FACILITY_FEATURE_TYPES: {
     id: 16,
     name: "Daycare Programs",
     icon: "l-hospital",
-    variant: "red",
+    variant: "yellow",
   },
 ];
 

diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx
@@ -8,7 +8,6 @@ import { toast } from "sonner";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Markdown } from "@/components/ui/markdown";
@@ -27,6 +26,7 @@ import query from "@/Utils/request/query";
 import uploadFile from "@/Utils/request/uploadFile";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { sleep } from "@/Utils/utils";
+import { FeatureBadge } from "@/pages/Facility/Utils";
 import EditFacilitySheet from "@/pages/Organization/components/EditFacilitySheet";
 import { FacilityData } from "@/types/facility/facility";
 import type {
@@ -362,33 +362,18 @@ export const FacilityHome = ({ facilityId }: Props) => {
               ) && (
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-lg font-medium">
+                    <CardTitle className="font-semibold text-lg">
                       {t("features")}
                     </CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div className="flex flex-wrap gap-2">
-                      {facilityData?.features?.map(
-                        (feature: number) =>
-                          FACILITY_FEATURE_TYPES.some(
-                            (f) => f.id === feature,
-                          ) && (
-                            <Badge
-                              key={feature}
-                              variant="secondary"
-                              className="flex items-center gap-2 rounded-md bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1"
-                            >
-                              {getFacilityFeatureIcon(feature)}
-                              <span>
-                                {
-                                  FACILITY_FEATURE_TYPES.find(
-                                    (f) => f.id === feature,
-                                  )?.name
-                                }
-                              </span>
-                            </Badge>
-                          ),
-                      )}
+                      {facilityData.features?.map((featureId) => (
+                        <FeatureBadge
+                          key={featureId}
+                          featureId={featureId as number}
+                        />
+                      ))}
                     </div>
                   </CardContent>
                 </Card>

diff --git a/src/pages/Facility/Utils.tsx b/src/pages/Facility/Utils.tsx
@@ -12,11 +12,14 @@ export const FeatureBadge = ({ featureId }: { featureId: number }) => {
     return <></>;
   }
   const variantStyles = {
-    green: "bg-green-100 text-green-800 hover:bg-green-100",
-    blue: "bg-blue-100 text-blue-800 hover:bg-blue-100",
-    amber: "bg-amber-100 text-amber-800 hover:bg-amber-100",
-    orange: "bg-orange-100 text-orange-800 hover:bg-orange-100",
-    teal: "bg-teal-100 text-teal-800 hover:bg-teal-100",
+    blue: "bg-blue-100 text-blue-800",
+    orange: "bg-orange-100 text-orange-800",
+    teal: "bg-teal-100 text-teal-800",
+    yellow: "bg-yellow-100 text-yellow-800",
+    pink: "bg-pink-100 text-pink-800",
+    red: "bg-red-100 text-red-800",
+    indigo: "bg-indigo-100 text-indigo-800",
+    purple: "bg-purple-100 text-purple-800",
   };
 
   return (