# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1538964559 -7200
# Node ID a642639dbc072f46700a388b03c1e07813aeba83
# Parent  183b128a41896e59dbf329966594112e0652c6e6
Split scss files and adapt session page design

diff -r 183b128a4189 -r a642639dbc07 client/src/App.scss
--- a/client/src/App.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/App.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -1,195 +1,13 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-.toolbar-menu {
-  padding-bottom: 10px;
-  border-bottom: 2px solid #eee;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  .button {
-    color: #ccc;
-    cursor: pointer;
-    margin-right: 10px;
-  }
-  .button[data-active="true"] {
-    color: black;
-  }
-  > *:last-child {
-    margin-left: auto;
-    .checkbox {
-        display: inline-block;
-        margin-right: 10px;
-    }
-  }
-}
-
-.navbar {
-    .material-icons {
-        font-size: 20px;
-        line-height: 20px;
-    }
-}
-
-.hovering-menu {
-    position: absolute;
-    z-index: 1;
-    top: -10000px;
-    left: -10000px;
-    margin-top: -20px;
-    opacity: 0;
-    transition: opacity .75s;
-}
-
-.categories-tooltip {
-    background-color: #efefef;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    padding: 5px;
-    .buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        button {
-            background-color: yellow;
-            border: 1px solid #ccc;
-        }
-        button:not(:last-child) {
-            margin-right: 10px;
-        }
-    }
-    .form-group:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.editor {
-  display: flex;
-  margin-bottom: 10px;
-  &-left {
-    width: 66.6666%;
-    border: 1px solid #efefef;
-    padding: 20px;
-  }
-  &-right {
-    width: 33.3333%;
-    padding-left: 20px;
-    .form-control {
-      height: 100%;
-    }
-  }
-}
-
-.session-container {
-    position: absolute;
-    top: 71px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    .session-notes {
-        overflow-y: hidden;
-        width: 100%;
-        display: flex;
-        flex: 1;
-        > * {
-            padding-left: ($grid-gutter-width / 2);
-            padding-right: ($grid-gutter-width / 2);
-        }
-        .notes-affix {
-            min-width: 25%;
-            > *:first-child {
-                max-height: calc(100% - 20px);
-                overflow-y: auto;
-            }
-        }
-        .notes-list {
-            min-width: 75%;
-            overflow-y: auto;
-        }
-    }
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.note {
-    display: flex;
-    position: relative;
-    padding: 20px 10px 20px 80px;
-    margin-bottom: 10px;
-    cursor: pointer;
-    // min-height: ($line-height-computed * 4);
-    border: 1px solid transparent;
-
-    &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 37px;
-        z-index: -1;
-        display: block;
-        width: 2px;
-        background-color: #e6ebf1;
-    }
-
-    &:hover {
-        border: 1px solid #efefef;
-    }
-
-    .start, .finish {
-        position: absolute;
-        background-color: #fff;
-    }
-
-    .start {
-        top: 0;
-        left: 0;
-        padding: 20px 0 0 10px;
-    }
-    .finish {
-        bottom: 0;
-        left: 0;
-        padding: 0 0 10px 10px;
-    }
-
-    &-content {
-        width: 66.6666%;
-    }
-
-    &-margin-comment {
-        width: 33.3333%;
-        padding-left: 15px;
-    }
-}
-
 span.annotation {
     background-color: yellow;
     text-decoration-line: underline;
     text-decoration-style: dotted;
 }
+
+.ReactModal__Overlay {
+    z-index: 1020;
+}
+
+a {
+    cursor: pointer;
+}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/CategoriesTooltip.js
--- a/client/src/components/CategoriesTooltip.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CategoriesTooltip.js	Mon Oct 08 04:09:19 2018 +0200
@@ -50,7 +50,7 @@
           {this.props.categories.map((category) =>
             <button type="button"
               key={ category.name }
-              className="btn btn-primary"
+              className="btn btn-sm text-secondary"
               style={{ backgroundColor: category.color }}
               active={ this.isCategoryActive(category)  }
               onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Clock.js
--- a/client/src/components/Clock.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Clock.js	Mon Oct 08 04:09:19 2018 +0200
@@ -23,7 +23,7 @@
 
   render() {
     return (
-      <span className="label label-info">{ this.state.time }</span>
+      <span className="text-warning bg-success">{ this.state.time }</span>
     );
   }
 }
diff -r 183b128a4189 -r a642639dbc07 client/src/components/CreateGroup.js
--- a/client/src/components/CreateGroup.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateGroup.js	Mon Oct 08 04:09:19 2018 +0200
@@ -88,12 +88,12 @@
                     </div>
                     <div className="form-group mb-2" /*validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }*/>
                       <label className="col-form-label text-secondary font-weight-bold mt-2">Description</label>
-                      <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe" row="3"></textarea>
+                      <textarea className="form-control bg-secondary text-primary border-0 w-100" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Entrez une description de groupe"></textarea>
                       {/* { this.renderErrorMessage(errorMessages, 'description') } */}
                     </div>
                     {/* { this.renderNonFieldErrors(errorMessages) } */}
                     <div className="text-center">
-                    <button type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled}>Créer</button>
+                    <button type="submit" value="Submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" disabled={okDisabled} onClick={this.submit}>Créer</button>
                     <button type="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button>
                     </div>
                   </form>
diff -r 183b128a4189 -r a642639dbc07 client/src/components/CreateSession.js
--- a/client/src/components/CreateSession.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateSession.js	Mon Oct 08 04:09:19 2018 +0200
@@ -78,14 +78,13 @@
       isOpen={this.state.modalIsOpen}
       onRequestClose={this.handleModalCloseRequest}
       >
-        <div className="modal-content bg-primary w-75">
-          <div className="modal-body">
+        <div className="modal-content bg-primary w-75 mt-5">
+          <div className="modal-body mt-3">
             <form onSubmit={ e => { e.preventDefault() } }>
               <div className="form-group">
                 <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
                 <input className="form-control text-primary w-100"
                   name="title"
-                  // defaultValue={ this.props.currentSession.title }
                   onChange={ this.onChange }
                   type="text"
                   placeholder="Entrez un titre"
@@ -96,16 +95,15 @@
                 <textarea className="form-control text-primary w-100"
                   type="textarea"
                   name="description"
-                  // defaultValue={ this.props.currentSession.description }
                   onChange={ this.onChange }
                   placeholder="Entrez une description"
                   ></textarea>
               </div>
               <div className="form-group">
                 <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" onClick={this.toggleProtocol}>Protocole de la prise de note {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':''}`} >
+                <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
                   {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
-                  <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
+                  <pre className="text-secondary">{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
                 </div>
               </div>
               <div className="text-center">
diff -r 183b128a4189 -r a642639dbc07 client/src/components/CreateSession.scss
--- a/client/src/components/CreateSession.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/CreateSession.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -3,7 +3,7 @@
 }
 
 #session-button {
-    font-size: 	22px;
+    font-size: 	1.5rem;
     cursor: pointer;
 }
 
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Login.js
--- a/client/src/components/Login.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Login.js	Mon Oct 08 04:09:19 2018 +0200
@@ -77,12 +77,12 @@
                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
                       <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
-                      <input className="form-control bg-danger text-muted" type="text" onChange={this.handleInputChange} name="username" />
+                      <input className="form-control bg-danger border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
                     </div>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
                       <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
-                      <input className="form-control bg-danger text-muted" type="password" onChange={this.handleInputChange} name="password" />
+                      <input className="form-control bg-danger border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
                       {/* { this.renderErrorMessage(errorMessages, 'password') } */}
                     </div>
                     {/* { this.renderNonFieldErrors(errorMessages) } */}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Navbar.js	Mon Oct 08 04:09:19 2018 +0200
@@ -149,7 +149,7 @@
           <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>
+                <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
               </li>
             </ul>
             <ul className="navbar-nav navbar-center">
