# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1535721258 -7200
# Node ID 57d63a248f0da48ad67331e0fb63c297ca52571f
# Parent  97536386b3974f4bab98a64765263c260c58bac4
Update to Bootstrap 4

diff -r 97536386b397 -r 57d63a248f0d client/package.json
--- a/client/package.json	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/package.json	Fri Aug 31 15:14:18 2018 +0200
@@ -5,6 +5,8 @@
   "homepage": ".",
   "dependencies": {
     "@types/react-modal": "^3.2.1",
+    "bootstrap": "^4.1.3",
+    "i18next": "^11.6.0",
     "immutable": "^3.8.1",
     "jwt-decode": "^2.2.0",
     "localforage": "^1.5.0",
@@ -39,8 +41,8 @@
     "react-test-renderer": "^15.5.4"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./src/sass --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./src/sass --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/ --watch --recursive",
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./src/scss --include-path ./node_modules src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./src/scss --include-path ./node_modules src/ -o src/ --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
     "build": "npm run build-css && react-scripts build",
diff -r 97536386b397 -r 57d63a248f0d client/src/App.js
--- a/client/src/App.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/App.js	Fri Aug 31 15:14:18 2018 +0200
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+
 // import logo from './logo.svg';
 import './App.css';
 import Navbar from './components/Navbar';
@@ -10,8 +11,8 @@
         <Navbar history={this.props.history} />
         <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" id="home-text"><span id="welcome">Bienvenue sur</span><br/>IRI Notes</div>
+            <div className="col-lg-6 offset-md-3 text-center">
+              <div className="alert alert-info" id="home-text"><span id="welcome">Bienvenue sur</span><br/>IRI Notes</div>
             </div>
           </div>
         </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/App.scss
--- a/client/src/App.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/App.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -1,4 +1,5 @@
-@import "bootstrap/variables";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 .App {
   text-align: center;
@@ -142,7 +143,7 @@
     padding: 20px 10px 20px 80px;
     margin-bottom: 10px;
     cursor: pointer;
-    min-height: ($line-height-computed * 4);
+    // min-height: ($line-height-computed * 4);
     border: 1px solid transparent;
 
     &:before {
diff -r 97536386b397 -r 57d63a248f0d client/src/components/CreateGroup.js
--- a/client/src/components/CreateGroup.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/CreateGroup.js	Fri Aug 31 15:14:18 2018 +0200
@@ -41,7 +41,7 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && fieldname in errorMessages) {
       return errorMessages[fieldname].map((message, key) =>
-        <p className="help-block" key={ key }>{ message }</p>
+        <p className="form-text" key={ key }>{ message }</p>
       );
     }
   }
@@ -75,25 +75,25 @@
         <Navbar history={this.props.history} />
         <div className="container-fluid">
             <div className="row">
-              <div className="col-md-6 col-md-offset-3">
+              <div className="col-lg-6 offset-md-3">
                 <div className="panel-login panel panel-default">
-                  <div className="panel-heading">
-                  <h4 className="text-uppercase text-center">New Group</h4>
+                  <div className="card-header">
+                  <h4 className="text-center">Créer un groupe</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..."/>
+                      <label className="col-from-label">Nom</label>
+                      <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Nom du groupe..."/>
                       { this.renderErrorMessage(errorMessages, 'name') }
                     </div>
                     <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
-                      <label className="control-label">Password</label>
+                      <label className="col-form-label">Description</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 className="col-md-6"><button type="button" className="btn btn-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
                     </div>
                   </form>
                 </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Login.js
--- a/client/src/components/Login.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Login.js	Fri Aug 31 15:14:18 2018 +0200
@@ -3,7 +3,7 @@
 import { bindActionCreators } from 'redux';
 import '../App.css';
 import './Login.css';
-import Navbar from './Navbar';
+// import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
 class Login extends Component {
@@ -32,7 +32,6 @@
 
   submit = (e) => {
     e.preventDefault();
-
     this.login();
   }
 
@@ -44,7 +43,7 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && errorMessages.has(fieldname)) {
       return errorMessages.get(fieldname).map((message, key) =>
-        <p className="help-block" key={ key }>{ message }</p>
+        <p className="form-text" key={ key }>{ message }</p>
       );
     }
   }
