update add's member's formulaire, added Display Function on buttons elements

src/container/Dashboard.jsx

@@ -3,6 +3,32 @@ import Sidebar from './Sidebar.jsx'
 import imgProfil from '../img/imgProfil.png'
 
 class Dashboard extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      displayNewMemberDashboard: false,
+      displayNotifBtn: false,
+      displayWebdavBtn: false,
+      displayCalendarBtn: false
+    }
+  }
+
+  handleToggleNewMemberDashboard = () => this.setState(prevState => ({
+    displayNewMemberDashboard: !prevState.displayNewMemberDashboard
+  }))
+
+  handleToggleNotifBtn = () => this.setState(prevState => ({
+    displayNotifBtn: !prevState.displayNotifBtn
+  }))
+
+  handleToggleWebdavBtn = () => this.setState(prevState => ({
+    displayWebdavBtn: !prevState.displayWebdavBtn
+  }))
+
+  handleToggleCalendarBtn = () => this.setState(prevState => ({
+    displayCalendarBtn: !prevState.displayCalendarBtn
+  }))
+
   render () {
     return (
       <div className='sidebarpagecontainer'>
@@ -20,7 +46,7 @@ class Dashboard extends Component {
                 </div>
               </div>
               <div className='dashboard__header__advancedmode mr-3'>
-                <button type='button' className='btn btn-primary'>Activé édition avancé</button>
+                <button type='button' className='btn btn-primary'>Activer édition avancé</button>
               </div>
             </div>
 
@@ -55,21 +81,28 @@ 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-outline-primary'>
-                    Changer de statut
-                  </div>
-
-                  <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                    <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'>
-                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
-                      </div>
-                      <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                  {this.state.displayNotifBtn === false &&
+                    <div
+                      className='dashboard__userstatut__notification__btn btn btn-outline-primary'
+                      onClick={this.handleToggleNotifBtn}
+                    >
+                      Changer de statut
+                    </div>
+                  }
+
+                  {this.state.displayNotifBtn === true &&
+                    <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                      <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'>
+                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                        </div>
+                        <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  }
                 </div>
               </div>
             </div>
@@ -223,175 +256,226 @@ class Dashboard extends Component {
                 </div>
 
                 <div className='dashboard__memberlist__wrapper'>
-                  <ul className='dashboard__memberlist__list'>
-                    <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 mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          Jean Dupont
-                        </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          Responsable
-                        </div>
-                      </div>
-                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                        <i className='fa fa-trash-o' />
-                      </div>
-                    </li>
+                  {this.state.displayNewMemberDashboard === false &&
+                    <div>
+                      <ul className='dashboard__memberlist__list'>
+                        <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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              Jean Dupont
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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 mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          Aldwin Vinel
-                        </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              Aldwin Vinel
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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 mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          William Himme
-                        </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              William Himme
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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 mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          Yacine Lite
-                        </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              Yacine Lite
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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 mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          Yacine Lite
-                        </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          Gestionnaire de contenu
+                        <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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              Yacine Lite
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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 mr-auto'>
+                            <div className='dashboard__memberlist__list__item__info__name'>
+                              Yacine Lite
+                            </div>
+                            <div className='dashboard__memberlist__list__item__info__role'>
+                              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>
+
+                      <div className='dashboard__memberlist__btnadd'>
+                        <div className='dashboard__memberlist__btnadd__button'>
+                          <div className='dashboard__memberlist__btnadd__button__avatar'>
+                            <div className='dashboard__memberlist__btnadd__button__avatar__icon'>
+                              <i className='fa fa-plus' />
+                            </div>
+                          </div>
+                          <div
+                            className='dashboard__memberlist__btnadd__button__text'
+                            onClick={this.handleToggleNewMemberDashboard}
+                          >
+                             Ajouter un membre
+                          </div>
                         </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>
+                  }
+
+                  {this.state.displayNewMemberDashboard === true &&
+                    <form className='dashboard__memberlist__form'>
+                      <div
+                        className='dashboard__memberlist__form__close d-flex justify-content-end'
+                        onClick={this.handleToggleNewMemberDashboard}
+                      >
+                        <i className='fa fa-times' />
                       </div>
-                      <div className='dashboard__memberlist__list__item__info mr-auto'>
-                        <div className='dashboard__memberlist__list__item__info__name'>
-                          Yacine Lite
+                      <div className='dashboard__memberlist__form__member'>
+                        <div className='dashboard__memberlist__form__member__name'>
+                          <label className='name__label' htmlFor='addmember'>Indiquer le nom ou l'email du membre</label>
+                          <input type='text' id='addmember' className='name__input form-control' placeholder='Nom ou Email' />
                         </div>
-                        <div className='dashboard__memberlist__list__item__info__role'>
-                          Gestionnaire de contenu
+                        <div className='dashboard__memberlist__form__member__create'>
+                          <div className='create__radiobtn mr-3'>
+                            <input type='radio' />
+                          </div>
+                          <div className='create__text'>
+                            Créer un compte
+                          </div>
                         </div>
                       </div>
-                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
-                        <i className='fa fa-trash-o' />
-                      </div>
-                    </li>
-
-                  </ul>
-                  <div className='dashboard__memberlist__btnadd'>
-                    <div className='dashboard__memberlist__btnadd__button'>
-                      <div className='dashboard__memberlist__btnadd__button__avatar'>
-                        <div className='dashboard__memberlist__btnadd__button__avatar__icon'>
-                          <i className='fa fa-plus' />
+                      <div className='dashboard__memberlist__form__role'>
+                        <div className='dashboard__memberlist__form__role__text'>
+                          Choisissez le rôle du membre
                         </div>
-                      </div>
-                      <div className='dashboard__memberlist__btnadd__button__text'>
-                         Ajouter un membre
-                      </div>
-                    </div>
-                  </div>
-
-                  <form className='dashboard__memberlist__addmember'>
-                    <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-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'>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                              <i className='fa fa-eye' />
+                        <ul className='dashboard__memberlist__form__role__list'>
+                          <li className='dashboard__memberlist__form__role__list__item'>
+                            <div className='item__radiobtn mr-3'>
+                              <input type='radio' name='role' value='responsable' />
                             </div>
-                            Lecteur
-                          </div>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                              <i className='fa fa-pencil' />
+                            <div className='item__text'>
+                              <div className='item_text_icon mr-2'>
+                                <i className='fa fa-gavel' />
+                              </div>
+                              <div className='item__text__name'>
+                                Responsable
+                              </div>
                             </div>
-                            contributeur
-                          </div>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                              <i className='fa fa-graduation-cap' />
+                          </li>
+                          <li className='dashboard__memberlist__form__role__list__item'>
+                            <div className='item__radiobtn mr-3'>
+                              <input type='radio' name='role' value='gestionnaire' />
                             </div>
-                            Gestionnaire de contenu
-                          </div>
-                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
-                            <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
-                              <i className='fa fa-gavel' />
+                            <div className='item__text'>
+                              <div className='item_text_icon mr-2'>
+                                <i className='fa fa-graduation-cap' />
+                              </div>
+                              <div className='item__text__name'>
+                                Gestionnaire de contenu
+                              </div>
                             </div>
-                            Responsable
-                          </div>
-                        </div>
+                          </li>
+                          <li className='dashboard__memberlist__form__role__list__item'>
+                            <div className='item__radiobtn mr-3'>
+                              <input type='radio' name='role' value='contributeur' />
+                            </div>
+                            <div className='item__text'>
+                              <div className='item_text_icon mr-2'>
+                                <i className='fa fa-pencil' />
+                              </div>
+                              <div className='item__text__name'>
+                                Contributeur
+                              </div>
+                            </div>
+                          </li>
+                          <li className='dashboard__memberlist__form__role__list__item'>
+                            <div className='item__radiobtn mr-3'>
+                              <input type='radio' name='role' value='lecteur' />
+                            </div>
+                            <div className='item__text'>
+                              <div className='item_text_icon mr-2'>
+                                <i className='fa fa-eye' />
+                              </div>
+                              <div className='item__text__name'>
+                                Lecteur
+                              </div>
+                            </div>
+                          </li>
+                        </ul>
                       </div>
-                    </div>
-                    <div className='dashboard__memberlist__addmember__submitbtn'>
-                      <button type='submit' className='btn btn-outline-primary'>Valider</button>
-                    </div>
-                  </form>
-
+                      <div className='dashboard__memberlist__form__submitbtn'>
+                        <button type='submit' className='btn btn-outline-primary'>Valider</button>
+                      </div>
+                    </form>
+                  }
                 </div>
               </div>
             </div>
 
             <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 genericBtnInfoDashboard__btn'
+                  onClick={this.handleToggleWebdavBtn}
+                >
                   <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
                     <i className='fa fa-windows' />
                   </div>
@@ -400,37 +484,49 @@ class Dashboard extends Component {
                     Implémenter Tracim dans votre explorateur
                   </div>
                 </div>
+                {this.state.displayWebdavBtn === true &&
+                  <div>
+                    <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 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 className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+                        http://algoo.trac.im/webdav/
+                      </div>
+                    </div>
                   </div>
-                </div>
+                }
               </div>
               <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
+                <div className='dashboard__moreinfo__calendar__wrapperBtn'>
+                  <div
+                    className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'
+                    onClick={this.handleToggleCalendarBtn}
+                  >
+                    <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
+                      <i className='fa fa-calendar' />
+                    </div>
 
-                <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 className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
+                      Calendrier de l'espace de travail
+                    </div>
                   </div>
                 </div>
+                <div className='dashboard__moreinfo__calendar__wrapperText'>
+                  {this.state.displayCalendarBtn === true &&
+                    <div>
+                      <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 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 className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+                          http://algoo.trac.im/calendar/
+                        </div>
+                      </div>
+                    </div>
+                  }
                 </div>
               </div>
             </div>

src/css/Dashboard.styl

@@ -15,6 +15,21 @@ bgandcolor()
   background-color transparent
   color blue
 
+label()
+  font-weight 500
+  font-size 18px
+  color blue
+
+coloricon()
+  .fa-gavel
+    color responsable
+  .fa-graduation-cap
+    color gestionnaire
+  .fa-pencil
+    color contributeur
+  .fa-eye
+    color lecteur
+
 .dashboard
   margin-left 20px
   &__header
@@ -59,7 +74,6 @@ bgandcolor()
         btnNotification()
         cursor pointer
       &__subscribe
-        display none
         &__btn
           btnNotification()
         &__submenu
@@ -201,10 +215,7 @@ bgandcolor()
           font-size 18px
           color blue
           cursor pointer
-    &__addmember
-      position absolute
-      top 0
-      display none
+    &__form
       padding 15px
       flex-direction column
       height 100%
@@ -213,36 +224,41 @@ bgandcolor()
       &__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 300px
-      &__role
-        margin-bottom 90px
-        &__dropdown
-          &__button
-            display flex
-            justify-content flex-start
-            border 1px solid blue
+      &__member
+        &__name
+          .name__label
+            margin 30px 0 20px 0
+            label()
+          .name__input
+            margin-bottom 20px
+            border 1px solid grey
             border-radius 10px
-            padding 10px 25px
-            width 300px
-            &::after
-              margin 10px 0 0 120px
-          &__submenu
-            padding 0
+            padding 10px
             width 300px
-            &__item
-              display flex
-              padding 10px
-              &:hover,&:focus
-                hoverfocus()
-              &__icon
-                margin-right 15px
+        &__create
+          display flex
+          align-items center
+          margin 15px 0
+      &__role
+        margin-bottom 15px
+        coloricon()
+        &__text
+          margin 15px 0
+          label()
+        &__list
+          display flex
+          align-items center
+          flex-wrap wrap
+          margin 0
+          padding 0
+          list-style none
+          &__item
+            display flex
+            align-items center
+            margin 10px 25px 10px 0
+            .item
+              &__text
+                display flex
       &__submitbtn
         display flex
         justify-content flex-end
@@ -251,50 +267,22 @@ bgandcolor()
           cursor pointer
   &__moreinfo
     display flex
+    justify-content space-between
     flexwrap wrap
     &__webdav
       margin-bottom 40px
       &__btn
         width 300px
       &__information
-        display none
-        width 600px
+        width 550px
     &__calendar
       margin-bottom 100px
+      &__wrapperBtn
+        margin-right 300px
       &__btn
         width 300px
       &__information
-        display none
-        width 600px
-
-/****** CLASS ACTIVE *******/
-
-/*** active dropdown subscribe ***/
-
-.activebtnsubs
-  .dashboard__userstatut__notification
-    &__btn
-      display none
-    &__subscribe
-      display flex
-
-/*** active form on list member ***/
-
-.activeform
-  .dashboard__memberlist__addmember
-    display flex
-
-/*** active webdav ***/
-
-.activewebdav
-  .dashboard__moreinfo__webdav__information
-    display block
-
-/*** active calendar ***/
-
-.activecalendar
-  .dashboard__moreinfo__calendar__information
-    display block
+        width 550px
 
 /**** MEDIAQUERIES *****/