--- a/client/src/components/Navbar.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/Navbar.js	Thu Aug 16 22:32:36 2018 +0200
@@ -6,7 +6,8 @@
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
+import { NavDropdown, MenuItem } from 'react-bootstrap';
+import Modal from 'react-modal';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
@@ -27,7 +28,7 @@
 
   if (isAuthenticated) {
     return (
-          <NavDropdown title={ currentUser.get('username') }>
+          <NavDropdown className="navs" title={ currentUser.get('username') }>
               <li>
                 <a className="user-dropdown"  href="#settings" onClick={onClickSettings}>Paramètres</a>
               </li>
@@ -107,13 +108,23 @@
 }
 
 class AppNavbar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { modalIsOpen: false };
+  }
 
-  state = {
-    showModal: false
+  openModal = () => {
+    this.setState({modalIsOpen: true});
   }
 
   closeModal = () => {
-    this.setState({ showModal: false });
+    this.setState({modalIsOpen: false});
+  }
+
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
   }
 
   onClickHome = (e) => {
@@ -131,7 +142,7 @@
     if (isSynchronized) {
       this.logout();
     } else {
-      this.setState({ showModal: true })
+      this.openModal()
     }
   }
 
@@ -193,18 +204,25 @@
               <LoginNav {...this.props} onLogout={this.onClickLogout} />
             </ul>
           </div>
-          <Modal show={this.state.showModal} onHide={this.closeModal}>
-            <Modal.Body>
-              <p className="text-center">
-                Certaines données n'ont pas encore été sauvegardées.
-                <br />
-                Si vous continuez, elles seront perdues.
-              </p>
-            </Modal.Body>
-            <Modal.Footer>
-              <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
-              <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
-            </Modal.Footer>
+          <Modal
+          className="Modal__Bootstrap modal-dialog"
+          // closeTimeoutMS={150}
+          isOpen={this.state.modalIsOpen}
+          onRequestClose={this.handleModalCloseRequest}
+          >
+            <div className="modal-content">
+              <div className="modal-body">
+                <p className="text-center">
+                  Certaines données n'ont pas encore été sauvegardées.
+                  <br />
+                  Si vous continuez, elles seront perdues.
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+                <button type="submit" className="btn btn-default btn-lg" onClick={this.handleModalCloseRequest}>Fermer</button>
+              </div>
+            </div>
           </Modal>
         </div>
       </nav>