Merge branch 'main' into feat/O3-4211

openmrs · Feb 18, 2025 · 44ae2d4 · 44ae2d4
2 parents 7f453ee + a707024
commit 44ae2d4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/packages/esm-appointments-app/src/appointments/common-components/end-appointment.modal.scss b/packages/esm-appointments-app/src/appointments/common-components/end-appointment.modal.scss
@@ -0,0 +1,30 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
diff --git a/packages/esm-appointments-app/src/appointments/common-components/end-appointment.modal.tsx b/packages/esm-appointments-app/src/appointments/common-components/end-appointment.modal.tsx
@@ -4,6 +4,7 @@ import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
 import { useMutateAppointments } from '../../form/appointments-form.resource';
+import styles from './end-appointment.modal.scss';
 
 interface EndAppointmentModalProps {
   patientUuid: string;
@@ -71,8 +72,9 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
   }, [activeVisit, appointmentUuid, closeModal, mutate, mutateAppointments, t]);
 
   return (
-    <div>
+    <>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('endAppointmentConfirmation', 'Are you sure you want to check the patient out for this appointment?')}
       />
@@ -94,7 +96,7 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
           {t('checkOut', 'Check out')}
         </Button>
       </ModalFooter>
-    </div>
+    </>
   );
 };