# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1535997734 -7200
# Node ID a28361bda28cca20aa3d56d43300230ce37af359
# Parent  de8d18c8251db9f67befd08715083c06b8fdffb3
Adapt all css classes with Bootstrap 4 Utilities

diff -r de8d18c8251d -r a28361bda28c client/src/App.js
--- a/client/src/App.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/App.js	Mon Sep 03 20:02:14 2018 +0200
@@ -9,11 +9,11 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <div className="container-fluid">
+        <div className="container-fluid"></div>
           <div className="row">
-            <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 className="col-lg-6 offset-md-3 text-center mt-5 pt-5">
+              <h5 className="font-weight-bold text-center text-lg mt-5">Bienvenue sur</h5>
+              <h4 className="font-weight-bold text-center text-lg">IRI Notes</h4>
           </div>
         </div>
       </div>
diff -r de8d18c8251d -r a28361bda28c client/src/App.scss
--- a/client/src/App.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/App.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -194,27 +194,5 @@
     text-decoration-style: dotted;
 }
 
-.editor-fixed {
-    border-top: 1px solid #efefef;
-    background-color: #fff;
-    padding: 20px 0;
-}
-
-.panel-login,
-.panel-register {
-    margin-top: 60px;
-}
-
-#home-text{
-    color:black;
-    font-size: 70px;
-    font-weight: bolder;
-    background-color:white;
-    border-color:white;
-}
-
-#welcome {
-    font-size: 25px;
-    font-weight: bolder;
 
 }
