fix: added tooltips for Discussion Notes icons (#8618)

src/Components/Common/components/Page.tsx

@@ -38,7 +38,7 @@ export default function Page(props: PageProps) {
 
   return (
     <div className={classNames(padding, props.className)} ref={props.ref}>
-      <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center md:gap-6">
+      <div className="flex flex-col justify-between gap-2  md:flex-row md:items-center md:gap-6">
         <PageTitle
           changePageMetadata={props.changePageMetadata}
           title={props.title}

src/Components/Facility/PatientNoteCard.tsx

@@ -144,12 +144,19 @@ const PatientNoteCard = ({
                 </ButtonV2>
               )}
             <ButtonV2
+              className="tooltip"
               ghost
               onClick={() => {
                 setReplyTo && setReplyTo(note);
               }}
             >
-              <CareIcon icon="l-corner-up-left-alt" className="h-5 w-5" />
+              <CareIcon
+                icon="l-corner-up-left-alt"
+                className="tooltip h-5 w-5"
+              />
+              <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
+                {t("reply")}
+              </span>
             </ButtonV2>
           </div>
         </div>

src/Components/Facility/PatientNotesSlideover.tsx

@@ -137,36 +137,45 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     <div className="flex gap-1">
       {show && (
         <Link
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+          className="tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
           href={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`}
         >
           <CareIcon
             icon="l-window-maximize"
-            className="text-lg transition-all delay-150 duration-300 ease-out"
+            className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
           />
+          <span className="tooltip-text tooltip-bottom -translate-x-[7.3rem] text-xs">
+            {t(`open_in_full_window`)}
+          </span>
         </Link>
       )}
       <div
         id="expand_doctor_notes"
         className={classNames(
-          "flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
+          "tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100",
           show && "rotate-180",
         )}
         onClick={() => setShow(!show)}
       >
         <CareIcon
           icon="l-angle-up"
-          className="text-lg transition-all delay-150 duration-300 ease-out"
+          className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
         />
+        <span className="tooltip-text tooltip-top rotate-[-180deg] text-xs">
+          {t(`minimize_screen`)}
+        </span>
       </div>
       <div
-        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
+        className="tooltip flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-primary-800 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100"
         onClick={() => setShowPatientNotesPopup(false)}
       >
         <CareIcon
           icon="l-times"
-          className="text-lg transition-all delay-150 duration-300 ease-out"
+          className="tooltip text-lg transition-all delay-150 duration-300 ease-out"
         />
+        <span className="tooltip-text tooltip-bottom -translate-x-11 text-xs">
+          {t(`close_screen`)}
+        </span>
       </div>
     </div>
   );
@@ -248,13 +257,16 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
                 id="add_doctor_note_button"
                 onClick={onAddNote}
                 border={false}
-                className="absolute right-2"
+                className="tooltip absolute right-2"
                 ghost
                 size="small"
                 disabled={!patientActive}
                 authorizeFor={NonReadOnlyUsers}
               >
-                <CareIcon icon="l-message" className="text-lg" />
+                <CareIcon icon="l-message" className="tooltip text-lg" />
+                <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
+                  {t("send_message")}
+                </span>
               </ButtonV2>
             </div>
           </DoctorNoteReplyPreviewCard>

src/Locale/en/Asset.json

@@ -16,5 +16,6 @@
   "stream_stop_due_to_inativity": "The live feed will stop streaming due to inactivity",
   "stream_stopped_due_to_inativity": "The live feed has stopped streaming due to inactivity",
   "continue_watching": "Continue watching",
-  "resume": "Resume"
+  "resume": "Resume",
+  "reply":"Reply"
 }

src/Locale/en/Consultation.json

@@ -75,5 +75,9 @@
   "consultation_notes": "General Instructions (Advice)",
   "procedure_suggestions": "Procedure Suggestions",
   "patient_notes_thread__Doctors": "Doctor's Discussions",
-  "patient_notes_thread__Nurses": "Nurse's Discussions"
+  "patient_notes_thread__Nurses": "Nurse's Discussions",
+  "open_in_full_window": "Open in full window",
+  "minimize_screen":"Minimize",
+  "close_screen":"Close",
+  "send_message":"Send"
 }