From a8ed452af36a0ea822ceacdde475d68879ab17bd Mon Sep 17 00:00:00 2001
From: Nethmi Rodrigo <neth23rodrigo@gmail.com>
Date: Wed, 18 Dec 2024 12:28:13 +0530
Subject: [PATCH] (fix) Modal header close button style

---
 .../src/widgets/cancel-patient-edit.modal.tsx |  2 ++
 .../src/widgets/cancel-patient-edit.scss      | 29 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss

diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx
index 26ffd7b59..beac9f74b 100644
--- a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx
+++ b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import styles from './cancel-patient-edit.scss';
 
 interface CancelPatientEditPropsModal {
   close(): void;
@@ -14,6 +15,7 @@ const CancelPatientEditModal: React.FC<CancelPatientEditPropsModal> = ({ close,
       <ModalHeader
         closeModal={close}
         title={t('confirmDiscardChangesTitle', 'Are you sure you want to discard these changes?')}
+        className={styles.modalHeader}
       />
       <ModalBody>
         <p>{t('confirmDiscardChangesBody', 'Your unsaved changes will be lost if you proceed to discard the form')}.</p>
diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss
new file mode 100644
index 000000000..4e3cc34d3
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss
@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.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);
+    }
+  }
+}