migrate Button

src/client/js/components/HeaderSearchBox.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
-import Button from 'react-bootstrap/es/Button';
 import DropdownButton from 'react-bootstrap/es/DropdownButton';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 import InputGroup from 'react-bootstrap/es/InputGroup';
 
+import {
+  Button,
+} from 'reactstrap';
+
 import SearchForm from './SearchForm';
 
 
@@ -82,7 +85,7 @@ class HeaderSearchBox extends React.Component {
             placeholder="Search ..."
           />
           <InputGroup.Button className="btn-group-submit-search">
-            <Button bsStyle="link" onClick={this.search}>
+            <Button color="link" onClick={this.search}>
               <i className="icon-magnifier"></i>
             </Button>
           </InputGroup.Button>

src/client/js/components/PageAttachment/DeleteAttachmentModal.jsx

@@ -2,7 +2,8 @@
 import React from 'react';
 
 import {
-  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+  Button,
+  Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
 import UserPicture from '../User/UserPicture';
@@ -83,8 +84,8 @@ export default class DeleteAttachmentModal extends React.Component {
             {deletingIndicator}
           </div>
           <Button
+            color="danger"
             onClick={this._onDeleteConfirm}
-            bsStyle="danger"
             disabled={this.props.deleting}
           >Delete!
           </Button>

src/client/js/components/PageComment/Comment.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 
 import { format, formatDistanceStrict } from 'date-fns';
 
-import Button from 'react-bootstrap/es/Button';
 import Tooltip from 'react-bootstrap/es/Tooltip';
 import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
 import Collapse from 'react-bootstrap/es/Collapse';
 
+import {
+  Button,
+} from 'reactstrap';
+
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 
@@ -202,7 +205,7 @@ class Comment extends React.Component {
     const toggleButtonLabel = isOlderRepliesShown ? '' : 'more';
     const toggleButton = (
       <Button
-        bsStyle="link"
+        color="link"
         className="page-comments-list-toggle-older"
         onClick={() => { this.setState({ isOlderRepliesShown: !isOlderRepliesShown }) }}
       >

src/client/js/components/PageComment/CommentEditor.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
 import Tab from 'react-bootstrap/es/Tab';
 import Tabs from 'react-bootstrap/es/Tabs';
+
+import {
+  Button,
+} from 'reactstrap';
+
 import * as toastr from 'toastr';
 
 import AppContainer from '../../services/AppContainer';
@@ -222,8 +226,9 @@ class CommentEditor extends React.Component {
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const submitButton = (
       <Button
-        bsStyle="primary"
-        className="fcbtn btn btn-primary btn-outline btn-rounded btn-1b"
+        outline
+        color="primary"
+        className="fcbtn btn-rounded btn-1b"
         onClick={this.postHandler}
       >
         Comment
@@ -296,7 +301,7 @@ class CommentEditor extends React.Component {
                   )
                 }
                 <div>
-                  <Button bsStyle="danger" className="fcbtn btn btn-xs btn-danger btn-outline btn-rounded" onClick={this.toggleEditor}>
+                  <Button outline color="danger" size="xs" className="fcbtn btn-rounded" onClick={this.toggleEditor}>
                     Cancel
                   </Button>
                 </div>

src/client/js/components/PageComments.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
+import {
+  Button,
+} from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
 
@@ -146,8 +148,10 @@ class PageComments extends React.Component {
         { !showEditor && isLoggedIn && (
           <div className="text-right">
             <Button
-              bsStyle="default"
-              className="btn btn-outline btn-default btn-sm btn-comment-reply"
+              outline
+              color="secondary"
+              size="sm"
+              className="btn-comment-reply"
               onClick={() => { return this.replyButtonClickedHandler(commentId) }}
             >
               <i className="icon-fw icon-action-redo"></i> Reply

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
 import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
 import Collapse from 'react-bootstrap/es/Collapse';
 
 import {
+  Button,
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
@@ -456,10 +456,10 @@ export default class HandsontableModal extends React.PureComponent {
         </ModalBody>
         <ModalFooter>
           <div className="d-flex justify-content-between">
-            <Button bsStyle="danger" onClick={this.reset}>Reset</Button>
+            <Button color="danger" onClick={this.reset}>Reset</Button>
             <div className="d-flex">
-              <Button bsStyle="default" onClick={this.cancel}>Cancel</Button>
-              <Button bsStyle="primary" onClick={this.save}>Done</Button>
+              <Button color="secondary" onClick={this.cancel}>Cancel</Button>
+              <Button color="primary" onClick={this.save}>Done</Button>
             </div>
           </div>
         </ModalFooter>

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import FormControl from 'react-bootstrap/es/FormControl';
-import Button from 'react-bootstrap/es/Button';
 import Collapse from 'react-bootstrap/es/Collapse';
+
+import {
+  Button,
+} from 'reactstrap';
+
 import MarkdownTable from '../../models/MarkdownTable';
 
 export default class MarkdownTableDataImportForm extends React.Component {
@@ -80,8 +85,8 @@ export default class MarkdownTableDataImportForm extends React.Component {
           </FormGroup>
         </Collapse>
         <div className="d-flex justify-content-end">
-          <Button bsStyle="default" onClick={this.props.onCancel}>Cancel</Button>
-          <Button bsStyle="primary" onClick={this.importButtonHandler}>Import</Button>
+          <Button color="secondary" onClick={this.props.onCancel}>Cancel</Button>
+          <Button color="primary" onClick={this.importButtonHandler}>Import</Button>
         </div>
       </form>
     );

src/client/js/components/SearchPage/DeletePageListModal.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
 import Checkbox from 'react-bootstrap/es/Checkbox';
 
 import {
+  Button,
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
@@ -45,7 +45,7 @@ export default class DeletePageListModal extends React.Component {
             <span className="d-flex align-items-center">
               <Checkbox className="text-danger" onClick={this.props.toggleDeleteCompletely} inline>Delete completely</Checkbox>
               <span className="m-l-10">
-                <Button onClick={this.props.confirmedToDelete}><i className="icon-trash"></i>Delete</Button>
+                <Button color="secondary" onClick={this.props.confirmedToDelete}><i className="icon-trash"></i>Delete</Button>
               </span>
             </span>
           </div>

src/client/js/components/SearchPage/SearchPageForm.jsx

@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
-import Button from 'react-bootstrap/es/Button';
 import InputGroup from 'react-bootstrap/es/InputGroup';
 
+import {
+  Button,
+} from 'reactstrap';
+
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -46,7 +49,7 @@ class SearchPageForm extends React.Component {
             onInputChange={this.onInputChange}
           />
           <InputGroup.Button className="">
-            <Button onClick={this.search}>
+            <Button color="secondary" onClick={this.search}>
               <i className="icon-magnifier"></i>
             </Button>
           </InputGroup.Button>