# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1534271690 -7200
# Node ID cfcbf4bc66f17d622552b9c1e4a2ff04264b72e3
# Parent  56850f5c73f65aa32b97d9f52ebfe330bbd3b0a7
Remove react-bootstrap from components except Modal, Collapse and Dropdown

diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/App.js
--- a/client/src/App.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/App.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-
 // import logo from './logo.svg';
-import { Grid, Row, Col, Alert } from 'react-bootstrap';
 import './App.css';
 import Navbar from './components/Navbar';
 
@@ -10,13 +8,13 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3} className="text-center">
-              <Alert bsStyle="info">Welcome to IRI Notes</Alert>
-            </Col>
-          </Row>
-        </Grid>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3 text-center">
+              <div class="alert alert-info" role="alert" bsStyle="info"><span>Bienvenue sur</span><br/>IRI Notes</div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/CategoriesTooltip.js
--- a/client/src/components/CategoriesTooltip.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/CategoriesTooltip.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { FormGroup, FormControl, Button } from 'react-bootstrap';
 
 class CategoriesTooltip extends Component {
 
@@ -47,20 +46,22 @@
     return (
       <div className="categories-tooltip">
         <form onSubmit={ this.onSubmit }>
-          <FormGroup className="buttons">
+          <div className="form-group buttons">
           {this.props.categories.map((category) =>
-            <Button
+            <button type="button"
               key={ category.name }
-              bsStyle="primary"
+              className="btn btn-primary"
               style={{ backgroundColor: category.color }}
               active={ this.isCategoryActive(category)  }
-              onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</Button>
+              onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>
           )}
-          </FormGroup>
+          </div>
           {this.state.showCommentControl &&
-          <FormGroup>
-            <FormControl inputRef={(ref) => { this.commentControl = ref; }} />
-          </FormGroup>}
+          <div className="form-group">
+            <input className="form-control"
+            // inputRef={(ref) => { this.commentControl = ref; }}
+            ref={(commentControl) => { this.commentControl = commentControl; }}/>
+          </div>}
         </form>
       </div>
     );
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Clock.js
--- a/client/src/components/Clock.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Clock.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Label } from 'react-bootstrap';
 import moment from 'moment';
 
 class Clock extends Component {
@@ -24,7 +23,7 @@
 
   render() {
     return (
-      <Label bsStyle="info">{ this.state.time }</Label>
+      <span className="label label-info">{ this.state.time }</span>
     );
   }
 }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/CreateGroup.js
--- a/client/src/components/CreateGroup.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/CreateGroup.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
@@ -42,7 +41,7 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && fieldname in errorMessages) {
       return errorMessages[fieldname].map((message, key) =>
-        <HelpBlock key={ key }>{ message }</HelpBlock>
+        <p className="help-block" key={ key }>{ message }</p>
       );
     }
   }
@@ -51,11 +50,11 @@
     if (errorMessages && 'non_field_errors' in errorMessages) {
       const errors = errorMessages['non_field_errors'];
       return (
-        <Alert bsStyle="danger">
+        <div class="alert alert-danger" role="alert">
         { errors.map((message, key) =>
           <p key={ key }>{ message }</p>
         ) }
-        </Alert>
+        </div>
       )
     }
   }
