fix: update modal to modaldialog

eduNEXT · Dec 1, 2023 · 2b7e5b4 · 2b7e5b4
1 parent d9cce51
commit 2b7e5b4
Showing 1 changed file with 34 additions and 26 deletions.
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
@@ -1,21 +1,23 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal } from '@edx/paragon';
+import { Button, ModalDialog, ActionRow } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
 import { copyToEditor } from '../bulk-email-form/data/actions';
 
-function ViewEmailModal({
+const ViewEmailModal = ({
   intl, messageContent, isOpen, setModalOpen,
-}) {
+}) => {
   const [, dispatch] = useContext(BulkEmailContext);
   return (
     <div>
-      <Modal
-        open={isOpen}
-        title=""
-        body={(
+      <ModalDialog
+        isOpen={isOpen}
+        onClose={() => setModalOpen(false)}
+        hasCloseButton
+      >
+        <ModalDialog.Body>
           <div>
             <div className="d-flex flex-row">
               <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -40,27 +42,33 @@ function ViewEmailModal({
               <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
             </div>
           </div>
-        )}
-        onClose={() => setModalOpen(false)}
-        buttons={[
-          <Button
-            onClick={() => {
-              dispatch(
-                copyToEditor({
-                  emailBody: messageContent.email.html_message,
-                  emailSubject: messageContent.subject,
-                }),
-              );
-              setModalOpen(false);
-            }}
-          >
-            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
-          </Button>,
-        ]}
-      />
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              <FormattedMessage id="bulk.email.tool.close.modalDialog.button" defaultMessage="Close" />
+            </ModalDialog.CloseButton>
+            <Button
+              onClick={() => {
+                dispatch(
+                  copyToEditor({
+                    emailBody: messageContent.email.html_message,
+                    emailSubject: messageContent.subject,
+                  }),
+                );
+                setModalOpen(false);
+              }}
+              variant="primary"
+            >
+              <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     </div>
   );
-}
+};
 
 ViewEmailModal.propTypes = {
   intl: intlShape.isRequired,