WIP

src/client/js/components/Admin/Export/ExportPage.jsx

@@ -2,6 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import * as toastr from 'toastr';
+import {
+  Button,
+} from 'reactstrap';
 
 
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -203,9 +206,9 @@ class ExportPage extends React.Component {
       <Fragment>
         <h2>{t('Export Data')}</h2>
 
-        <button type="button" className="btn btn-default" disabled={isExporting} onClick={this.openExportModal}>
+        <Button type="button" className="btn btn-default" disabled={isExporting} onClick={this.openExportModal}>
           {t('export_management.create_new_exported_data')}
-        </button>
+        </Button>
 
         { showExportingData && (
           <div className="mt-5">

src/client/js/components/Admin/Export/ExportZipFormModal.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-// import Modal from 'react-bootstrap/es/Modal';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 import * as toastr from 'toastr';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -171,12 +173,12 @@ class ExportZipFormModal extends React.Component {
 
     return (
       <Modal show={this.props.isOpen} onHide={this.props.onClose}>
-        <Modal.Header closeButton>
-          <Modal.Title>{t('export_management.export_collections')}</Modal.Title>
-        </Modal.Header>
+        <ModalHeader closeButton>
+          {t('export_management.export_collections')}
+        </ModalHeader>
 
         <form onSubmit={this.export}>
-          <Modal.Body>
+          <ModalBody>
             <div className="row">
               <div className="col-sm-12">
                 <button type="button" className="btn btn-sm btn-default mr-2" onClick={this.checkAll}>
@@ -212,12 +214,12 @@ class ExportZipFormModal extends React.Component {
                 { this.renderOthers() }
               </div>
             </div>
-          </Modal.Body>
+          </ModalBody>
 
-          <Modal.Footer>
+          <ModalFooter>
             <button type="button" className="btn btn-sm btn-default" onClick={this.props.onClose}>{t('export_management.cancel')}</button>
             <button type="submit" className="btn btn-sm btn-primary" disabled={!this.validateForm()}>{t('export_management.export')}</button>
-          </Modal.Footer>
+          </ModalFooter>
         </form>
       </Modal>
     );