diff -r de8d18c8251d -r a28361bda28c client/src/components/CreateGroup.js
--- a/client/src/components/CreateGroup.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateGroup.js	Mon Sep 03 20:02:14 2018 +0200
@@ -5,6 +5,7 @@
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 import { getOnline, getCreateGroup } from '../selectors/authSelectors';
+import './CreateGroup.css';
 
 class CreateGroup extends Component {
 
@@ -67,7 +68,7 @@
 
   render() {
 
-    const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
+    // const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
     const okDisabled = (!this.state.name || this.state.name.trim() === "");
 
     return (
@@ -75,25 +76,25 @@
         <Navbar history={this.props.history} />
         <div className="container-fluid">
             <div className="row">
-              <div className="col-lg-6 offset-md-3">
-                <div className="panel-login panel panel-default">
-                  <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="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 className="col-lg-6 offset-md-5">
+                <div className="panel-login panel panel-default d-flex justify-content-end">
+                  <div className="card-header bg-primary w-50">
+                  <h5 className="text-center text-secondary font-weight-bold">Nouveau groupe</h5>
+                  <form className="mt-3" onSubmit={this.submit}>
+                    <div className="form-group mb-2" /*validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }*/>
+                      <label className="col-from-label text-secondary font-weight-bold mt-2">Nom</label>
+                      <input className="form-control bg-secondary text-primary border-0 w-100" type="text" onChange={this.handleInputChange} name="name" placeholder="Entrez un nom de groupe"/>
+                      {/* { this.renderErrorMessage(errorMessages, 'name') } */}
                     </div>
-                    <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
-                      <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 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>
+                      {/* { 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-secondary btn-lg btn-block" onClick={this.cancel}>Annuler</button></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="button" className="btn btn-danger text-muted btn-lg font-weight-bold" onClick={this.cancel}>Annuler</button>
                     </div>
                   </form>
                 </div>
diff -r de8d18c8251d -r a28361bda28c client/src/components/CreateGroup.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/CreateGroup.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -0,0 +1,7 @@
+div.card-header.bg-primary.w-50 {
+    border-radius: 0% 0% 3% 3%;
+}
+
+#session-button:hover{
+    font-weight: bolder;
+}
diff -r de8d18c8251d -r a28361bda28c client/src/components/CreateSession.js
--- a/client/src/components/CreateSession.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateSession.js	Mon Sep 03 20:02:14 2018 +0200
@@ -140,24 +140,23 @@
 
     return (
       <div>
-      {/* <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={ this.openModal}>Créer une nouvelle session</button> */}
-      <a id="session-button" onClick={this.openSessionModal}>Créer une nouvelle session</a>
+      <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
       <Modal
-      className="Modal__Bootstrap modal-dialog bg-primary"
+      className="Modal__Bootstrap modal-dialog"
       // closeTimeoutMS={150}
       isOpen={this.state.modalIsOpen}
       onRequestClose={this.handleModalCloseRequest}
       >
-        <div className="panel-default">
-          <div className="card-body rouded-bottom">
+        <div className="modal-content bg-primary w-75">
+          <div className="modal-body">
             <form onSubmit={ e => { e.preventDefault() } }>
-            <div className="form-group">
-                <label className="col-form-label text-secondary">Group</label>
+            <div className="form-group ml-5 pl-5">
+                <label className="col-form-label text-secondary">Groupe</label>
                 {/* <p>{this.props.currentSession.group}</p> */}
               </div>
               <div className="form-group">
-                <label className="col-form-label text-secondary">Titre</label>
-                <input className="form-control text-primary"
+                <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 }
@@ -166,24 +165,24 @@
                 />
               </div>
               <div className="form-group">
-                <label className="col-form-label text-secondary">Description</label>
-                <input className="form-control text-primary"
+                <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3">Description</label>
+                <textarea className="form-control text-primary w-100"
                   type="textarea"
                   name="description"
                   // defaultValue={ this.props.currentSession.description }
                   onChange={ this.onChange }
                   placeholder="Entrez une description"
-                />
+                  row="3"></textarea>
               </div>
               <div className="form-group">
-                <label className="col-form-label text-secondary" 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>
+                <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':''}`} >
                   {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
                   <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
                 </div>
               </div>
               <div className="text-center">
-              <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary" onClick={this.createSession}>Commencer</button>
+              <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary font-weight-bold m-3" onClick={this.createSession}>Commencer</button>
               </div>
             </form>
           </div>
diff -r de8d18c8251d -r a28361bda28c client/src/components/CreateSession.scss
--- a/client/src/components/CreateSession.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/CreateSession.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -4,23 +4,10 @@
 
 #session-button {
     font-size: 	22px;
-    font-weight: bold;
     cursor: pointer;
 }
 
-label.col-form-label.text-secondary {
-    font-size: 16px;
-    margin-left: 20%;
-    font-weight: bolder;
-}
-
 .material-icons.protocol-toggle {
     font-size: 1rem;
     cursor: pointer;
 }
-
-#create-button{
-    font-weight: bold;
-    margin: 5%;
-
-}
diff -r de8d18c8251d -r a28361bda28c client/src/components/Login.js
--- a/client/src/components/Login.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Login.js	Mon Sep 03 20:02:14 2018 +0200
@@ -72,21 +72,23 @@
           <div className="row">
             <div className="col-lg-6 offset-md-3">
               <div className="panel-login panel panel-default">
-                <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="col-form-label text-primary">Nom d'utilisateur</label>
+                <div className="card-header bg-secondary border-0 mt-5 pt-5">
+                  <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4>
+                  <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" />
                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
                     </div>
-                    <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
-                      <label className="col-form-label text-primary">Mot de passe</label>
+                    <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" />
                       {/* { this.renderErrorMessage(errorMessages, 'password') } */}
                     </div>
                     {/* { this.renderNonFieldErrors(errorMessages) } */}
-                    <button type="submit" className="btn btn-primary btn-lg text-secondary">Se connecter</button>
+                    <div className="text-center mr-5 pr-5">
+                    <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button>
+                    </div>
                   </form>
                 </div>
               </div>
diff -r de8d18c8251d -r a28361bda28c client/src/components/Login.scss
--- a/client/src/components/Login.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Login.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,28 +1,8 @@
-h4.text-center {
-    font-size: 50px;
-    font-weight: bolder;
-}
-
 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 de8d18c8251d -r a28361bda28c client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Navbar.js	Mon Sep 03 20:02:14 2018 +0200
@@ -137,7 +137,7 @@
       <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>
+        <a 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>
@@ -153,7 +153,7 @@
             </ul>
             <ul className="navbar-nav navbar-center">
                 <li className="nav-item text-secondary">
-                  {/* <CreateSession history={this.props.history}/> */}
+                  <CreateSession history={this.props.history}/>
                 </li>
             </ul>
             <ul className="nav navbar-nav ml-auto">
@@ -164,28 +164,26 @@
             </ul>
           </div>
           <Modal
-          className="Modal__Bootstrap modal-dialog"
+          className="Modal__Bootstrap modal-dialog mt-5 pt-5"
           // closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.handleModalCloseRequest}
           >
-            <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 float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+            <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>
                 <p className="modal-text">
                   Certaines données n'ont pas encore été sauvegardées.
                   <br />
                   Si vous continuez, elles seront perdues.
                 </p>
-              <div className="modal-footer">
-              <button type="button" className="btn btn-primary text-secondary" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+              <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>
               </div>
             </div>
           </Modal>
         </div>
       </nav>
-
     );
   }
 }