@@ -169,7 +169,7 @@
             </ul>
           </div>
           <Modal
-          className="Modal__Bootstrap modal-dialog mt-5 pt-5"
+          className="Modal__Bootstrap modal-dialog modal-dialog-centered"
           // closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.handleModalCloseRequest}
@@ -177,13 +177,13 @@
             <div id="logout-modal" className="modal-content">
               <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
               <div className="modal-body text-center">
-              <span className="material-icons modal-warning">warning</span>
+              <span className="material-icons modal-warning text-info pb-5">warning</span>
                 <p className="modal-text">
-                  Certaines données n'ont pas encore été sauvegardées.
+                  Certaines sessions n'ont pas encore été sauvegardées.
                   <br />
                   Si vous continuez, elles seront perdues.
                 </p>
-              <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+              <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
               </div>
             </div>
           </Modal>
@@ -205,7 +205,7 @@
     isSynchronizing: isSynchronizing(state),
     isSynchronized: isSynchronized(state),
     currentGroup: getCurrentGroup(state),
-    groups: getGroups(state)
+    groups: getGroups(state),
   };
 }
 
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Navbar.scss
--- a/client/src/components/Navbar.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Navbar.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -88,10 +88,9 @@
 }
 
 .modal-warning{
-    color:#F95B5B;
-    font-size:60px;
+    font-size: 4rem;
 }
 
 #logout-modal-button {
-    font-size: 14px;
+    font-size: .9rem;
 }
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Note.js
--- a/client/src/components/Note.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Note.js	Mon Oct 08 04:09:19 2018 +0200
@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
+import './Note.css';
 
 class Note extends Component {
 
@@ -18,14 +19,14 @@
     const raw = this.refs.editor.asRaw();
     const html = this.refs.editor.asHtml();
     const categories = this.refs.editor.asCategories();
-    const marginComment = this.marginComment.value;
+    // const marginComment = this.marginComment.value;
 
     const data = {
       plain,
       raw,
       html,
       categories,
-      marginComment
+      // marginComment
     }
 
     this.props.onSave(this.props.note, data);
@@ -41,7 +42,7 @@
   renderNoteContent() {
     if (this.props.isEditing) {
       return (
-        <div className="note-content">
+        <div className="note-content w-100 pl-2 pt-2">
           <SlateEditor ref="editor"
             onButtonClick={ this.onClickButton }
             note={ this.props.note }
@@ -51,31 +52,33 @@
     }
 
     return (
-      <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
+      <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
     )
   }
 
-  renderNoteMarginComment() {
-    if (this.props.isEditing) {
-      return (
-        <div className="note-margin-comment">
-          <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; } } />
-            ref={(marginComment) => { this.marginComment = marginComment; }} />
-        </div>
-      )
-    }
+  // renderNoteMarginComment() {
+  //   if (this.props.isEditing) {
+  //     return (
+  //       <div className="row">
+  //       <div className="note-margin-comment w-25 mt-3">
+  //         <input type="text" className="form-control"
+  //           name="margin"
+  //           componentClass="textarea"
+  //           placeholder="Espace pour un commentaire de marge"
+  //           defaultValue={ this.props.note.marginComment }
+  //           // inputRef={ ref => { this.marginComment = ref; } } />
+  //           ref={(marginComment) => { this.marginComment = marginComment; }} />
+  //       </div>
+  //       </div>
+  //     )
+  //   }
 
-    return (
-      <div className="note-margin-comment">
-        <small className="text-muted">{ this.props.note.marginComment }</small>
-      </div>
-    )
-  }
+    // return (
+    //   <div className="note-margin-comment w-25 mt-5">
+    //     <small className="text-muted">{ this.props.note.marginComment }</small>
+    //   </div>
+    // )
+  // }
 
   renderNoteRight() {
     if (this.props.isEditing) {
@@ -95,13 +98,17 @@
 
   render() {
     return (
-      <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }>
-        <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
-        <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
+    <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1" onClick={ this.props.onClick }>
+      <div className="mr-5">
+        <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small>
+        <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small>
+      </div>
         { this.renderNoteContent() }
-        { this.renderNoteMarginComment() }
+        {/* { this.renderNoteMarginComment() } */}
+        <div className="float-right">
         { this.renderNoteRight() }
-      </div>
+        </div>
+    </div>
     );
   };
 }
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Note.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Note.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,52 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.note {
+    min-width: 95%;
+    display: flex;
+    position: relative;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    min-height: ($line-height-base * 4);
+
+    &:before {
+        content: "";
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+        display: block;
+        width: 2px;
+    }
+
+    &:hover {
+        // opacity: .6;
+        border-bottom-color: black;
+    }
+
+    .start, .finish {
+        position: absolute;
+        padding-right: 5rem;
+        font-size: .72rem;
+    }
+
+    .start {
+        top: 0;
+        left: 0;
+    }
+    .finish {
+        bottom: 0;
+        left: 0;
+    }
+
+    &-content {
+        min-width: 95%;
+        font-size: .8rem;
+
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
+}
+
diff -r 183b128a4189 -r a642639dbc07 client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NoteInput.js	Mon Oct 08 04:09:19 2018 +0200
@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
 import { now } from '../utils';
-
+import './NoteInput.css';
 
 class NoteInput extends Component {
 
@@ -35,9 +35,11 @@
       startedAt: this.state.startedAt,
       finishedAt: now(),
       categories: categories,
+
       // marginComment: marginComment,
     });
 