@@ -64,30 +63,30 @@
 
   render() {
 
-    const errorMessages = this.props.login.get('errorMessages');
+    // const errorMessages = this.props.login.get('errorMessages');
 
     return (
       <div>
-        <Navbar history={this.props.history} />
+        {/* <Navbar history={this.props.history} /> */}
         <div className="container-fluid">
           <div className="row">
-            <div className="col-md-6 col-md-offset-3">
+            <div className="col-lg-6 offset-md-3">
               <div className="panel-login panel panel-default">
-                <div className="panel-heading">
-                  <h4 className="text-center panel-title">IRI Notes</h4>
+                <div className="card-header bg-secondary border-0">
+                  <h4 className="text-center card-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 className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+                      <label className="col-form-label text-primary">Nom d'utilisateur</label>
+                      <input className="form-control bg-danger text-muted" 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 className="form-group" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
+                      <label className="col-form-label text-primary">Mot de passe</label>
+                      <input className="form-control bg-danger text-muted" 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>
+                    {/* { this.renderNonFieldErrors(errorMessages) } */}
+                    <button type="submit" className="btn btn-primary btn-lg text-secondary">Se connecter</button>
                   </form>
                 </div>
               </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Login.scss
--- a/client/src/components/Login.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Login.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -3,10 +3,10 @@
     font-weight: bolder;
 }
 
-.control-label {
-    color: #769FED;
+label.col-form-label.text-primary {
     font-size: 16px;
     margin-left: 20%;
+    font-weight: bolder;
 }
 
 .form-control {
@@ -26,9 +26,3 @@
     margin-left: 35%;
     margin-top: 7%;
 }
-
-.text-center .text-muted {
-    color: #769FED;
-    font-size: 16px;
-    font-weight: bold;
-}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Navbar.js	Fri Aug 31 15:14:18 2018 +0200
@@ -12,14 +12,15 @@
 import { groupSetCurrent } from '../actions/groupActions';
 import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';
 import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';
+import CreateSession from './CreateSession';
 import NavbarLogin from './NavbarLogin';
 import NavbarGroup from './NavbarGroup';
 
 const Online = ({ online }) => {
   return (
-    <li>
-      <a>
-        <span  className="material-icons navs" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
+    <li className="nav-item">
+      <a className="nav-link">
+        <span  className="material-icons" style={{ color: online ? '#2ECC71' : '#F95B5B' }}>signal_wifi_4_bar</span>
       </a>
     </li>
   )
@@ -40,8 +41,8 @@
 
   if (isAuthenticated) {
     return (
-      <li>
-        <a title={title} onClick={clickCb} id={id || null}>
+      <li className="nav-item">
+        <a className="nav-link" title={title} onClick={clickCb} id={id || null}>
         <span className={classnames}>&#xE627;</span> </a>
       </li>
     );
@@ -62,6 +63,10 @@
     this.state = { modalIsOpen: false };
   }
 
+  componentWillMount() {
+    Modal.setAppElement('body');
+}
+
   openModal = () => {
     this.setState({modalIsOpen: true});
   }
@@ -129,24 +134,29 @@
 
   render() {
     return (
-      <nav className="navbar navbar-inverse navbar-fixed-top">
+      <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
         <div className="container-fluid">
-          <div className="navbar-header">
-            <a id="brand" 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>
+        <div className="navbar-header">
+        <a id="brand" className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+        <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></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 className="navs" onClick={this.onClickSessions} href="/sessions">Accueil</a>
+          <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
+            <ul className="navbar-nav mr-auto">
+              <li className="nav-item">
+                <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Accueil</a>
               </li>
             </ul>
-            <ul className="nav navbar-nav navbar-right">
+            <ul className="navbar-nav navbar-center">
+                <li className="nav-item text-secondary">
+                  {/* <CreateSession history={this.props.history}/> */}
+                </li>
+            </ul>
+            <ul className="nav navbar-nav ml-auto">
               <NavbarGroup 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} />
@@ -161,7 +171,7 @@
           >
             <div id="logout-modal" className="modal-content text-center">
               {/* <div className="modal-body"> */}
-              <button type="button" id="logout-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+              <button type="button" id="logout-close-modal-button" className="btn btn-default float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
               <span className="material-icons modal-warning">warning</span>
                 <p className="modal-text">
                   Certaines données n'ont pas encore été sauvegardées.
@@ -169,7 +179,7 @@
                   Si vous continuez, elles seront perdues.
                 </p>
               <div className="modal-footer">
-              <button type="button" className="btn btn-primary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+              <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
               </div>
             </div>
           </Modal>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Navbar.scss
--- a/client/src/components/Navbar.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Navbar.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -8,31 +8,49 @@
 
 #brand {
     margin-top: 5px;
-    font-size: 30px;
 }
 
-.navbar-nav .navs, .navbar-right .navs {
-    font-size: 20px;
-    margin-top: 7px;
-    background-color: #769FED;
+.username#navbarDropdown {
+    font-size: 24px;
+    font-weight: medium;
+    margin-top:2%;
 }
 
-.navbar-right .navs:focus {
-    background-color: #769FED;
+.nav-link {
+    font-size: 20px;
+    margin-top: 8px;
 }
 
 #sync-button {
     margin-top: 7px;
 }
 
-#groups {
-    color: #769FED;
+.dropdown-toggle{
+    cursor: pointer;
+}
+
+.dropdown-item {
     font-size: 18px;
     font-weight: bold;
-    background-color: white;
+    cursor: pointer;
+}
+
+#group-menu-scroll-down {
+    height: auto;
+    max-height: 800%;
+    overflow-y: scroll;
 }
 
-.navs .user-dropdown {
+.create-group {
+    width: 60%;
+    padding-top: 1.5%;
+    margin-top: 2.5%;
+    margin-bottom: 5%;
+    margin-left: 20%;
+    font-size: 14px;
+}
+
+.nav-link .user-dropdown {
     font-size: 18px;
     font-weight: bold;
 
@@ -90,15 +108,16 @@
 
 #logout-close-modal-button{
     margin-top: -2.5%;
-    margin-right: -1%;
+    margin-left: 92%;
     background-color: transparent;
     border: transparent;
+    color: rgba(#769FED, .4);
 }
 
 #logout-close-modal-button:hover{
     background-color: transparent;
     border: transparent;
-    color: #769FED;
+    color:black;
 }
 
 .modal-text{
@@ -112,7 +131,7 @@
     font-size:60px;
     padding:0;
     margin-top: 5%;
-    margin-right: -5%;
+    margin-right: 3%;
 }
 
 #logout-modal-button {
@@ -122,7 +141,3 @@
     width: 20%;
     font-size: 14px;
 }
-
-.modal-footer{
-    border: white;
-}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/NavbarGroup.js
--- a/client/src/components/NavbarGroup.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NavbarGroup.js	Fri Aug 31 15:14:18 2018 +0200
@@ -35,6 +35,7 @@
     const {currentGroup, groups, onSelect} = this.props;
 
     const onClickGroup = (e) => {
+      e.preventDefault();
       onSelect(e.target.dataset.groupname);
       this.hideDropDown();
     }
@@ -42,20 +43,20 @@
     if (currentGroup) {
       const currentGroupName = currentGroup.get('name');
       return (
-        <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>
-          <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
+        <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}>
+          <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
           { currentGroupName }
           &nbsp;<span className="caret"></span>
           </a>
-          <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+          <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
           { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
-              return <li key={key} className={className} onClick={onClickGroup}><a data-groupname={groupName}>{ groupName }</a></li>
+              return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a>
             })
           }
-          <li onClick={onClickGroup} key="-1"><a data-groupname="__create_group__">Créer un groupe...</a></li>
-          </ul>
+          <button type="button "onClick={onClickGroup} key="-1" className="dropdown-item btn btn-secondary bg-secondary text-center text-primary create-group" data-groupname="__create_group__">Créer un groupe</button>
+          </div>
         </li>
       );
     } else {
diff -r 97536386b397 -r 57d63a248f0d client/src/components/NavbarLogin.js
--- a/client/src/components/NavbarLogin.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NavbarLogin.js	Fri Aug 31 15:14:18 2018 +0200
@@ -16,6 +16,7 @@
   }
 
   handleClickOutside = (e) => {
+    e.preventDefault();
     const currentNode = ReactDOM.findDOMNode(this);
     if(!currentNode.contains(e.target)) {
       this.hideDropDown();
@@ -47,21 +48,21 @@
     if (isAuthenticated) {
       return (
 
-        <li className={`nav-item dropdown navs ${this.state.showDropdown?'show':''}`}>
-          <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
+        <li className={`nav-item dropdown ${this.state.showDropdown?'show':''}`}>
+          <a name className="nav-link dropdown-toggle username" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded={this.state.showDropdown} onClick={this.toggleShowDropdown} onBlur={this.hideDropDown}>
           { currentUser.get('username') }
           &nbsp;<span className="caret"></span>
           </a>
-          <ul className={`dropdown-menu ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
-            <li><a className="user-dropdown" href="#settings" onClick={this.onClickSettings}>Paramètres</a></li>
-            <li><a className="user-dropdown" href="#logout" onClick={onLogout}>Se déconnecter</a></li>
-          </ul>
+          <div className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+            <a className="dropdown-item bg-primary text-secondary" onClick={this.onClickSettings}>Paramètres</a>
+            <a className="dropdown-item bg-primary text-secondary" onClick={onLogout}>Se déconnecter</a>
+          </div>
         </li>
       );
     } else {
       return (
-          <li>
-          <a className="navs" onClick={this.onClickLogin} href="/login">Se connecter</a>
+          <li className="nav-item">
+          <a className="nav-link" onClick={this.onClickLogin} href="/login">Se connecter</a>
           </li>
       );
     }
diff -r 97536386b397 -r 57d63a248f0d client/src/components/NoteList.scss
--- a/client/src/components/NoteList.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NoteList.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -40,15 +40,16 @@
 
 #delete-note-close-modal-button{
     margin-top: -2.5%;
-    margin-right: -1%;
+    margin-left: 92%;
     background-color: transparent;
     border: transparent;
+    color: rgba(#769FED, .4);
 }
 
 #delete-note-close-modal-button:hover {
     background-color: transparent;
     border: transparent;
-    color: #769FED;
+    color:black;
 }
 
 .modal-text{
diff -r 97536386b397 -r 57d63a248f0d client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/NotesList.js	Fri Aug 31 15:14:18 2018 +0200
@@ -15,6 +15,10 @@
     };
   }
 
+  componentWillMount() {
+    Modal.setAppElement('body');
+}
+
   openModal = () => {
     this.setState({modalIsOpen: true});
   }
@@ -90,10 +94,10 @@
         onRequestClose={this.handleModalCloseRequest}
         >
           <div id="delete-note-modal" className="modal-content text-center">
-            <button type="button" id="delete-note-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+            <button type="button" id="delete-note-close-modal-button" className="btn btn-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
             <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette note ?</span>
             <div className="modal-footer">
-              <button type="button" className="btn btn-primary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
+              <button type="button" className="btn btn-primary text-secondary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
             </div>
           </div>
         </Modal>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Register.js
--- a/client/src/components/Register.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Register.js	Fri Aug 31 15:14:18 2018 +0200
@@ -3,7 +3,7 @@
 import { bindActionCreators } from 'redux';
 import '../App.css';
 import './Register.css';
-import Navbar from './Navbar';
+// import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
 class Register extends Component {
@@ -31,46 +31,46 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && errorMessages.has(fieldname)) {
       return errorMessages.get(fieldname).map((message, key) =>
-        <p className="help-block" key={ key }>{ message }</p>
+        <p className="form-text" key={ key }>{ message }</p>
       );
     }
   }
 
   render() {
 
-    const errorMessages = this.props.register.get('errorMessages');
+    // const errorMessages = this.props.register.get('errorMessages');
 
     return (
       <div>
-        <Navbar history={this.props.history} />
+        {/* <Navbar history={this.props.history} /> */}
         <div className="container-fluid">
           <div className="row">
-            <div className="col-md-6 col-md-offset-3">
+            <div className="col-lg-6 offset-md-3">
               <div className="panel-login panel panel-default">
-                <div className="panel-heading">
-                  <h4 className="text-center panel-title">IRI Notes</h4>
+                <div className="card-header bg-secondary border-0">
+                  <h4 className="text-center card-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 className="form-group" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+                      <label className="col-form-label text-primary">Nom d'utilisateur</label>
+                      <input className="form-control bg-danger text-muted" 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 className="form-group" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
+                      <label className="col-form-label text-primary">Email</label>
+                      <input className="form-control bg-danger text-muted" 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 className="form-group" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
+                      <label className="col-form-label text-primary">Mot de passe</label>
+                      <input className="form-control bg-danger text-muted" 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 className="form-group" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
+                      <label className="col-form-label text-primary">Confirmer le mot de passe</label>
+                      <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
+                      {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
                     </div>
-                    <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
+                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary">S'inscrire</button>
                   </form>
                 </div>
               </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Register.scss
--- a/client/src/components/Register.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Register.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -3,9 +3,10 @@
     font-weight: bolder;
 }
 
-.control-label {
+label.col-form-label.text-primary {
     font-size: 16px;
     margin-left: 20%;
+    font-weight: bolder;
 }
 
 .form-control {
@@ -26,8 +27,3 @@
     margin-top: 7%;
 }
 
-.text-center .text-muted {
-    color: #769FED;
-    font-size: 16px;
-    font-weight: bold;
-}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Session.js
--- a/client/src/components/Session.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Session.js	Fri Aug 31 15:14:18 2018 +0200
@@ -38,7 +38,7 @@
           <section className="editor-fixed">
             <div className="container-fluid">
               <div className="row">
-                <div className="col-md-9 col-md-offset-3">
+                <div className="col-lg-9 offset-md-3">
                   <NoteInput
                     session={this.props.currentSession}
                     autoSubmit={this.props.autoSubmit}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/SessionForm.js
--- a/client/src/components/SessionForm.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionForm.js	Fri Aug 31 15:14:18 2018 +0200
@@ -55,10 +55,10 @@
 
     return (
         <div className="panel-default">
-          <div className="panel-body">
+          <div className="card-body">
             <form onSubmit={ e => { e.preventDefault() } }>
               <div className="form-group">
-                <label className="control-label">Titre</label>
+                <label className="col-form-label text-primary">Titre</label>
                 <input className="form-control"
                   name="title"
                   defaultValue={ this.props.currentSession.title }
@@ -68,7 +68,7 @@
                 />
               </div>
               <div className="form-group">
-                <label className="control-label">Description</label>
+                <label className="col-form-label text-primary">Description</label>
                 <input className="form-control"
                   type="textarea"
                   name="description"
@@ -78,11 +78,11 @@
                 />
               </div>
               <div className="form-group">
-                <label className="control-label">Group</label>
+                <label className="col-form-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>
+                <label className="col-form-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>
                 <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
                   <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
                 </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionList.js	Fri Aug 31 15:14:18 2018 +0200
@@ -25,6 +25,10 @@
     this.hide = this.hide.bind(this);
   }
 
+  componentWillMount() {
+    Modal.setAppElement('body');
+}
+
   doSomething(e){
     e.preventDefault();
     console.log(e.target.innerHTML);
@@ -102,27 +106,27 @@
   render() {
     return (
       <div>
-      <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
         <Navbar history={this.props.history} />
         <div className="top-fade"></div>
+        <button id="session-button" type="button" className="btn btn-primary btn-lg text-secondary" onClick={ this.createSession}>Créer une nouvelle session</button>
         <div className="container-fluid">
           <div className="row">
                 {this.props.sessions.map((session) =>
                   <div>
-                      <div className="col-md-4 session" key={session.get('_id')}>
-                        <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
-                          <span className="session-title">{session.title || 'Session sans titre'}<br /></span>
+                      <div className="col-lg-4 session" key={session.get('_id')}>
+                        <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+                          <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span>
                           <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
-                          <span className="session-description">{session.description}<br /></span>
+                          <span className="session-description text-dark">{session.description}<br /></span>
                         </a>
-                        <button className="btn btn-link pull-left" key={session.get('_id')}  id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
+                        <button className="btn btn-link float-left" key={session.get('_id')}  id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
                           <span className="material-icons edit">edit</span>
                         </button>
                         {
                         this.state.show &&
                           (
-                        <button type="button" className="btn btn-link pull-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
-                        <span className="material-icons delete">delete</span>
+                        <button type="button" className="btn btn-link float-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
+                        <span className="material-icons delete text-dark">delete</span>
                         </button>
                           )
                         }
@@ -138,12 +142,10 @@
         onRequestClose={this.handleModalCloseRequest}
         >
           <div id="delete-session-modal" className="modal-content text-center">
-          <button type="button" id="delete-session-close-modal-button" className="btn btn-default pull-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
-            {/* <div className="modal-body"> */}
+            <button type="button" id="delete-session-close-modal-button" className="btn btn-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
             <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
-            {/* </div> */}
-            <div className="modal-footer">
-              <button type="button" className="btn btn-primary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
+            <div className="modal-footer text-center">
+              <button type="button" className="btn btn-primary text-secondary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
             </div>
           </div>
         </Modal>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/SessionList.scss
--- a/client/src/components/SessionList.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionList.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -4,7 +4,7 @@
 }
 
 a.sessions{
-    text-decoration: none;
+    cursor: pointer;
 }
 
 .session {
@@ -14,13 +14,11 @@
 }
 
 span.session-title {
-    color: #769FED;
     font-size: 20px;
     font-weight: 600;
 }
 
 span.session-description {
-    color:rgb(54, 54, 54);
     font-size: 12px;
     font-weight: 500
 }
@@ -39,7 +37,6 @@
 
 .delete{
     font-size: 16px;
-    color: black;
 }
 
 #delete-session-modal{
@@ -84,15 +81,16 @@
 
 #delete-session-close-modal-button{
     margin-top: -2.5%;
-    margin-right: -1%;
+    margin-left: 92%;
     background-color: transparent;
     border: transparent;
+    color: rgba(#769FED, .4);
 }
 
 #delete-session-close-modal-button:hover{
     background-color: transparent;
     border: transparent;
-    color: #769FED;
+    color:black;
 }
 
 .modal-text{
@@ -108,7 +106,3 @@
     width: 20%;
     font-size: 14px;
 }
-
-.modal-footer{
-    border: white;
-}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/SessionSummary.js
--- a/client/src/components/SessionSummary.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/SessionSummary.js	Fri Aug 31 15:14:18 2018 +0200
@@ -9,7 +9,7 @@
       <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>
+          <span className="float-right">{_.words(note.plain).length} words</span>
         </a>
       </li>
     )}
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Settings.js
--- a/client/src/components/Settings.js	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/components/Settings.js	Fri Aug 31 15:14:18 2018 +0200
@@ -4,6 +4,7 @@
 import '../App.css';
 import Navbar from './Navbar';
 import * as userActions from '../actions/userActions';
+import './Settings.css';
 
 class Settings extends Component {
 
@@ -25,11 +26,11 @@
         <Navbar history={this.props.history} />
         <div className="container-fluid">
           <div className="row">
-            <div className="col-md-6 col-md-offset-3">
+            <div className="col-lg-6 offset-md-3">
               <form>
                 <div className="form-group">
-                  <label className="control-label">Prénom</label>
-                  <input className="form-control"
+                  <label className="col-form-label text-primary">Prénom</label>
+                  <input className="form-control bg-danger text-muted"
                     name="firstname"
                     defaultValue={ firstname }
                     placeholder="Entrez un prénom"
@@ -37,8 +38,8 @@
                   />
                 </div>
                 <div className="form-group">
-                  <label className="control-label">Nom</label>
-                  <input className="form-control"
+                  <label className="col-form-label text-primary">Nom</label>
+                  <input className="form-control bg-danger text-muted"
                     name="lastname"
                     defaultValue={ lastname }
                     placeholder="Entrez un nom"
@@ -46,7 +47,7 @@
                   />
                 </div>
               </form>
-              <button type="submit" className="btn btn-primary btn-lg" onClick={this.updateSettings}>Enregistrer</button>
+              <button type="submit" className="btn btn-primary btn-lg text-secondary" onClick={this.updateSettings}>Enregistrer</button>
             </div>
           </div>
         </div>
diff -r 97536386b397 -r 57d63a248f0d client/src/components/Settings.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Settings.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,23 @@
+label.col-form-label.text-primary {
+    font-size: 16px;
+    margin-left: 20%;
+    font-weight: bolder;
+}
+
+.form-control {
+    width: 60%;
+    margin-left: 20%;
+}
+
+form {
+    padding-top: 10%;
+}
+
+button.btn.btn-primary {
+    font-size: 	18px;
+    font-weight: bold;
+    padding: 15px 15px;
+    width: 30%;
+    margin-left: 35%;
+    margin-top: 7%;
+}
diff -r 97536386b397 -r 57d63a248f0d client/src/index.scss
--- a/client/src/index.scss	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/src/index.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -1,5 +1,6 @@
-@import './sass/bootstrap-custom';
-@import './sass/material-font';
+@import './scss/custom';
+@import './scss/material-font';
+
 
 @font-face {
     font-family: 'Rubik';
@@ -16,6 +17,6 @@
 
 body {
   margin: 0;
-  padding-top: $navbar-height + $navbar-margin-bottom;
+    // padding-top: $navbar-height + $navbar-margin-bottom;
   font-family: 'Rubik', sans-serif;
 }
diff -r 97536386b397 -r 57d63a248f0d client/src/sass/_bootstrap-custom.scss
--- a/client/src/sass/_bootstrap-custom.scss	Wed Aug 29 11:02:36 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,87 +0,0 @@
-/*!
- * Bootstrap v3.3.7 (http://getbootstrap.com)
- * Copyright 2011-2016 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
-
-$btn-primary-bg : #769FED;
-$btn-primary-border : #769FED;
-
-//NavBar
-$navbar-inverse-bg : #769FED;
-$navbar-inverse-border : #769FED;
-$navbar-inverse-link-color : white;
-$navbar-inverse-link-active-bg : #769FED;
-$nav-link-padding : 30px 15px;
-$navbar-inverse-toggle-hover-bg : white;
-$dropdown-bg : #769FED;
-$dropdown-border : #769FED;
-$dropdown-link-color : white;
-$dropdown-link-active-color : #769FED;
-$dropdown-link-hover-color : #769FED;
-
-//Login and Register
-$panel-default-border : white;
-$panel-inner-border : white;
-$panel-default-heading-bg : white;
-$panel-default-text : black;
-$input-bg : rgba(196, 196, 196, 0.5);
-$input-bg-disabled : rgba(196, 196, 196, 0.5);
-$input-border : white;
-// $input-color : white;
-
-
-
-
-// Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-// Reset and dependencies
-@import "bootstrap/normalize";
-@import "bootstrap/print";
-@import "bootstrap/glyphicons";
-
-// Core CSS
-@import "bootstrap/scaffolding";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/grid";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/buttons";
-
-// Components
-@import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
-@import "bootstrap/button-groups";
-@import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
-@import "bootstrap/wells";
-@import "bootstrap/close";
-
-// Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
-
-// Utility classes
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
diff -r 97536386b397 -r 57d63a248f0d client/src/sass/_material-font.scss
--- a/client/src/sass/_material-font.scss	Wed Aug 29 11:02:36 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,45 +0,0 @@
-$material-icon-font-path: '~material-design-icons/iconfont/';
-
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
-  src: local('Material Icons'),
-    local('MaterialIcons-Regular'),
-    url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
-    url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
-    url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
-};
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
-
-.material-icons {
-    &.md-18 { font-size: 18px; }
-    &.md-24 { font-size: 24px; }
-    &.md-36 { font-size: 36px; }
-    &.md-48 { font-size: 48px; }
-}
diff -r 97536386b397 -r 57d63a248f0d client/src/scss/_custom.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_custom.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,35 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+$theme-colors: (
+  "primary": #769FED,
+  "secondary": white,
+  "danger": rgba(196, 196, 196, .5)
+);
+
+$link-color: theme-color("secondary");
+$link-hover-color: darken($link-color, 15%);
+
+$component-active-bg: theme-color("secondary");
+
+//Dropdowns
+$dropdown-padding-y: 1rem;
+$dropdown-link-color: theme-color("secondary");
+$dropdown-item-padding-y: .7rem;
+$dropdown-item-padding-x: .5rem;
+
+
+
+// Navs
+$nav-link-padding-y: .2rem;
+$navbar-brand-font-size: 30px;
+$navbar-light-color: darken((theme-color("secondary")), 2%);
+$navbar-light-hover-color: theme-color("secondary");
+$navbar-light-active-color: theme-color("secondary");
+$navbar-light-toggler-border-color: transparent;
+
+//Modals
+$modal-content-border-width: .1rem;
+
+
+@import "bootstrap/scss/bootstrap";
diff -r 97536386b397 -r 57d63a248f0d client/src/scss/_material-font.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_material-font.scss	Fri Aug 31 15:14:18 2018 +0200
@@ -0,0 +1,45 @@
+$material-icon-font-path: '~material-design-icons/iconfont/';
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
+    url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
+    url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
+};
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+.material-icons {
+    &.md-18 { font-size: 18px; }
+    &.md-24 { font-size: 24px; }
+    &.md-36 { font-size: 36px; }
+    &.md-48 { font-size: 48px; }
+}
diff -r 97536386b397 -r 57d63a248f0d client/yarn.lock
--- a/client/yarn.lock	Wed Aug 29 11:02:36 2018 +0200
+++ b/client/yarn.lock	Fri Aug 31 15:14:18 2018 +0200
@@ -1203,6 +1203,10 @@
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
+bootstrap@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -3858,6 +3862,10 @@
   dependencies:
     ms "^2.0.0"
 
+i18next@^11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-11.6.0.tgz#e0047aa3e3a0080f6f318426f90597cbb0d6ddd5"
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"