diff -r de8d18c8251d -r a28361bda28c client/src/components/Navbar.scss
--- a/client/src/components/Navbar.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Navbar.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -6,23 +6,12 @@
     color: white;
 }
 
-#brand {
-    margin-top: 5px;
-}
-
 .username#navbarDropdown {
     font-size: 24px;
-    font-weight: medium;
-    margin-top:2%;
 }
 
 .nav-link {
     font-size: 20px;
-    margin-top: 8px;
-}
-
-#sync-button {
-    margin-top: 7px;
 }
 
 .dropdown-toggle{
@@ -31,7 +20,6 @@
 
 .dropdown-item {
     font-size: 18px;
-    font-weight: bold;
     cursor: pointer;
 }
 
@@ -42,34 +30,14 @@
 }
 
 .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 {
+.nav-link .dropdown-toggle .username .font-weight-bold {
     font-size: 18px;
-    font-weight: bold;
-
-}
-
-.ReactModal__Overlay {
-    margin-top: 5%;
-}
-
-.modal-footer .btn {
-    margin-top: 40px;
-    padding: 16px;
-    font-weight: bold;
 }
 
 #logout-modal{
-    padding-top: 2%;
-    margin-top: 20%;
-
     -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 0.5s; /* Firefox < 16 */
         -ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -107,11 +75,10 @@
 }
 
 #logout-close-modal-button{
-    margin-top: -2.5%;
-    margin-left: 92%;
     background-color: transparent;
     border: transparent;
     color: rgba(#769FED, .4);
+    cursor: pointer;
 }
 
 #logout-close-modal-button:hover{
@@ -120,24 +87,11 @@
     color:black;
 }
 
-.modal-text{
-    margin-top: 10%;
-    font-size: 16px;
-    font-weight: 500;
-}
-
 .modal-warning{
     color:#F95B5B;
     font-size:60px;
-    padding:0;
-    margin-top: 5%;
-    margin-right: 3%;
 }
 
 #logout-modal-button {
-    padding: 1.5%;
-    margin-top: 5%;
-    margin-right: 40%;
-    width: 20%;
     font-size: 14px;
 }
diff -r de8d18c8251d -r a28361bda28c client/src/components/NavbarGroup.js
--- a/client/src/components/NavbarGroup.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NavbarGroup.js	Mon Sep 03 20:02:14 2018 +0200
@@ -48,11 +48,11 @@
           { currentGroupName }
           &nbsp;<span className="caret"></span>
           </a>