+
     this.refs.editor.clear();
     setTimeout(() => this.refs.editor.focus(), 250);
   }
@@ -54,8 +56,8 @@
   render() {
     return (
       <form>
-        <div className="editor p-3 mb-3">
-          <div className="editor-left w-100 border-0 pl-3 pb-3 sticky-bottom">
+        <div className="editor mb-3">
+          <div className="editor-left sticky-bottom px-2">
             <SlateEditor ref="editor"
               onChange={this.onEditorChange}
               onEnterKeyDown={this.onAddNoteClick}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/NoteInput.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/NoteInput.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,26 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.editor {
+    display: flex;
+    &-left {
+        border: .125rem solid;
+        // border-color: transparent;
+        border-color: #769FED;
+        border-radius: .5rem;
+        max-height: 8.5rem;
+        height: 8.5rem;
+        width: 97%;
+        overflow-y: auto;
+    }
+    // &-left:hover {
+    //     border-color: #769FED;
+    // }
+
+    // &-right {
+    //     white-space: pre-wrap;
+    //     overflow-wrap: break-word;
+    //     .form-control {
+    //     min-width: 25%;
+    //   }
+}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/NoteList.scss
--- a/client/src/components/NoteList.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NoteList.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -49,9 +49,9 @@
 }
 
 .modal-text{
-    font-size: 16px;
+    font-size: .9rem;
 }
 
 #delete-note-modal-button {
-    font-size: 14px;
+    font-size: .8rem;
 }
diff -r 183b128a4189 -r a642639dbc07 client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/NotesList.js	Mon Oct 08 04:09:19 2018 +0200
@@ -21,12 +21,6 @@
     }
   }
 
-  // componentDidUpdate(prevProps) {
-  //   if (this.props.notes.size > prevProps.notes.size) {
-  //   this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
-  //   }
-  // }
-
   componentWillMount() {
     Modal.setAppElement('body');
 }
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Register.js
--- a/client/src/components/Register.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Register.js	Mon Oct 08 04:09:19 2018 +0200
@@ -52,22 +52,22 @@
                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
                       <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
-                      <input className="form-control bg-danger text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
+                      <input className="form-control bg-danger border-0 text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
                     </div>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
                       <label className="col-form-label text-primary font-weight-bold mt-2">Email</label>
-                      <input className="form-control bg-danger text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
+                      <input className="form-control bg-danger border-0 text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'email') } */}
                     </div>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
                       <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
