adjust class

src/client/js/components/PageAccessoriesModal.jsx

@@ -72,6 +72,10 @@ const PageAccessoriesModal = (props) => {
     setIsWindowExpanded(true);
   };
 
+  const contractWindow = () => {
+    setIsWindowExpanded(false);
+  };
+
   const buttons = (
     <span>
       {/* change order because of `float: right` by '.close' class */}
@@ -80,13 +84,15 @@ const PageAccessoriesModal = (props) => {
       </button>
       <ExpandOrContractButton
         isWindowExpanded={isWindowExpanded}
+        expandWindow={expandWindow}
+        contractWindow={contractWindow}
       />
     </span>
   );
 
   return (
     <React.Fragment>
-      <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
+      <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className={`grw-page-accessories-modal ${isWindowExpanded && 'grw-modal-expanded'} `}>
         <ModalHeader className="p-0" toggle={closeModalHandler} close={buttons}>
           <CustomNav activeTab={activeTab} navTabMapping={navTabMapping} onNavSelected={switchActiveTab} />
         </ModalHeader>

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -407,12 +407,6 @@ export default class HandsontableModal extends React.PureComponent {
   }
 
   render() {
-    const dialogClassNames = ['handsontable-modal'];
-    if (this.state.isWindowExpanded) {
-      dialogClassNames.push('handsontable-modal-expanded');
-    }
-
-    const dialogClassName = dialogClassNames.join(' ');
 
     const buttons = (
       <span>
@@ -427,7 +421,7 @@ export default class HandsontableModal extends React.PureComponent {
     );
 
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="lg" className={dialogClassName}>
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="lg" className={`handsontable-modal ${this.state.isWindowExpanded && 'grw-modal-expanded'}`}>
         <ModalHeader tag="h4" toggle={this.cancel} close={buttons} className="bg-primary text-light">
           Edit Table
         </ModalHeader>

src/client/styles/scss/_handsontable.scss

@@ -8,10 +8,7 @@
   }
 }
 
-// expanded window layout
-.handsontable-modal.handsontable-modal-expanded {
-  @include expand-modal-fullscreen(true, true);
-
+.modal-dialog.grw-modal-expanded {
   // expand .hot-table-container (with flexbox)
   .hot-table-container {
     flex: 1;

src/client/styles/scss/_modal.scss

@@ -0,0 +1,4 @@
+// expanded window layout
+.modal-dialog.grw-modal-expanded {
+  @include expand-modal-fullscreen(true, true);
+}

src/client/styles/scss/style-app.scss

@@ -40,6 +40,7 @@
 @import 'login';
 @import 'me';
 @import 'mirror_mode';
+@import 'modal';
 @import 'navbar';
 @import 'on-edit';
 @import 'page_list';