@@ -68,41 +67,40 @@
 
   render() {
 
-    const panelHeader = (
-      <h4 className="text-uppercase text-center">New Group</h4>
-    )
-
     const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
     const okDisabled = (!this.state.name || this.state.name.trim() === "");
 
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <Panel header={ panelHeader } className="panel-login">
-                <form onSubmit={this.submit}>
-                  <FormGroup validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
-                    <ControlLabel>Nom</ControlLabel>
-                    <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
-                     { this.renderErrorMessage(errorMessages, 'name') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
-                    <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
-                     { this.renderErrorMessage(errorMessages, 'description') }
-                  </FormGroup>
-                  { this.renderNonFieldErrors(errorMessages) }
-                  <Row>
-                  <Col md={6}><Button type="submit" block bsStyle="primary" disabled={okDisabled}>Ok</Button></Col>
-                  <Col md={6}><Button block bsStyle="default" onClick={this.cancel}>Cancel</Button></Col>
-                  </Row>
-                </form>
-              </Panel>
-            </Col>
-          </Row>
-        </Grid>
+        <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-6 col-md-offset-3">
+                <div className="panel-login panel panel-default">
+                  <div className="panel-heading">
+                  <h4 className="text-uppercase text-center">New Group</h4>
+                  <form onSubmit={this.submit}>
+                    <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
+                      <label className="control-label">Nom</label>
+                      <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
+                      { this.renderErrorMessage(errorMessages, 'name') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
+                      <label className="control-label">Password</label>
+                      <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
+                      { this.renderErrorMessage(errorMessages, 'description') }
+                    </div>
+                    { this.renderNonFieldErrors(errorMessages) }
+                    <div className="row">
+                    <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div>
+                    <div className="col-md-6"><button type="button" className="btn btn-default btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Login.js
--- a/client/src/components/Login.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Login.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
 import '../App.css';
+import './Login.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
@@ -44,7 +44,7 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && errorMessages.has(fieldname)) {
       return errorMessages.get(fieldname).map((message, key) =>
-        <HelpBlock key={ key }>{ message }</HelpBlock>
+        <p className="help-block" key={ key }>{ message }</p>
       );
     }
   }
@@ -53,51 +53,50 @@
     if (errorMessages && errorMessages.has('non_field_errors')) {
       const errors = errorMessages.get('non_field_errors');
       return (
-        <Alert bsStyle="danger">
+        <div class="alert alert-danger" role="alert">
         { errors.map((message, key) =>
           <p key={ key }>{ message }</p>
         ) }
-        </Alert>
+        </div>
       )
     }
   }
 
   render() {
 
-    const panelHeader = (
-      <h4 className="text-uppercase text-center">Login</h4>
-    )
-
     const errorMessages = this.props.login.get('errorMessages');
 
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <Panel header={ panelHeader } className="panel-login">
-                <form onSubmit={this.submit}>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
-                    <ControlLabel>Username</ControlLabel>
-                    <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="username" />
-                    { this.renderErrorMessage(errorMessages, 'username') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
-                    <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="input" type="password" onChange={this.handleInputChange} name="password" />
-                    { this.renderErrorMessage(errorMessages, 'password') }
-                  </FormGroup>
-                  { this.renderNonFieldErrors(errorMessages) }
-                  <Button type="submit" block bsStyle="primary" onClick={this.login}>Login</Button>
-                </form>
-              </Panel>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <div className="panel-login panel panel-default">
+                <div className="panel-heading">
+                  <h4 className="text-center panel-title">IRI Notes</h4>
+                  <form onSubmit={this.submit}>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+                      <label className="control-label">Nom d'utilisateur</label>
+                      <input className="form-control" type="text" onChange={this.handleInputChange} name="username" />
+                      { this.renderErrorMessage(errorMessages, 'username') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
+                      <label className="control-label">Mot de passe</label>
+                      <input className="form-control" type="password" onChange={this.handleInputChange} name="password" />
+                      { this.renderErrorMessage(errorMessages, 'password') }
+                    </div>
+                    { this.renderNonFieldErrors(errorMessages) }
+                    <button type="submit" className="btn btn-primary btn-lg">Se connecter</button>
+                  </form>
+                </div>
+              </div>
               <p className="text-center">
-                <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a>
+                <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a>
               </p>
-            </Col>
-          </Row>
-        </Grid>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Navbar.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,16 +1,16 @@
+import './Navbar.css';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
+import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
-import './Navbar.css';
 
 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
 
@@ -26,26 +26,34 @@
 
   if (isAuthenticated) {
     return (
-      <NavDropdown title={ currentUser.get('username') } id="user-dropdown">
-        <MenuItem onClick={onClickSettings}>Settings</MenuItem>
-        <MenuItem onClick={onLogout}>Logout</MenuItem>
-      </NavDropdown>
+          <NavDropdown title={ currentUser.get('username') }>
+              <li>
+                <a  href="#settings" onClick={onClickSettings}>Paramètres</a>
+              </li>
+              <li>
+                <a  href="#logout" onClick={onLogout}>Se déconnecter</a>
+              </li>
+          </NavDropdown>
     );
   }
   return (
-    <NavItem onClick={onClickLogin} href="/login">Login</NavItem>
+      <li>
+      <a onClick={onClickLogin} href="/login">Se connecter</a>
+      </li>
   );
 }
 
 const Online = ({ online }) => {
   return (
-    <NavItem>
-      <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
-    </NavItem>
+    <li>
+      <a>
+        <span className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+      </a>
+    </li>
   )
 }
 
-const SyncButton = ({ onSyncClick, isSynchronizing, isSynchronized, id }) => {
+const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => {
   const classnames = "material-icons"
     + ((!isSynchronized)?" sync-button-not-synchronized":"")
     + ((isSynchronizing)?" sync-button-synchronizing":"");
@@ -58,23 +66,34 @@
     title += ": not synchronized";
   }
 
+  if (isAuthenticated) {
+    return (
+      <li>
+        <a title={title} onClick={clickCb} id={id || null}>
+        <span className={classnames}>&#xE627;</span> </a>
+      </li>
+    );
+  }
   return (
-    <NavItem title={title} onClick={clickCb} id={id || null}>
-      <span className={classnames}>&#xE627;</span>
-    </NavItem>
-  )
+      <li>
+        <a>
+          <span></span>
+        </a>
+    </li>
+  );
 }
 
+
 const GroupStatus = ({currentGroup, groups, onSelect}) => {
 
   if(currentGroup) {
     const currentGroupName = currentGroup.get('name');
     return (
-      <NavDropdown title={currentGroupName} id="group-dropdown" onSelect={onSelect}>
+      <NavDropdown title={currentGroupName} onSelect={onSelect}>
         { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
-            return <MenuItem className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
+          return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>
           }
         )}
         <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>
@@ -149,38 +168,46 @@
 
   render() {
     return (
-      <Navbar fluid inverse fixedTop>
-        <Navbar.Header>
-          <Navbar.Brand>
-            <a onClick={this.onClickHome} href="/">IRI Notes</a>
-          </Navbar.Brand>
-          <Navbar.Toggle />
-        </Navbar.Header>
-        <Navbar.Collapse>
-          <Nav>
-            <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
-          </Nav>
-          <Nav pullRight>
-            <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
-            <SyncButton id='sync-button' onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
-            <Online {...this.props} />
-            <LoginNav {...this.props} onLogout={this.onClickLogout} />
-          </Nav>
-        </Navbar.Collapse>
-        <Modal show={this.state.showModal} onHide={this.closeModal}>
-          <Modal.Body>
-            <p className="text-center">
-              Some data is not synchronized with server.
-              <br />
-              If you continue, it will be lost.
-            </p>
-          </Modal.Body>
-          <Modal.Footer>
-            <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button>
-            <Button onClick={this.closeModal}>Close</Button>
-          </Modal.Footer>
-        </Modal>
-      </Navbar>
+      <nav className="navbar navbar-inverse navbar-fixed-top">
+        <div className="container-fluid">
+          <div className="navbar-header">
+            <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+          </div>
+          <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul className="nav navbar-nav">
+              <li>
+                <a onClick={this.onClickSessions} href="/sessions">Accueil</a>
+              </li>
+            </ul>
+            <ul className="nav navbar-nav navbar-right">
+              <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+              <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
+              <Online {...this.props} />
+              <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>
+        </div>
+      </nav>
+
     );
   }
 }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Note.js
--- a/client/src/components/Note.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Note.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormControl } from 'react-bootstrap';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
 
