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>
ohcnetwork · Dec 5, 2024 · 40c9788 · 40c9788
1 parent 3b04654
commit 40c9788
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: