From a796de0ec5e29e181d4af750e1fc97c5049fcfbd Mon Sep 17 00:00:00 2001
From: totregex <totoregex@gmail.com>
Date: Sat, 7 Dec 2024 10:10:32 +0530
Subject: [PATCH] switch to Button

---
 public/locale/en.json                    |  2 +-
 src/components/Facility/FacilityCard.tsx | 38 +++++++++++++-----------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index c3979b9c849..6fe9f9a7e95 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1421,7 +1421,7 @@
   "view_cns": "View CNS",
   "view_consultation_and_log_updates": "View Consultation / Log Updates",
   "view_details": "View Details",
-  "view_faciliy": "View Facility",
+  "view_facility": "View Facility",
   "view_files": "View Files",
   "view_patients": "View Patients",
   "view_update_patient_files": "View/Update patient files",
diff --git a/src/components/Facility/FacilityCard.tsx b/src/components/Facility/FacilityCard.tsx
index 292547ab0e3..6b6875d6f6f 100644
--- a/src/components/Facility/FacilityCard.tsx
+++ b/src/components/Facility/FacilityCard.tsx
@@ -1,7 +1,8 @@
 import careConfig from "@careConfig";
-import { Link } from "raviger";
+import { Link,navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
 
 import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -222,44 +223,47 @@ export const FacilityCard = (props: {
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {["DistrictAdmin", "StateAdmin"].includes(userType) && (
-                      <ButtonV2
+                      <Button
                         id="facility-notify"
-                        ghost
-                        border
+                        variant={"outline"}
                         className="h-[38px] tooltip"
                         onClick={(_) => setNotifyModalFor(facility.id)}
+                        aria-label={t("notify")}
+                        role="button"
                       >
                         <CareIcon icon="l-megaphone" className="text-lg" />
                         <span className="hidden md:block">{t("notify")}</span>
                         <span className="tooltip-text tooltip-top md:hidden">
                           {t("notify")}
                         </span>
-                      </ButtonV2>
+                      </Button>
                     )}
-                    <ButtonV2
-                      href={`/facility/${facility.id}`}
+                    <Button
+                      onClick={() => navigate(`/facility/${facility.id}`)}
                       id="facility-details"
-                      border
-                      ghost
+                      variant={"outline"}
                       className="tooltip h-[38px]"
+                      aria-label={t("view_facility")}
+                      role="button"
                     >
                       <CareIcon icon="l-hospital" className="text-lg" />
                       <span className="hidden sm:inline">
-                        {t("view_faciliy")}
+                        {t("view_facility")}
                       </span>
                       <span className="tooltip-text tooltip-top sm:hidden">
-                        {t("view_faciliy")}
+                        {t("view_facility")}
                       </span>
-                    </ButtonV2>
-                    <ButtonV2
-                      href={`/patients?facility=${facility.id}`}
+                    </Button>
+                    <Button
+                      onClick={() => navigate(`/patients?facility=${facility.id}`)}
                       id="facility-patients"
-                      border
-                      ghost
+                      variant={"outline"}
+                      aria-label={t("view_patients")}
+                      role="button"
                     >
                       <CareIcon icon="l-user-injured" className="text-lg" />
                       {t("view_patients")}
-                    </ButtonV2>
+                    </Button>
                     {/* </div> */}
                   </div>
                 </div>