@@ -60,12 +59,13 @@
     if (this.props.isEditing) {
       return (
         <div className="note-margin-comment">
-          <FormControl
+          <input type="text" className="form-control"
             name="margin"
             componentClass="textarea"
             placeholder="Enter a margin comment for your note"
             defaultValue={ this.props.note.marginComment }
-            inputRef={ ref => { this.marginComment = ref; } } />
+            // inputRef={ ref => { this.marginComment = ref; } } />
+            ref={(marginComment) => { this.marginComment = marginComment; }} />
         </div>
       )
     }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/NoteInput.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import { Form, FormControl } from 'react-bootstrap';
-
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
 import { now } from '../utils';
@@ -55,7 +53,7 @@
 
   render() {
     return (
-      <Form>
+      <form>
         <div className="editor">
           <div className="editor-left">
             <SlateEditor ref="editor"
@@ -68,15 +66,15 @@
               annotationCategories={ this.props.annotationCategories } />
           </div>
           <div className="editor-right">
-            <FormControl
+            <input type="textarea" className="form-control"
               name="margin"
-              componentClass="textarea"
               placeholder="Enter a margin comment for your note"
-              inputRef={ ref => { this.marginComment = ref; } }
+              // inputRef={ ref => { this.marginComment = ref; } }
+              ref={(marginComment) => { this.marginComment = marginComment; }}
             />
           </div>
         </div>
-      </Form>
+      </form>
     );
   }
 }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/NotesList.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
-import { Alert, Modal, Button } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
 import Note from './Note';
 
 class NotesList extends Component {
@@ -47,7 +47,7 @@
   render() {
     if (this.props.notes.size === 0) {
       return (
-        <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert>
+        <div className="alert alert-warning">Commencez votre première note en écrivant dans le champ texte ci-dessous</div>
       );
     }
 
@@ -68,11 +68,11 @@
 
         <Modal show={this.state.showModal} onHide={this.closeModal}>
           <Modal.Body>
-            Are you sure?
+            Êtes vous sûr(e) ?
           </Modal.Body>
           <Modal.Footer>
-            <Button bsStyle="primary" onClick={ this.deleteNote }>Confirm</Button>
-            <Button onClick={ this.closeModal }>Close</Button>
+            <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button>
+            <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button>
           </Modal.Footer>
         </Modal>
 
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Register.js
--- a/client/src/components/Register.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Register.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, HelpBlock } from 'react-bootstrap';
 import '../App.css';
+import './Register.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
@@ -31,56 +31,55 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && errorMessages.has(fieldname)) {
       return errorMessages.get(fieldname).map((message, key) =>
-        <HelpBlock key={ key }>{ message }</HelpBlock>
+        <p className="help-block" key={ key }>{ message }</p>
       );
     }
   }
 
   render() {
 
-    const panelHeader = (
-      <h4 className="text-uppercase text-center">Register</h4>
-    )
-
     const errorMessages = this.props.register.get('errorMessages');
 
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <Panel header={ panelHeader } className="panel-login">
-                <form onSubmit={this.submit}>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
-                    <ControlLabel>Username</ControlLabel>
-                    <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'username') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
-                    <ControlLabel>Email</ControlLabel>
-                    <FormControl componentClass="input" type="email" inputRef={ref => { this.email = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'email') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
-                    <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password1 = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'password1') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
-                    <ControlLabel>Confirm password</ControlLabel>
-                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password2 = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'password2') }
-                  </FormGroup>
-                  <Button type="submit" block bsStyle="primary" onClick={this.register}>Register</Button>
-                </form>
-              </Panel>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <div className="panel-login panel panel-default">
+                <div className="panel-heading">
+                  <h4 className="text-center panel-title">IRI Notes</h4>
+                  <form onSubmit={this.submit}>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+                      <label className="control-label">Nom d'utilisateur</label>
+                      <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'username') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
+                      <label className="control-label">Email</label>
+                      <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'email') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
+                      <label className="control-label">Mot de passe</label>
+                      <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'password1') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
+                      <label className="control-label">Confirmer le mot de passe</label>
+                      <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'password2') }
+                    </div>
+                    <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
+                  </form>
+                </div>
+              </div>
               <p className="text-center">
-                <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Already registered? Sign in.</a>
+                <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>
               </p>
-            </Col>
-          </Row>
-        </Grid>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Session.js
--- a/client/src/components/Session.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Session.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
@@ -37,18 +36,18 @@
             </div>
           </div>
           <section className="editor-fixed">
-            <Grid fluid>
-              <Row>
-                <Col md={9} mdOffset={3}>
+            <div className="container-fluid">
+              <div className="row">
+                <div className="col-md-9 col-md-offset-3">
                   <NoteInput
                     session={this.props.currentSession}
                     autoSubmit={this.props.autoSubmit}
                     addNote={this.props.notesActions.addNote}
                     setAutoSubmit={this.props.userActions.setAutoSubmit}
                     annotationCategories={this.props.annotationCategories}/>
-                </Col>
-              </Row>
-            </Grid>
+                </div>
+              </div>
+            </div>
           </section>
         </div>
       </div>
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/SessionForm.js
--- a/client/src/components/SessionForm.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionForm.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
 import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as authActions from '../actions/authActions';
@@ -55,40 +55,42 @@
     }
 
     return (
-      <Panel>
-        <form onSubmit={ e => { e.preventDefault() } }>
-          <FormGroup>
-            <ControlLabel>Title</ControlLabel>
-            <FormControl
-              name="title"
-              defaultValue={ this.props.currentSession.title }
-              onChange={ this.onChange }
-              type="text"
-              placeholder="Enter a title"
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              name="description"
-              componentClass="textarea"
-              defaultValue={ this.props.currentSession.description }
-              onChange={ this.onChange }
-              placeholder="Enter a description"
-            />
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel>Group</ControlLabel>
-            <p>{this.props.currentSession.group}</p>
-          </FormGroup>
-          <FormGroup>
-            <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</ControlLabel>
-            <Collapse in={this.state.protocolOpen}>
-            <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
-            </Collapse>
-          </FormGroup>
-        </form>
-      </Panel>
+        <div className="panel-default">
+          <div class="panel-body">
+            <form onSubmit={ e => { e.preventDefault() } }>
+              <div className="form-group">
+                <label className="control-label">Titre</label>
+                <input className="form-control"
+                  name="title"
+                  defaultValue={ this.props.currentSession.title }
+                  onChange={ this.onChange }
+                  type="text"
+                  placeholder="Entrez un titre"
+                />
+              </div>
+              <div className="form-group">
+                <label className="control-label">Description</label>
+                <input className="form-control"
+                  type="textarea"
+                  name="description"
+                  defaultValue={ this.props.currentSession.description }
+                  onChange={ this.onChange }
+                  placeholder="Entrez une description"
+                />
+              </div>
+              <div className="form-group">
+                <label className="control-label">Group</label>
+                <p>{this.props.currentSession.group}</p>
+              </div>
+              <div className="form-group">
+                <label className="control-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
+                <Collapse in={this.state.protocolOpen}>
+                <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
+                </Collapse>
+              </div>
+            </form>
+          </div>
+        </div>
     );
   }
 }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionList.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
 import moment from 'moment';
 import '../App.css';
+import './SessionList.css';
 import Navbar from './Navbar';
 import * as sessionsActions from '../actions/sessionsActions';
 import uuidV1 from 'uuid/v1';
@@ -68,34 +69,33 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <ListGroup>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <ul className="list-group">
                 {this.props.sessions.map((session) =>
-                  <ListGroupItem key={session.get('_id')}>
+                  <li className="list-group-item" key={session.get('_id')}>
                     <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>
-                    <a className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
+                    <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
                       <span className="material-icons">delete</span>
                     </a>
-                  </ListGroupItem>
+                  </li>
                 )}
-              </ListGroup>
-              <Button bsStyle="success" onClick={this.createSession}>Create new session</Button>
-            </Col>
-          </Row>
-        </Grid>
+              </ul>
+              <button type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
+            </div>
+          </div>
+        </div>
 
         <Modal show={ this.state.showModal } onHide={ this.closeModal }>
           <Modal.Body>
-            Are you sure?
+          Êtes-vous sûr(e) ?
           </Modal.Body>
           <Modal.Footer>
-            <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button>
-            <Button onClick={ this.closeModal }>Close</Button>
+            <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+            <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
           </Modal.Footer>
         </Modal>
-
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/SessionSummary.js
--- a/client/src/components/SessionSummary.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SessionSummary.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,20 +1,19 @@
 import React from 'react';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import _ from 'lodash';
 import '../App.css';
 import {formatTimestamp} from '../utils';
 
 const SessionSummary = ({notes}) => (
-  <ListGroup>
+  <ul className="list-group">
     {notes.map((note) =>
-      <ListGroupItem key={note.get('_id')}>
+      <li className="list-group-item" key={note.get('_id')}>
         <a href={'#note-' + note.get('_id')}>
           <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
           <span className="pull-right">{_.words(note.plain).length} words</span>
         </a>
-      </ListGroupItem>
+      </li>
     )}
-  </ListGroup>
+  </ul>
 )
 
 export default SessionSummary;
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/Settings.js
--- a/client/src/components/Settings.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Settings.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Button, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import * as userActions from '../actions/userActions';
@@ -24,33 +23,33 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
               <form>
-                <FormGroup>
-                  <ControlLabel>First name</ControlLabel>
-                  <FormControl
+                <div className="form-group">
+                  <label className="control-label">Prénom</label>
+                  <input className="form-control"
                     name="firstname"
                     defaultValue={ firstname }
-                    placeholder="First Name"
-                    inputRef={ ref => { this.firstname = ref; } }
+                    placeholder="Entrez un prénom"
+                    ref={(firstname) => { this.firstname = firstname; }}
                   />
-                </FormGroup>
-                <FormGroup>
-                  <ControlLabel>Last name</ControlLabel>
-                  <FormControl
+                </div>
+                <div className="form-group">
+                  <label className="control-label">Nom</label>
+                  <input className="form-control"
                     name="lastname"
                     defaultValue={ lastname }
-                    placeholder="Last Name"
-                    inputRef={ ref => { this.lastname = ref; } }
+                    placeholder="Entrez un nom"
+                    ref={(lastname) => { this.lastname = lastname; }}
                   />
-                </FormGroup>
+                </div>
               </form>
-              <Button block bsStyle="success" onClick={this.updateSettings}>Save settings</Button>
-            </Col>
-          </Row>
-        </Grid>
+              <button type="submit" className="btn btn-primary btn-lg" onClick={this.updateSettings}>Enregistrer</button>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
diff -r 56850f5c73f6 -r cfcbf4bc66f1 client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/SlateEditor.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
 import { Editor, Plain, Raw } from 'slate'
 import React from 'react'
 import Portal from 'react-portal'
-import { Button } from 'react-bootstrap'
 import Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
@@ -439,7 +438,7 @@
     return (
       <div className="checkbox">
         <label>
-          <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
+          <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Entrée</kbd>= Ajouter une note
         </label>
       </div>
     )
@@ -449,9 +448,9 @@
     return (
       <div>
         { !this.props.note && this.renderToolbarCheckbox() }
-        <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
-        { this.props.note ? 'Save note' : 'Add note' }
-        </Button>
+        <button type="button" className="btn btn-primary btn-lg" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+          { this.props.note ? 'Save note' : 'Ajouter' }
+        </button>
       </div>
     );
   }