dashboard update according to the last mockup

src/container/Dashboard.jsx

@@ -10,9 +10,17 @@ class Dashboard extends Component {
 
         <div className='dashboard'>
           <div className='container-fluid nopadding'>
-            <div className='pageTitleGeneric'>
-              <div className='pageTitleGeneric__title dashboard__title'>
-                Dashboard
+            <div className='dashboard__header mb-5'>
+              <div className='pageTitleGeneric dashboard__header__title d-flex align-items-center'>
+                <div className='pageTitleGeneric__title dashboard__header__title__text mr-3'>
+                  Dashboard
+                </div>
+                <div className='dashboard__header__acces'>
+                  (privé)
+                </div>
+              </div>
+              <div className='dashboard__header__advancedmode mr-3'>
+                <button type='button' className='btn btn-primary'>Activé édition avancé</button>
               </div>
             </div>
 
@@ -47,12 +55,12 @@ class Dashboard extends Component {
                   <div className='dashboard__userstatut__notification__text'>
                     Vous êtes abonné(e) aux notifications de ce workspace
                   </div>
-                  <div className='dashboard__userstatut__notification__btn btn btn-primary'>
+                  <div className='dashboard__userstatut__notification__btn btn btn-outline-primary'>
                     Changer de statut
                   </div>
 
                   <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                       Abonné(e)
                     </button>
                     <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
@@ -100,6 +108,17 @@ class Dashboard extends Component {
                 </div>
               </div>
 
+              <div className='dashboard__calltoaction__button btnaction visioconf'>
+                <div className='dashboard__calltoaction__button__text'>
+                  <div className='dashboard__calltoaction__button__text__icon'>
+                    <i className='fa fa-video-camera' />
+                  </div>
+                  <div className='dashboard__calltoaction__button__text__title'>
+                    débuter une visioconférence
+                  </div>
+                </div>
+              </div>
+
               <div className='dashboard__calltoaction__button btnaction calendar'>
                 <div className='dashboard__calltoaction__button__text'>
                   <div className='dashboard__calltoaction__button__text__icon'>
@@ -130,7 +149,7 @@ class Dashboard extends Component {
                     Activité récente
                   </div>
 
-                  <div className='dashboard__activity__header__allread btn btn-primary'>
+                  <div className='dashboard__activity__header__allread btn btn-outline-primary'>
                     Tout marquer comme lu
                   </div>
                 </div>
@@ -190,7 +209,7 @@ class Dashboard extends Component {
                   </div>
 
                   <div className='dashboard__activity__more d-flex flex-row-reverse'>
-                    <div className='dashboard__activity__more__btn btn btn-primary'>
+                    <div className='dashboard__activity__more__btn btn btn-outline-primary'>
                       Voir plus
                     </div>
                   </div>
@@ -209,7 +228,7 @@ class Dashboard extends Component {
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           Jean Dupont
                         </div>
@@ -217,13 +236,16 @@ class Dashboard extends Component {
                           Responsable
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                     <li className='dashboard__memberlist__list__item'>
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           Aldwin Vinel
                         </div>
@@ -231,13 +253,16 @@ class Dashboard extends Component {
                           lecteur
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                     <li className='dashboard__memberlist__list__item'>
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           William Himme
                         </div>
@@ -245,13 +270,16 @@ class Dashboard extends Component {
                           contributeur
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                     <li className='dashboard__memberlist__list__item'>
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           Yacine Lite
                         </div>
@@ -259,13 +287,16 @@ class Dashboard extends Component {
                           Gestionnaire de contenu
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                     <li className='dashboard__memberlist__list__item'>
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           Yacine Lite
                         </div>
@@ -273,13 +304,16 @@ class Dashboard extends Component {
                           Gestionnaire de contenu
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                     <li className='dashboard__memberlist__list__item'>
                       <div className='dashboard__memberlist__list__item__avatar'>
                         <img src={imgProfil} alt='avatar' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
                         <div className='dashboard__memberlist__list__item__info__name'>
                           Yacine Lite
                         </div>
@@ -287,6 +321,9 @@ class Dashboard extends Component {
                           Gestionnaire de contenu
                         </div>
                       </div>
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
+                        <i className='fa fa-trash-o' />
+                      </div>
                     </li>
 
                   </ul>
@@ -304,11 +341,14 @@ class Dashboard extends Component {
                   </div>
 
                   <form className='dashboard__memberlist__addmember'>
-                    <label className='dashboard__memberlist__addmember__label' for='addmember'>Indiquer le nom de l'utilisateur</label>
+                    <div className='dashboard__memberlist__addmember__close d-flex justify-content-end'>
+                      <i className='fa fa-times' />
+                    </div>
+                    <label className='dashboard__memberlist__addmember__label' htmlFor='addmember'>Indiquer le nom de l'utilisateur</label>
                     <input type='text' id='addmember' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
                     <div className='dashboard__memberlist__addmember__role'>
                       <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
-                        <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                        <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                           Rôle du membre
                         </button>
                         <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
@@ -339,35 +379,60 @@ class Dashboard extends Component {
                         </div>
                       </div>
                     </div>
-                    <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
+                    <div className='dashboard__memberlist__addmember__submitbtn'>
+                      <button type='submit' className='btn btn-outline-primary'>Valider</button>
+                    </div>
                   </form>
 
                 </div>
               </div>
             </div>
 
-            <div className='dashboard__webdav genericWebdav'>
+            <div className='dashboard__moreinfo'>
+              <div className='dashboard__moreinfo__webdav genericBtnInfoDashboard mr-5'>
+
+                <div className='dashboard__moreinfo__webdav__btn genericBtnInfoDashboard__btn'>
+                  <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
+                    <i className='fa fa-windows' />
+                  </div>
 
-              <div className='dashboard__webdav__btn genericWebdav__btn'>
-                <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
-                  <i className='fa fa-windows' />
+                  <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
+                    Implémenter Tracim dans votre explorateur
+                  </div>
                 </div>
 
-                <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
-                  Implémenter Tracim dans votre explorateur
+                <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
+                  <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
+                    Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+                  </div>
+
+                  <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+                    http://algoo.trac.im/webdav/
+                  </div>
                 </div>
               </div>
+              <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
 
-              <div className='dashboard__webdav__information genericWebdav__info'>
-                <div className='dashboard__webdav__information__text genericWebdav__info__text'>
-                  Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+                <div className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'>
+                  <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
+                    <i className='fa fa-calendar' />
+                  </div>
+
+                  <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
+                    Calendrier de l'espace de travail
+                  </div>
                 </div>
 
-                <div className='dashboard__webdav__information__link genericWebdav__info__link'>
-                  http://algoo.trac.im/webdav/
+                <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
+                  <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
+                    Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+                  </div>
+
+                  <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+                    http://algoo.trac.im/calendar/
+                  </div>
                 </div>
               </div>
-
             </div>
           </div>
         </div>

src/css/Dashboard.styl

@@ -17,8 +17,16 @@ bgandcolor()
 
 .dashboard
   margin-left 20px
-  &__title
-    margin 0
+  &__header
+    flexwrap()
+    align-items center
+    justify-content space-between
+    &__title
+      width auto
+      &__text
+        margin 0
+    &__advancedmode
+      cursor pointer
   &__wkswrapper
     flexwrap()
   &__workspace
@@ -60,14 +68,14 @@ bgandcolor()
             padding 10px
   &__calltoaction
     flexwrap()
-    margin 50px 0
+    margin 100px 0
     &__button
       &:active
         box-shadow inset 0px 0px 5px 2px #656565
       &__text
         &__icon
           font-size 30px
-          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o
+          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o, .fa-video-camera
               color white
         &__title
           font-size 18px
@@ -78,12 +86,15 @@ bgandcolor()
       background-color writefile
     .importfile
       background-color importfile
+    .visioconf
+      background-color grey-hover
     .calendar
       background-color calendar
     .explore
       background-color explore
   &__wksinfo
     flexwrap()
+    margin-top 150px
   &__activity
     margin 0 35px 50px 0
     width 60%
@@ -108,6 +119,10 @@ bgandcolor()
       cursor pointer
       &:hover
         background-color folder-hover
+      &:nth-child(even)
+        background-color grey-hover
+        &:hover
+          background-color folder-hover
       &__icon
         margin 0 25px
         font-size 25px
@@ -142,8 +157,14 @@ bgandcolor()
         display flex
         border-bottom 1px solid grey
         padding 10px 15px
+        &:hover
+          background-color folder-hover
         &:nth-last-child(1)
           border-bottom 0
+        &:nth-child(even)
+          background-color grey-hover
+          &:hover
+            background-color folder-hover
         &__avatar
           margin-right 20px
           width 50px
@@ -153,6 +174,10 @@ bgandcolor()
             font-size 20px
           &__role
             font-size 18px
+        &__delete
+          font-size 20px
+          color blue
+          cursor pointer
     &__btnadd
       border-top 1px solid grey
       padding 15px
@@ -180,29 +205,37 @@ bgandcolor()
       position absolute
       top 0
       display none
+      padding 15px
       flex-direction column
-      justify-content center
-      align-items center
       height 100%
       width 100%
       background-color off-white
+      &__close
+        font-size 20px
+        cursor pointer
+      &__label
+        margin-top 80px
       &__name
         margin-bottom 20px
         border 1px solid grey
         border-radius 10px
         padding 10px 25px
-        width auto
+        width 300px
       &__role
         margin-bottom 90px
         &__dropdown
           &__button
+            display flex
+            justify-content flex-start
             border 1px solid blue
             border-radius 10px
             padding 10px 25px
+            width 300px
             &::after
-              margin 10px 0 0 20px
+              margin 10px 0 0 120px
           &__submenu
             padding 0
+            width 300px
             &__item
               display flex
               padding 10px
@@ -211,20 +244,28 @@ bgandcolor()
               &__icon
                 margin-right 15px
       &__submitbtn
-        border 1px solid blue
-        border-radius 5px
-        padding 5px 35px
-        bgandcolor()
-        cursor pointer
-        &:hover, &:focus
-          hoverfocus()
-  &__webdav
-    margin-bottom 100px
-    &__btn
-      width 300px
-    &__information
-      display none
-      width 600px
+        display flex
+        justify-content flex-end
+        & > button
+          padding 8px 30px
+          cursor pointer
+  &__moreinfo
+    display flex
+    flexwrap wrap
+    &__webdav
+      margin-bottom 40px
+      &__btn
+        width 300px
+      &__information
+        display none
+        width 600px
+    &__calendar
+      margin-bottom 100px
+      &__btn
+        width 300px
+      &__information
+        display none
+        width 600px
 
 /****** CLASS ACTIVE *******/
 
@@ -246,7 +287,13 @@ bgandcolor()
 /*** active webdav ***/
 
 .activewebdav
-  .dashboard__webdav__information
+  .dashboard__moreinfo__webdav__information
+    display block
+
+/*** active calendar ***/
+
+.activecalendar
+  .dashboard__moreinfo__calendar__information
     display block
 
 /**** MEDIAQUERIES *****/
@@ -294,7 +341,7 @@ bgandcolor()
     &__memberlist
       margin 50px 0
       width 90%
-    &__webdav__information
+    &__moreinfo__webdav__information
       width 500px
 
 /**** MEDIA 575px ****/
@@ -340,7 +387,8 @@ bgandcolor()
           border-bottom 1px solid grey
       &__btnadd
         border-top 0
-    &__webdav
-      margin-left 10px
-      &__information
-        width 350px
+    &__moreinfo
+      &__webdav
+        margin-left 10px
+        &__information
+          width 350px