From 40c9788e0efa8f0a97b1cd42bf344031f1b9d313 Mon Sep 17 00:00:00 2001
From: Meghani Kishan <145173622+kihan2518B@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:00:38 +0530
Subject: [PATCH] Add 'Update Details' Button in Community Nurse Log Update
 Details Page (#9094)

* Add update button in log details page

* using translation for button text

* fixed layout of button.

* Using shadcn button in update-log-details.

* Changed button color.

* Added primary button variant.

* Corrected implementation of link as child of button.

* fix outline variant button having no text color applied

* improve buttons

* remove unrelated changes

* use similar button in brief log update details page too

* fix cypress

---------

Co-authored-by: rithviknishad <mail@rithviknishad.dev>
---
 .../pageobject/Patient/PatientLogupdate.ts    |  2 +-
 .../LogUpdate/CriticalCarePreview.tsx         | 32 ++++++++++++++-----
 .../Patient/DailyRoundListDetails.tsx         | 19 +++++++----
 src/components/ui/button.tsx                  |  2 +-
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/cypress/pageobject/Patient/PatientLogupdate.ts b/cypress/pageobject/Patient/PatientLogupdate.ts
index 68287bfae41..45c1924e1a3 100644
--- a/cypress/pageobject/Patient/PatientLogupdate.ts
+++ b/cypress/pageobject/Patient/PatientLogupdate.ts
@@ -89,7 +89,7 @@ class PatientLogupdate {
   }
 
   clickUpdateDetail() {
-    cy.verifyAndClickElement("#consultation-preview", "Update Details");
+    cy.verifyAndClickElement("#consultation-preview", "Update Log");
     cy.wait(3000);
   }
 
diff --git a/src/components/LogUpdate/CriticalCarePreview.tsx b/src/components/LogUpdate/CriticalCarePreview.tsx
index e131e43f405..e9f4c697d82 100644
--- a/src/components/LogUpdate/CriticalCarePreview.tsx
+++ b/src/components/LogUpdate/CriticalCarePreview.tsx
@@ -1,10 +1,13 @@
+import { Link } from "raviger";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import Card from "@/CAREUI/display/Card";
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
 
 import { meanArterialPressure } from "@/components/Common/BloodPressureFormField";
-import ButtonV2 from "@/components/Common/ButtonV2";
 import Loading from "@/components/Common/Loading";
 import { ABGAnalysisFields } from "@/components/LogUpdate/Sections/ABGAnalysis";
 import { IOBalanceSections } from "@/components/LogUpdate/Sections/IOBalance";
@@ -49,14 +52,27 @@ export default function CriticalCarePreview(props: Props) {
 
   return (
     <div className="w-full transition-all duration-200 ease-in-out md:mx-auto md:max-w-5xl md:pt-8">
-      <div className="py-4">
-        <ButtonV2
-          id="back-to-consultation"
-          variant="secondary"
-          href={`/facility/${props.facilityId}/patient/${props.patientId}/consultation/${props.consultationId}`}
+      <div className="py-4 flex items-center justify-between max-md:flex-col max-md:items-start">
+        <Button id="back-to-consultation" variant="outline" asChild>
+          <Link
+            href={`/facility/${props.facilityId}/patient/${props.patientId}/consultation/${props.consultationId}`}
+          >
+            {t("back_to_consultation")}
+          </Link>
+        </Button>
+        <Button
+          asChild
+          id="update-log"
+          variant="outline_primary"
+          aria-label={t("update_log")}
         >
-          {t("back_to_consultation")}
-        </ButtonV2>
+          <Link
+            href={`/facility/${props.facilityId}/patient/${props.patientId}/consultation/${props.consultationId}/log_updates/${props.id}/update`}
+          >
+            <CareIcon icon="l-edit-alt" className="mr-2 text-lg" />
+            {t("update_log")}
+          </Link>
+        </Button>
       </div>
 
       <Card className="md:rounded-xl lg:p-8">
diff --git a/src/components/Patient/DailyRoundListDetails.tsx b/src/components/Patient/DailyRoundListDetails.tsx
index ec568ba56d2..2a2b76d26b2 100644
--- a/src/components/Patient/DailyRoundListDetails.tsx
+++ b/src/components/Patient/DailyRoundListDetails.tsx
@@ -1,7 +1,11 @@
+import { Link } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import { DailyRoundsModel } from "@/components/Patient/models";
@@ -50,11 +54,14 @@ export const DailyRoundListDetails = (props: any) => {
 
           <div>
             <div className="mt-2">
-              <ButtonV2
-                href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/log_updates/${id}/update`}
-              >
-                Update Details
-              </ButtonV2>
+              <Button asChild variant="outline_primary">
+                <Link
+                  href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/log_updates/${id}/update`}
+                >
+                  <CareIcon icon="l-edit-alt" className="mr-2 text-lg" />
+                  {t("update_log")}
+                </Link>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 4555a7a97af..0125726ce73 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
         outline:
-          "border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
+          "border border-gray-200 text-gray-900 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
         primary:
           "bg-primary-700 text-white shadow hover:bg-primary-700/90 dark:bg-primary-100 dark:text-primary-900 dark:hover:bg-primary-100/90",
         secondary: