modified a little

src/client/js/components/Page/PageManagement.jsx

@@ -108,15 +108,12 @@ const PageManagement = (props) => {
         <button className="dropdown-item" type="button" onClick={openPageDuplicateModalHandler}>
           <i className="icon-fw icon-docs"></i> { t('Duplicate') }
         </button>
-        <button className="dropdown-item toggle-presentation" type="button" href="?presentation=1">
+        <button className="dropdown-item" type="button" onClick={openPagePresentationModalHandler}>
           <i className="icon-film icon-fw"></i><span className="d-none d-sm-inline">{ t('Presentation Mode') }</span>
         </button>
         <button type="button" className="dropdown-item" onClick={() => { exportPageHandler('md') }}>
           <i className="icon-fw icon-cloud-download"></i>{t('export_bulk.export_page_markdown')}
         </button>
-        <button type="button" className="dropdown-item" onClick={openPagePresentationModalHandler}>
-          <i className="icon-fw icon-cloud-download"></i>presentation
-        </button>
         {/* TODO GW-2746 create api to bulk export pages */}
         {/* <button className="dropdown-item" type="button" onClick={openArchiveModalHandler}>
           <i className="icon-fw"></i>{t('Create Archive Page')}

src/client/js/components/PagePresentationModal.jsx

@@ -1,16 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
 
 const PagePresentationModal = (props) => {
   return (
-    <Modal isOpen={props.isOpen} toggle={props.onClose} className="fullscreen-layer1">
-      <ModalBody className="grw-presentation-page">
+    <Modal isOpen={props.isOpen} toggle={props.onClose} className="grw-presentation-page">
+      <ModalBody className="presentation-body">
         <iframe src={props.href} />
       </ModalBody>
     </Modal>
   );
 };
+PagePresentationModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  href: PropTypes.string.isRequired,
+};
+
 
 export default PagePresentationModal;

src/client/styles/scss/_page-presentation.scss

@@ -1,10 +1,9 @@
-.fullscreen-layer1 {
-  z-index: 9999;
-  // attached !importatnt for updating from .modal-dialog class style
+.grw-presentation-page {
+  // attached !important for updating from .modal-dialog class style
   width: 90vw !important;
   max-width: unset !important;
 
-  .grw-presentation-page {
+  .presentation-body {
     height: 90vh;
     background: black;