fixe of the integration of account's page

src/component/Sidebar/WorkspaceListItem.jsx

       className='sidebar__navigation__workspace__item nav-item dropdown'
       onClick={handleClickTitle}
     >
-      <div className='sidebar__navigation__workspace__item__number'>
-        {pad(props.number)}
-      </div>
 
-      <div className='sidebar__navigation__workspace__item__name' title={props.name}>
-        {props.name}
-      </div>
+      <div className='sidebar__navigation__workspace__item__wrapper'>
+
+        <div className='sidebar__navigation__workspace__item__number'>
+          {pad(props.number)}
+        </div>
+
+        <div className='sidebar__navigation__workspace__item__name' title={props.name}>
+          {props.name}
+        </div>
+
+        <div className='sidebar__navigation__workspace__item__icon'>
+          <i className='fa fa-chevron-down' />
+        </div>
 
-      <div className='sidebar__navigation__workspace__item__icon'>
-        <i className='fa fa-chevron-down' />
       </div>
 
       <ul

src/component/common/Input/BtnSwitch.jsx

+import React, { Component } from 'react'
+
+class BtnSwitch extends Component {
+  render () {
+    return (
+      <div className='btnswitch'>
+        <label className='switch nomarginlabel'>
+          <input type='checkbox' />
+          <span className='slider round' />
+        </label>
+        <div className='btnswitch__text'>
+          On
+        </div>
+      </div>
+    )
+  }
+}
+
+export default BtnSwitch

src/container/AccountPage.jsx

 import React, { Component } from 'react'
 import imgProfil from '../img/imgProfil.png'