-          <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right bg-primary border-0 ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
+          <div id="group-menu-scroll-down" className={`dropdown-menu dropdown-menu-right shadow py-1 pt-3 mb-5 mt-2 bg-secondary border border-primary ${this.state.showDropdown?'show':''}`} aria-labelledby="navbarDropdown">
           { groups && groups.map((group, key) => {
             const groupName = group.get('name');
             const className = (groupName === currentGroupName)?'active':null;
-              return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-primary text-secondary ${className}`} data-groupname={groupName}>{ groupName }</a>
+              return <a key={key} onClick={onClickGroup} className={`dropdown-item bg-secondary text-primary font-weight-bold ${className}`} data-groupname={groupName}>{ groupName }</a>
             })
           }
           <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>
diff -r de8d18c8251d -r a28361bda28c client/src/components/NavbarLogin.js
--- a/client/src/components/NavbarLogin.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NavbarLogin.js	Mon Sep 03 20:02:14 2018 +0200
@@ -49,13 +49,13 @@
       return (
 
         <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}>
+          <a name className="nav-link dropdown-toggle username font-weight-bold" 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>
           <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>
+            <a className="dropdown-item bg-primary text-secondary font-weight-bold" onClick={this.onClickSettings}>Paramètres</a>
+            <a className="dropdown-item bg-primary text-secondary font-weight-bold" onClick={onLogout}>Se déconnecter</a>
           </div>
         </li>
       );
diff -r de8d18c8251d -r a28361bda28c client/src/components/NoteList.scss
--- a/client/src/components/NoteList.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NoteList.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,7 +1,4 @@
 #delete-note-modal{
-    padding-top: 2%;
-    margin-top: 30%;
-
     -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 0.5s; /* Firefox < 16 */
         -ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -39,11 +36,10 @@
 }
 
 #delete-note-close-modal-button{
-    margin-top: -2.5%;
-    margin-left: 92%;
     background-color: transparent;
     border: transparent;
     color: rgba(#769FED, .4);
+    cursor: pointer;
 }
 
 #delete-note-close-modal-button:hover {
@@ -53,19 +49,9 @@
 }
 
 .modal-text{
-    margin-top: 10%;
     font-size: 16px;
-    font-weight: 500;
 }
 
 #delete-note-modal-button {
-    padding: 1.5%;
-    margin-top: 5%;
-    margin-right: 40%;
-    width: 20%;
     font-size: 14px;
 }
-
-.modal-footer{
-    border: white;
-}
diff -r de8d18c8251d -r a28361bda28c client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/NotesList.js	Mon Sep 03 20:02:14 2018 +0200
@@ -88,20 +88,19 @@
         )}
 
         <Modal
-        className="Modal__Bootstrap modal-dialog"
+        className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
         // closeTimeoutMS={150}
         isOpen={this.state.modalIsOpen}
         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-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+          <div id="delete-note-modal" className="modal-content">
+            <span id="delete-note-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+            <div className="modal-body text-center">
             <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 text-secondary" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
+              <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
             </div>
           </div>
         </Modal>
-
       </div>
     );
   }
diff -r de8d18c8251d -r a28361bda28c client/src/components/Register.js
--- a/client/src/components/Register.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Register.js	Mon Sep 03 20:02:14 2018 +0200
@@ -47,30 +47,32 @@
           <div className="row">
             <div className="col-lg-6 offset-md-3">
               <div className="panel-login panel panel-default">
-                <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="col-form-label text-primary">Nom d'utilisateur</label>
+                <div className="card-header bg-secondary border-0 mt-5 pt-5">
+                  <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>IRI Notes</h4>
+                  <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; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
                     </div>
-                    <div className="form-group" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary">Email</label>
+                    <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; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'email') } */}
                     </div>
-                    <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary">Mot de passe</label>
+                    <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; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'password1') } */}
                     </div>
-                    <div className="form-group" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary">Confirmer le mot de passe</label>
+                    <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; }}*/ />
                       {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
                     </div>
-                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary">S'inscrire</button>
+                    <div className="text-center mr-5 pr-5">
+                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">S'inscrire</button>
+                    </div>
                   </form>
                 </div>
               </div>
diff -r de8d18c8251d -r a28361bda28c client/src/components/Register.scss
--- a/client/src/components/Register.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Register.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,29 +1,8 @@
-h4.text-center {
-    font-size: 50px;
-    font-weight: bolder;
-}
-
 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 de8d18c8251d -r a28361bda28c client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.js	Mon Sep 03 20:02:14 2018 +0200
@@ -13,17 +13,11 @@
 
 class SessionList extends Component {
 
-  constructor(props) {
-    super(props);
-      this.state = {
+  state = {
       show: false,
       modalIsOpen: false,
       sessionToDelete: null,
     }
-    this.doSomething = this.doSomething.bind(this);
-    this.toggleShow = this.toggleShow.bind(this);
-    this.hide = this.hide.bind(this);
-  }
 
   componentWillMount() {
     Modal.setAppElement('body');
@@ -34,17 +28,6 @@
     console.log(e.target.innerHTML);
   }
 
-  toggleShow(){
-    this.setState({show: !this.state.show});
-  }
-
-  hide(e){
-    if(e && e.relatedTarget){
-      e.relatedTarget.click();
-    }
-    this.setState({show: false});
-  }
-
   openModal = () => {
     this.setState({modalIsOpen: true});
   }
@@ -107,45 +90,36 @@
     return (
       <div>
         <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>
+        {/* <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">
+          <div className="row mt-5 pt-5">
                 {this.props.sessions.map((session) =>
-                  <div>
-                      <div className="col-lg-4 session" key={session.get('_id')}>
+                  <div className="col-lg-4" id="session">
+                      <div className="col-md-auto m-4 p-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 text-dark">{session.description}<br /></span>
                         </a>
-                        <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 type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }>
+                          <span className="material-icons delete text-dark">delete</span>
                         </button>
-                        {
-                        this.state.show &&
-                          (
-                        <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>
-                          )
-                        }
                       </div>
                   </div>
                 )}
             </div>
           </div>
         <Modal
-        className="Modal__Bootstrap modal-dialog"
+        className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
         // closeTimeoutMS={150}
         isOpen={this.state.modalIsOpen}
         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-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+          <div id="delete-session-modal" className="modal-content">
+            <span id="delete-session-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+            <div className="modal-body text-center">
             <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
-            <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>
+              <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
             </div>
           </div>
         </Modal>
diff -r de8d18c8251d -r a28361bda28c client/src/components/SessionList.scss
--- a/client/src/components/SessionList.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,34 +1,56 @@
-.top-fade {
-    width: max-content;
-    height: 80px;
-}
-
 a.sessions{
     cursor: pointer;
 }
 
-.session {
-    padding-top: 5%;
-    padding-bottom: 1%;
-    padding-left: 5%;
+#delete {
+    // opacity: 0;
+    // display: none;
+    -webkit-transition: .5s all;
+    -webkit-transition-delay: 5s;
+    -moz-transition: .5s all;
+    -moz-transition-delay: 5s;
+    -ms-transition: .5s all;
+    -ms-transition-delay: 5s;
+    -o-transition: .5s all;
+    -o-transition-delay: 5s;
+    transition: .5s all;
+    transition-delay: 5s;
 }
 
+#delete:hover {
+    // opacity: 1;
+    display: inline-block;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    -ms-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.sessions:hover ~ #delete {
+    // opacity: 1;
+    display: inline-block;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    -ms-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.sessions:hover {
+    opacity: .7;
+}
+
+
 span.session-title {
     font-size: 20px;
-    font-weight: 600;
 }
 
 span.session-description {
     font-size: 12px;
-    font-weight: 500
 }
 span.session-date {
     font-size: 13px;
-    font-weight: 700;
-}
-
-#toggle-edit {
-    padding-top:-20%;
 }
 
 .edit{
@@ -40,9 +62,6 @@
 }
 
 #delete-session-modal{
-    padding-top: 2%;
-    margin-top: 30%;
-
     -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 0.5s; /* Firefox < 16 */
         -ms-animation: fadein 0.5s; /* Internet Explorer */
@@ -80,11 +99,10 @@
 }
 
 #delete-session-close-modal-button{
-    margin-top: -2.5%;
-    margin-left: 92%;
     background-color: transparent;
     border: transparent;
     color: rgba(#769FED, .4);
+    cursor: pointer;
 }
 
 #delete-session-close-modal-button:hover{
@@ -94,15 +112,9 @@
 }
 
 .modal-text{
-    margin-top: 10%;
     font-size: 16px;
-    font-weight: 500;
 }
 
 #delete-session-modal-button {
-    padding: 1.5%;
-    margin-top: 5%;
-    margin-right: 40%;
-    width: 20%;
     font-size: 14px;
 }
diff -r de8d18c8251d -r a28361bda28c client/src/components/Settings.scss
--- a/client/src/components/Settings.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/Settings.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -1,23 +1,7 @@
 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 de8d18c8251d -r a28361bda28c client/src/scss/_custom.scss
--- a/client/src/scss/_custom.scss	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/scss/_custom.scss	Mon Sep 03 20:02:14 2018 +0200
@@ -12,6 +12,9 @@
 
 $component-active-bg: theme-color("secondary");
 
+$h4-font-size: 3rem;
+$h5-font-size: 1.5rem;
+
 //Dropdowns
 $dropdown-padding-y: 1rem;
 $dropdown-link-color: theme-color("secondary");
@@ -20,7 +23,7 @@
 
 
 
-// Navs
+//Navs
 $nav-link-padding-y: .2rem;
 $navbar-brand-font-size: 30px;
 $navbar-light-color: darken((theme-color("secondary")), 2%);
@@ -31,5 +34,13 @@
 //Modals
 $modal-content-border-width: .1rem;
 
+//Forms
+$input-btn-padding-y: .2rem;
+$input-padding-y: .1rem;
+$input-border-width: .1rem;
+$input-placeholder-color: theme-color("secondary");
+
+$form-group-margin-bottom: .2rem;
+
 
 @import "bootstrap/scss/bootstrap";