-                      <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
+                      <input className="form-control bg-danger border-0 text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'password1') } */}
                     </div>
                     <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
                       <label className="col-form-label text-primary font-weight-bold mt-2">Confirmer le mot de passe</label>
-                      <input className="form-control bg-danger text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
+                      <input className="form-control bg-danger border-0 text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
                     </div>
                     <div className="text-center mr-5 pr-5">
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Session.js
--- a/client/src/components/Session.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Session.js	Mon Oct 08 04:09:19 2018 +0200
@@ -2,6 +2,7 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import '../App.css';
+import './Session.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
 import NotesList from './NotesList';
@@ -21,12 +22,11 @@
         <Navbar history={this.props.history} />
         <div className="session-container">
           <div className="session-notes">
-            <div className="notes-affix">
-              <SessionSummary notes={this.props.notes} />
-            </div>
+          <div className="notes-affix">
+            <SessionSummary notes={this.props.notes} />
+          </div>
             <div className="notes-list">
               <SessionForm session={this.props.currentSession} />
-              <hr />
               <NotesList
                 notes={this.props.notes}
                 deleteNote={this.props.notesActions.deleteNote}
@@ -34,11 +34,11 @@
                 annotationCategories={this.props.annotationCategories}
               />
             </div>
-          </div>
-          <section className="editor-fixed">
+        </div>
+          <section className="editor-fixed pl-5">
             <div className="container-fluid">
               <div className="row">
-                <div className="col-lg-9 offset-md-3">
+                <div className="col-lg-10 offset-md-2">
                   <NoteInput
                     session={this.props.currentSession}
                     autoSubmit={this.props.autoSubmit}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/Session.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Session.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,38 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+  .session-container {
+    position: absolute;
+    top: 4rem;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    // justify-content: flex-end;
+    justify-content: flex;
+    overflow-y: hidden;
+    .session-notes {
+        overflow-y: hidden;
+        width: 100%;
+        display: flex;
+        flex: 1;
+        > * {
+            padding-left: ($grid-gutter-width / 2);
+            padding-right: ($grid-gutter-width / 2);
+        }
+         .notes-affix {
+             min-width: 17%;
+             max-width: 17%;
+             > *:first-child {
+                 max-height: calc(100%);
+                 overflow-y: auto;
+             }
+        }
+        .notes-list {
+            width: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+    }
+}
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SessionForm.js
--- a/client/src/components/SessionForm.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionForm.js	Mon Oct 08 04:09:19 2018 +0200
@@ -11,26 +11,37 @@
 
   state = {
     createGroup: false,
-    protocolOpen: false
-  }
-
-  onChange = (e) => {
-    const { name, value } = e.target;
-    const changes = { [name]: value }
-    this.onChangeThrottle(changes);
+    protocolOpen: false,
+    titleEditMode: false,
+    descriptionEditMode: false,
+    enterKeyValue: false,
   }
 
-  onChangeThrottle = _.debounce((changes) => {
-    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
-  }, 750)
+onChange = (e) => {
+  const { name, value } = e.target;
+  const changes = { [name]: value }
+  this.onChangeThrottle(changes);
+}
+
+onChangeThrottle = _.debounce((changes) => {
+  this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+}, 750)
+
+onGroupChange = (e) => {
+  const groupName = e.target.value;
 
-  onGroupChange = (e) => {
-    const groupName = e.target.value;
+  const group = this.props.groups.find((g) => g.get('name') === groupName);
+
+  this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
+}
 
-    const group = this.props.groups.find((g) => g.get('name') === groupName);
+componentDidMount() {
+  document.addEventListener('mousedown', this.handleClickOutside);
+}
 
-    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
-  }
+componentWillUnmount() {
+  document.removeEventListener('mousedown', this.handleClickOutside);
+}
 
   componentWillUpdate = (nextProps, nextState) => {
     if (nextState.createGroup && nextProps.createGroup.get('success')) {
@@ -45,6 +56,129 @@
     });
   }
 