+import BtnSwitch from '../component/common/input/BtnSwitch.jsx'
 
 class AccountPage extends Component {
   render () {
     return (
-      <div className='container-fluid nopadding'>
-        <div className='account'>
-          <div className='account__title ml-5'>
-            Mon Compte
+      <div className='account'>
+        <div className='container-fluid nopadding'>
+          <div className='pageTitleGeneric'>
+            <div className='pageTitleGeneric__title'>
+              Mon Compte
+            </div>
           </div>
 
           <div className='account__userinformation mr-5 ml-5 mb-5'>
               <div className='account__userinformation__name mb-3'>
                 Alexi Cauvin
               </div>
-              <div className='account__userinformation__email mb-3'>
+              <a href='mailto:contact@contact.fr' className='account__userinformation__email mb-3'>
                 alexi.cauvin@algoo.fr
-              </div>
+              </a>
               <div className='account__userinformation__role mb-3'>
                 Utilisateur
               </div>
               <div className='account__userinformation__job mb-3'>
                 Integrateur | Webdesigner
               </div>
-              <div className='account__userinformation__company'>
+              <a href='www.algoo.fr' className='account__userinformation__company'>
                 Algoo
-              </div>
+              </a>
             </div>
           </div>
 
-          <div className='account__delimiteur' />
+          <div className='account__delimiter GenericDelimiter' />
 
           <div className='account__userpreference'>
 
             <nav className='account__userpreference__menu navbar d-flex align-items-start'>
 
               <div className='account__userpreference__menu__responsive d-lg-none'>
-                <div className='account__userpreference__menu__responsive__burger' />
-                <div className='account__userpreference__menu__responsive__burger' />
-                <div className='account__userpreference__menu__responsive__burger' />
+                <i className='fa fa-bars' />
               </div>
 
-
               <ul className='account__userpreference__menu__list nav flex-column'>
 
-                <div className='account__userpreference__menu__list__close nav-link'>
+                <li className='account__userpreference__menu__list__close nav-link'>
                   <i className='fa fa-times' />
-                </div>
+                </li>
 
-                <div className='account__userpreference__menu__list__disabled'>Menu
-                </div>
+                <li className='account__userpreference__menu__list__disabled'>Menu
+                </li>
                 <li className='account__userpreference__menu__list__item nav-item'>
                   <div className='account__userpreference__menu__list__item__link nav-link'>Informations Compte</div>
                 </li>
             <div className='account__userpreference__setting'>
 
               <div className='account__userpreference__setting__personaldata d-none'>
-                <div className='account__userpreference__setting__personaldata__title'>
+                <div className='account__userpreference__setting__personaldata__title subTitle ml-2 ml-sm-0'>
                   Mes informations personnelles
                 </div>
 
-                <div className='account__userpreference__setting__personaldata__text'>
+                <div className='account__userpreference__setting__personaldata__text ml-2 ml-sm-0'>
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
                 <div className='account__userpreference__setting__personaldata__changeinfo'>
-                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
                     Changer le mot de passe :
                   </div>
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Ancien mot de passe' />
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Nouveau mot de passe' />
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
 
                 <div className='account__userpreference__setting__personaldata__changeinfo'>
-                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
                     Changer d'adresse mail :
                   </div>
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Ancienne adresse mail' />
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Nouvelle adresse mail' />
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
 
               <div className='account__userpreference__setting__calendar d-none'>
 
-                <div className='account__userpreference__setting__calendar__title'>
+                <div className='account__userpreference__setting__calendar__title subTitle ml-2 ml-sm-0'>
                   Calendrier
                 </div>
 
-                <div className='account__userpreference__setting__calendar__text'>
+                <div className='account__userpreference__setting__calendar__text ml-2 ml-sm-0'>
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
-                <div className='account__userpreference__setting__calendar__subtitle'>
+                <div className='account__userpreference__setting__calendar__infotitle'>
                   Accèder à votre Calendrier personnel
                 </div>
                 <div className='account__userpreference__setting__calendar__link'>
                   http://algoo.trac.im/caldav/user/262.ics/
                 </div>
 
-                <div className='account__userpreference__setting__calendar__subtitle'>
+                <div className='account__userpreference__setting__calendar__infotitle'>
                   Changer de Fuseau Horaire :
                 </div>
 
 
               <div className='account__userpreference__setting__notification'>
 
-                <div className='account__userpreference__setting__notification__title'>
+                <div className='account__userpreference__setting__notification__title subTitle ml-2 ml-sm-0'>
                   Mes Espaces de Travail
                 </div>
 
-                <div className='account__userpreference__setting__notification__text'>
+                <div className='account__userpreference__setting__notification__text ml-2 ml-sm-0'>
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
-                <div className='container-fluid'>
-                  <div className='account__userpreference__setting__notification__table'>
-                    <div className='account__userpreference__setting__notification__table__header'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Espace de Travail
-                          </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-center'>
-                            Role
-                          </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch text-right'>
-                            Notifiaction
+                <div className='account__userpreference__setting__notification__tableau'>
+                  <table className='table'>
+                    <thead>
+                      <tr>
+                        <th>Espace de travail</th>
+                        <th>Role</th>
+                        <th>Notification</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
-                          </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-eye' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Lecteur
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-pencil' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Contributeur
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-gavel' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Responsable
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className='account__userpreference__setting__notification__table__line'>
-                      <div className='row'>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__workspace'>
-                            Workspace 1
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__table__role__text'>
-                              Gestionnaire de contenu
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
                             </div>
                           </div>
-                        </div>
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
-                              <label className='switch nomarginlabel'>
-                                <input type='checkbox' />
-                                <span className='slider round' />
-                              </label>
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
-                                On
-                              </div>
-                            </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
                 </div>
               </div>
+
             </div>
           </div>
         </div>

src/container/Sidebar.jsx

             />
 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
-              <div className='sidebar__navigation__workspace__item__number'>
-                02
-              </div>
-              <div className='sidebar__navigation__workspace__item__name'>
-                Workspace 2
-              </div>
+              <div className='sidebar__navigation__workspace__item__wrapper'>
+                <div className='sidebar__navigation__workspace__item__number'>
+                  02
+                </div>
+                <div className='sidebar__navigation__workspace__item__name'>
+                  Workspace 2
+                </div>
 
-              <div className='sidebar__navigation__workspace__item__icon'>
-                <i className='fa fa-chevron-down' />
+                <div className='sidebar__navigation__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
               </div>
             </li>
 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
-              <div className='sidebar__navigation__workspace__item__number'>
-                03
-              </div>
-              <div className='sidebar__navigation__workspace__item__name'>
-                Workspace 3
-              </div>
+              <div className='sidebar__navigation__workspace__item__wrapper'>
+                <div className='sidebar__navigation__workspace__item__number'>
+                  03
+                </div>
+                <div className='sidebar__navigation__workspace__item__name'>
+                  Workspace 3
+                </div>
 
-              <div className='sidebar__navigation__workspace__item__icon'>
-                <i className='fa fa-chevron-down' />
+                <div className='sidebar__navigation__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
               </div>
             </li>
+
           </ul>
         </nav>
 

src/css/AccountPage.styl

-.nopadding
-  padding 0
-
 .nomarginlabel
   margin-bottom 0
 
-settingTitle()
-  margin 15px 0 15px 15px
-  font-size 20px
-  font-weight 500
-  color blue
-
 settingText()
-  margin 15px 0 15px 15px
+  margin 15px 0
   font-size 18px
 
 .account
-  &__title
-    margin 20px 0
-    font-size 35px
   &__userinformation
     display flex
     justify-content center
     &__company
       font-size 20px
       color blue
-  &__delimiteur
+  &__delimiter
     position relative
     top 3px
-    left calc(50% - 250px) // 250px => width / 2
-    border-radius 10px
-    width 500px
-    height 5px
-    background-color blue
+    margin auto
+    z-index 3
   &__userpreference
     display flex
     padding 25px
       border-radius 10px
       padding 0
       width 20%
-      min-height 600px
       background-color off-white
       &__responsive
-        &__burger
-          margin-bottom 3px
-          border-radius 10px
-          width 35px
-          height 4px
-          background-color blue
-          cursor pointer
+        font-size 20px
       &__list
         width 100%
         margin-bottom 20px
           font-size 20px
           cursor pointer
         &__disabled
-          margin 10px 0 0 15px
+          padding 25px 20px 20px 20px
           color grey
           font-size 18px
         &__item
           margin-top 10px
+          padding-left 5px
           font-weight 500
           font-size 18px
           cursor pointer
             color white
     &__setting
       border-radius 10px
+      padding 20px
       width 80%
-      min-height 600px
       background-color off-white
       &__personaldata
-        &__title
-          settingTitle()
         &__text
           settingText()
         &__changeinfo
-          margin 25px 0 25px 15px
-          &__subtitle
+          margin 25px 0
+          &__infotitle
             margin-bottom 15px
             font-size 18px
           &__txtinput
+            display inline-flex
+            display ms-inline-flex
+            width auto
             margin 0 15px 15px 0
             border 1px solid blue
             border-radius 10px
             vertical-align top
             border 1px solid blue
             border-radius 10px
-            padding 10px 25px
+            padding 8px 25px
+            background-color transparent
+            color blue
+            cursor pointer
             &:hover, &:focus
               background-color blue
               color white
           settingTitle()
         &__text
           settingText()
-        &__subtitle
-          margin 15px 0 15px 15px
+        &__infotitle
+          margin 15px 0
           font-size 18px
         &__link
-          margin-left 15px
+          display inline-block
           border 1px solid grey
           border-radius 10px
-          width 400px
           padding 10px 25px
         &__timezone
-          margin 15px 0 30px 15px
+          margin 15px 0 30px 0
           &__btn
             border 1px solid blue
             border-radius 10px
               background-color blue
               color white
           &__submenu
+            width 203px
             max-height 300px
             overflow-Y auto
             &__item
                 background-color blue
                 color white
       &__notification
-        margin 15px 15px 35px 15px
         &__title
           settingTitle()
         &__text
           settingText()
           margin-bottom 30px
-        &__table
-          border 1px solid grey
-          &__header
-            border-bottom 1px solid grey
-            padding 10px 20px
-          &__line
-            border-bottom 1px solid grey
-            padding 10px 20px
-          &__workspace
-            font-size 18px
-            white-space nowrap
-            overflow hidden
-            text-overflow ellipsis
+        &__tableau
+          border 1px solid lightGrey
           &__role
             display flex
-            font-size 18px
+            align-items center
             &__icon
               margin-right 10px
-              color gestionnaire
-          &__btnswitch
-            &__switcher
-              display flex
-              &__text
-                margin 5px 0 0 15px
+              .fa-graduation-cap
+                color gestionnaire
+              .fa-pencil
+                color contributeur
+              .fa-gavel
+                color responsable
+              .fa-eye
+                color lecteur
+
 
 .account__userpreference__setting__notification__table__line:nth-last-child(1)
   border-bottom 0
             width 300px
             &__close
               display flex
+            &__disabled
+              padding 0 20px
 
 /***** MEDIA LG *****/
 
         margin-right 15px
         width 25%
 
+/**** MEDIA SM ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .account
+    &__userpreference
+      padding 25px 0
+      &__menu
+        margin-left 15px
+      &__setting
+        padding 30px 15px
+
+  .activemenu
+    .account__userpreference__menu
+      margin-left 0
+
 /***** MEDIA XS *****/
 
 @media (max-width: max-xs)
         &__calendar
           &__link
             padding 10px 15px
-            width 345px
         &__notification
-          &__table
-            &__header
-              display none
-            &__workspace
-              margin-bottom 20px
-            &__role
-              margin-bottom 20px
-            &__btnswitch
-              margin-bottom 20px
+          &__tableau
+            &__wksname
+              text-overflow ellipsis
+              white-space nowrap
+              overflow hidden
+              width 100px
+              &:focus
+                overflow visible
+                width auto
 
   .activemenu
     .account
           position absolute
           top 0
           left 0
+          margin-left 0
           border-radius 10px
           width 100%
           height 100%
             width 300px
             &__close
               display flex
+            &__disabled
+              padding 0 20px

src/css/Generic.styl

+/*** SIDEBAR ***/
+
 .sidebarpagecontainer
   display flex
   min-height calc(100% - 50px)
   padding-top 85px
 
+/********************/
+
+/*** ELEMENTS ON ALL PAGE ***/
+
 .pageWrapperGeneric
   width 100%
   &__header
     &__content
       margin 0
 
+.nopadding
+  padding 0
 
 .pageTitleGeneric
   display flex
 .pageContentGeneric
   margin 10px 10px 120px 10px
 
-
 .dropdownCreateBtn
   &__label
     padding 10px 65px
     .setting__link
       padding 5px 65px 5px 10px
 
-
 .fa-file-image-o
   color previewColor
 
 .fa-ticket
   color issueColor
 
+.subTitle
+  font-size 20px
+  font-weight 500
+  color blue
+
+.GenericDelimiter
+  border-radius 10px
+  width 50%
+  height 5px
+  background-color blue
+
+.btnaction
+  display flex
+  flex-direction column
+  justify-content center
+  margin 20px 30px 20px 0
+  border-radius 10px
+  padding 15px
+  width 250px
+  height 200px
+  box-shadow shadow-all
+  text-align center
+  cursor pointer
+
+/********************/
+
+/*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/
 
 .wsFileGeneric
   position fixed

src/css/Header.styl

   width 100%
   box-shadow shadow-bottom
   background mainColor
-  z-index 3
+  z-index 4
   &__logo
     &__img
       margin-left 40px

src/css/Sidebar.styl

   .sidebar-expandbar
     left sidebar-width
 
+leftside()
+  flex-grow 0
+  height 100%
+  font-size 18px
+  background-color rgba(253,253,253,0.3)
+
 .sidebar
   &__btnnewworkspace
     margin-top 40px
   &__navigation
     padding 0
     &__workspace
-      flex-direction column
       &__item
-        position relative
-        margin-top 2px
         width sidebar-width
-        background-color thirdColor
-        cursor pointer
+        &__wrapper
+          display flex
+          align-items center
+          border-bottom 1px solid darkBlue
+          width 100%
+          height 100%
+          background-color blue
+          cursor pointer
         &__number
-          display inline-block
-          padding 10px 0
-          width 50px
-          font-size 20px
+          leftside()
+          padding 12px
+          min-width 50px
           letter-spacing 2px
-          text-align center
-          background-color rgba(253,253,253,0.3)
         &__name
-          display inline-block
-          vertical-align top
-          padding 10px 5px
-          width 220px
+          flex-grow 2
+          padding 10px
           font-size 20px
-          color white
+          color off-white
           white-space nowrap
           overflow hidden
           text-overflow ellipsis
         &__icon
-          display inline-block
+          flex-grow 0
+          padding 10px
           color white
         &__submenu
-          margin-bottom 0
-          padding-left 0
-          height 0 // height is handled is js
-          list-style none
+          margin 0
+          padding 0
+          width 100%
           background-color fourthColor
+          height 0 // height is handled is js
           overflow hidden
           transition height 0.5s
           &__dropdown
+            display flex
+            align-items center
             border-top 1px solid darkBlue
+            &:nth-last-child(1)
+              border-bottom 1px solid darkBlue
             &:hover
               background-color lightBlue
             &__showdropdown
-              display inline-block
-              padding 10px 15px
+              display flex
+              justify-content space-between
+              align-items center
+              padding 0 10px
+              width 100%
             .dropdown__icon
-              display inline-block
               padding 10px 15px
-              width 50px
-              text-align center
-              background-color rgba(253,253,253,0.3)
-              font-size 20px
-            .dropdown__title
-              position relative
-              display inline-block
-              font-size 18px
-              font-weight 400
-              color darkGrey
-              cursor pointer
-              &::after //bootstrap override
-                position absolute
-                top 10px
-                left 100%
-              &__text
-                display inline-block
-                width 200px
-            .dropdown__subdropdown
-              margin 0
-              border-radius 0
-              padding 0
-              .alignname
-                display inline-block
-                font-size 18px
-              &__item
-                cursor pointer
-                border-top 1px solid darkBlue
-                padding 13px 0
-                &__iconfile
-                  padding-left 18px
-                &__textfile
-                  margin-left 38px
+              min-width 50px
+              leftside()

src/css/Variable.styl

 blue = #2571fe
 lightBlue = #569EDE
 
+red = #f63434
+
 // c2a btn color in general context ; meaning every context but specific one related to file type (file, pageHtml, issues, threads ...)
 btnCallAction = #28a745
 btnCallAction-hover = darken(btnCallAction, 15%)
 /** Btn call to action dashboard **/
 writefile = #a738ed
 importfile = #ff8400
-calendar = #f63434
+calendar = red
 explore = #87d04c
 
 

src/css/btnSwtich.styl

+.btnswitch
+  display flex
+  align-items center
+  &__text
+    margin-left 10px
+
 .switch
   position relative
   display inline-block
   transition .4s
 
 input:checked + .slider
-  background-color #2196F3
+  background-color blue
 
 input:focus + .slider
-  box-shadow 0 0 1px #2196F3
+  box-shadow 0 0 1px blue
 
 input:checked + .slider:before
   -webkit-transform translateX(26px)

src/css/index.styl

 @import 'Dashboard'
 @import 'AccountPage'
 @import 'btnSwtich'
+
+@import 'UploadPopup'
+@import 'ProgressBar'