Modification in the account page

src/container/AccountPage.jsx

@@ -78,24 +78,24 @@ class AccountPage extends Component {
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
-                <div className='account__userpreference__setting__personaldata__changeinfo'>
-                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
+                <div className='account__userpreference__setting__personaldata__form'>
+                  <div className='account__userpreference__setting__personaldata__form__title'>
                     Changer le mot de passe :
                   </div>
-                  <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'>
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
+                  <div className='account__userpreference__setting__personaldata__form__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
 
-                <div className='account__userpreference__setting__personaldata__changeinfo'>
-                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
+                <div className='account__userpreference__setting__personaldata__form'>
+                  <div className='account__userpreference__setting__personaldata__form__title'>
                     Changer d'adresse mail :
                   </div>
-                  <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'>
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
+                  <input className='account__userpreference__setting__personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+                  <div className='account__userpreference__setting__personaldata__form__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
@@ -112,14 +112,14 @@ class AccountPage extends Component {
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
-                <div className='account__userpreference__setting__calendar__infotitle'>
+                <div className='account__userpreference__setting__calendar__title'>
                   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__infotitle'>
+                <div className='account__userpreference__setting__calendar__title'>
                   Changer de Fuseau Horaire :
                 </div>
 
@@ -147,7 +147,7 @@ class AccountPage extends Component {
                   Ut consectetur dolor et sunt nisi officia ut magna.
                 </div>
 
-                <div className='account__userpreference__setting__notification__tableau'>
+                <div className='account__userpreference__setting__notification__table'>
                   <table className='table'>
                     <thead>
                       <tr>
@@ -159,154 +159,154 @@ class AccountPage extends Component {
                     <tbody>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-eye' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Lecteur
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-pencil' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Contributeur
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-gavel' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Responsable
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='account__userpreference__setting__notification__table__wksname'>
                             Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__role'>
-                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                          <div className='account__userpreference__setting__notification__table__role'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>

src/css/AccountPage.styl

@@ -5,6 +5,12 @@ settingText()
   margin 15px 0
   font-size 18px
 
+.table td
+  vertical-align middle
+
+.table tr:nth-child(even)
+  background-color grey-hover
+
 .account
   &__userinformation
     display flex
@@ -76,14 +82,13 @@ settingText()
       &__personaldata
         &__text
           settingText()
-        &__changeinfo
+        &__form
           margin 25px 0
-          &__infotitle
+          &__title
             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
@@ -101,11 +106,9 @@ settingText()
               background-color blue
               color white
       &__calendar
-        &__title
-          settingTitle()
         &__text
           settingText()
-        &__infotitle
+        &__title
           margin 15px 0
           font-size 18px
         &__link
@@ -135,12 +138,10 @@ settingText()
                 background-color blue
                 color white
       &__notification
-        &__title
-          settingTitle()
         &__text
           settingText()
           margin-bottom 30px
-        &__tableau
+        &__table
           border 1px solid lightGrey
           &__role
             display flex
@@ -148,13 +149,8 @@ settingText()
             &__icon
               margin-right 10px
 
-.account__userpreference__setting__notification__table__line:nth-last-child(1)
-  border-bottom 0
-
-
 /***** MEDIAQUERIES *****/
 
-
 /**** MEDIA 576px & 1199px ****/
 
 // Regroup the common rules
@@ -264,7 +260,7 @@ settingText()
           &__link
             padding 10px 15px
         &__notification
-          &__tableau
+          &__table
             &__wksname
               text-overflow ellipsis
               white-space nowrap