+  toggleOnTitleEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      titleEditMode: true,
+    });
+  }
+
+  toggleOnDescriptionEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      descriptionEditMode: true,
+    });
+  }
+
+  toggleOffTitleEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      titleEditMode: false,
+    });
+  }
+
+  toggleOffDescriptionEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      descriptionEditMode: false,
+    });
+  }
+
+  handleClickOutside = (e) => {
+    if (this.title && !this.title.contains(e.target)) {
+      this.toggleOffTitleEditMode(e)
+    }
+
+    if (this.desc && !this.desc.contains(e.target)) {
+      this.toggleOffDescriptionEditMode(e)
+    }
+  }
+
+  saveEdit = (e) => {
+
+    e.preventDefault();
+
+    if (e.key === 'Enter') {
+      this.setState({enterKeyValue: true})
+    }
+
+    if (e.key !== 'Enter') {
+      this.setState({enterKeyValue: false})
+    }
+
+    if (e.key === 'Enter' && this.state.enterKeyValue === true) {
+
+      e.preventDefault();
+      this.setState({
+        enterKeyValue: false,
+        titleEditMode: false,
+        descriptionEditMode: false,
+      })
+    }
+  }
+
+  titleEditMode = () => {
+
+    if (this.state.titleEditMode === false) {
+      return (
+      <div
+        onClick={this.toggleOnTitleEditMode}
+        className='session-page-title border-0 bg-success text-muted ml-3'
+      >
+        { this.props.currentSession.title || 'Espace titre' }
+      </div>
+    );
+    }
+
+    if (this.state.titleEditMode === true) {
+    return (
+    <div className="form-group pr-5">
+      <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3'
+        onKeyDown={ this.saveEdit }
+        onChange={ this.onChange }
+        type="textarea"
+        name="title"
+        defaultValue={ this.props.currentSession.title || 'Espace titre' }
+        placeholder="Espace titre"
+        ref={title => this.title = title}
+      >
+      </textarea>
+    </div>
+    );
+    }
+  }
+
+  descriptionEditMode = () => {
+
+  if (this.state.descriptionEditMode === false) {
+    return (
+    <div
+      onClick={this.toggleOnDescriptionEditMode}
+      className="session-page-description border-0 bg-success text-muted ml-3"
+    >
+      { this.props.currentSession.description || 'Espace description' }
+    </div>
+  );
+  }
+
+  if (this.state.descriptionEditMode === true) {
+  return (
+    <div className="form-group mt-2 pb-2">
+    <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3"
+      onKeyDown={ this.saveEdit }
+      onChange={ this.onChange }
+      type="textarea"
+      name="description"
+      defaultValue={ this.props.currentSession.description || 'Espace description' }
+      placeholder="Espace description"
+      ref={desc => this.desc = desc}
+    >
+    </textarea>
+  </div>
+  );
+  }
+}
+
   render() {
 
     if (!this.props.currentSession) {
@@ -54,39 +188,21 @@
     }
 
     return (
-        <div className="panel-default">
-          <div className="card-body">
+        <div className="session-page-panel panel-default sticky-top">
+          <div className="session-page-card card-body bg-secondary pr-5">
             <form onSubmit={ e => { e.preventDefault() } }>
-              <div className="form-group">
-                <label className="col-form-label text-primary">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="col-form-label text-primary">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">
+              {this.titleEditMode()}
+              {this.descriptionEditMode()}
+              {/* <div className="form-group">
                 <label className="col-form-label">Group</label>
                 <p>{this.props.currentSession.group}</p>
-              </div>
-              <div className="form-group">
+              </div> */}
+              {/* <div className="form-group">
                 <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':''}`} >
+                <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
                   <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
                 </div>
-              </div>
+              </div> */}
             </form>
           </div>
         </div>
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SessionForm.scss
--- a/client/src/components/SessionForm.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionForm.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -2,3 +2,37 @@
     font-size: 1rem;
     cursor: pointer;
 }
+
+.session {
+
+    &-page-panel {
+        z-index: 5;
+    }
+
+    &-page-card {
+        background: linear-gradient(white, transparent);
+    }
+
+    &-page-title{
+        font-size: 1.8rem;
+        resize: auto;
+        font-weight: bolder;
+        overflow: hidden;
+        height: auto;
+        transition: height 0.2s ease;
+        box-sizing: border-box;
+        line-height: 1.1;
+    }
+
+    &-page-description{
+        font-size: .9rem;
+        resize: auto;
+        overflow: hidden;
+        height: auto;
+        transition: height 0.2s ease;
+        box-sizing: border-box;
+    }
+}
+
+
+
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SessionSummary.js
--- a/client/src/components/SessionSummary.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionSummary.js	Mon Oct 08 04:09:19 2018 +0200
@@ -1,16 +1,18 @@
 import React from 'react';
 import _ from 'lodash';
 import '../App.css';
+import './SessionSummary.css'
 import {formatTimestamp} from '../utils';
 
 const SessionSummary = ({notes}) => (
-  <ul className="list-group">
+  <ul className="list-group sticky-left">
     {notes.map((note) =>
-      <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="float-right">{_.words(note.plain).length} words</span>
-        </a>
+      <li className="list-group-item border-0" key={note.get('_id')}>
+          <a href={'#note-' + note.get('_id')}>
+            <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.startedAt)}</small>
+            <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
+            <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
+          </a>
       </li>
     )}
   </ul>
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SessionSummary.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionSummary.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,10 @@
+.note {
+    &-length {
+    color: black;
+    font-size: .6rem;
+    }
+    &-time {
+        font-size: .7rem;
+    }
+}
+
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SlateEditor.js	Mon Oct 08 04:09:19 2018 +0200
@@ -7,7 +7,7 @@
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
 import CategoriesTooltip from './CategoriesTooltip'
-// import './SlateEditor.css';
+import './SlateEditor.css';
 import { now } from '../utils';
 import { defaultAnnotationsCategories } from '../constants';
 
diff -r 183b128a4189 -r a642639dbc07 client/src/components/SlateEditor.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SlateEditor.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -0,0 +1,58 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.toolbar-menu {
+      align-items: center;
+  .button {
+    cursor: pointer;
+  }
+  .material-icons {
+    font-size: 1.3rem;
+  }
+//   .button[data-active="true"] {
+//   }
+  > *:last-child {
+    margin-left: auto;
+    // .checkbox {
+    //     display: inline-block;
+    //     margin-right: 10px;
+    // }
+  }
+}
+
+#btn-editor {
+    padding: .1rem .2rem .1rem .2rem;
+    font-size: .8rem;
+  }
+
+.hovering-menu {
+    position: absolute;
+    z-index: 1;
+    top: -10000px;
+    left: -10000px;
+    margin-top: -20px;
+    opacity: 0;
+    transition: opacity .75s;
+}
+
+.categories-tooltip {
+    background-color: #efefef;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    padding: 5px;
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        button {
+            background-color: yellow;
+            border: 1px solid #ccc;
+        }
+        button:not(:last-child) {
+            margin-right: 10px;
+        }
+    }
+    .form-group:last-child {
+        margin-bottom: 0;
+    }
+}
diff -r 183b128a4189 -r a642639dbc07 client/src/scss/_custom.scss
--- a/client/src/scss/_custom.scss	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/scss/_custom.scss	Mon Oct 08 04:09:19 2018 +0200
@@ -4,9 +4,16 @@
 $theme-colors: (
   "primary": #769FED,
   "secondary": white,
-  "danger": rgba(196, 196, 196, .5)
+  "danger": rgba(196, 196, 196, .5),
+  "warning": #C4C4C4,
+  "success": transparent,
+  "info": #F95B5B,
 );
 
+$line-height-base: 1.3;
+$font-weight-normal: 500;
+$spacer: .5rem;
+
 $link-color: theme-color("secondary");
 $link-hover-color: darken($link-color, 15%);