fixed css + renamed class

src/component/Thread.jsx

@@ -3,45 +3,45 @@ import classnames from 'classnames'
 
 const Thread = props => {
   return (
-    <div className='wsContentThread'>
-      <ul className='wsContentThread__messagelist wsFileGeneric__messagelist'>
+    <div className='wsContentThread__app'>
+      <ul className='wsContentThread__app__messagelist wsContentGeneric__messagelist'>
         { props.listMessage.map(msg =>
-          <li className={classnames('wsContentThread__messagelist__item', 'wsFileGeneric__messagelist__item', {
+          <li className={classnames('wsContentThread__app__messagelist__item', 'wsContentGeneric__messagelist__item', {
             'sended': props.loggedUser.id === msg.author.id,
             'received': !(props.loggedUser.id === msg.author.id)
           })} key={msg.id}>
-            <div className='wsContentThread__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+            <div className='wsContentThread__app__messagelist__item__avatar wsContentGeneric__messagelist__item__avatar'>
               <img src={msg.author.avatar} alt='avatar' />
             </div>
 
-            <div className='wsContentThread__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+            <div className='wsContentThread__app__messagelist__item__createhour wsContentGeneric__messagelist__item__createhour'>
               {msg.createdAt.day} à {msg.createdAt.hour}
             </div>
 
-            <div className='wsContentThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+            <div className='wsContentThread__app__messagelist__item__content wsContentGeneric__messagelist__item__content'>
               {msg.text}
             </div>
           </li>
         )}
       </ul>
 
-      <form className='wsContentThread__texteditor wsFileGeneric__texteditor'>
-        <div className='wsContentThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
-          <input type='text' className='wsContentThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
+      <form className='wsContentThread__app__texteditor wsContentGeneric__texteditor'>
+        <div className='wsContentThread__app__texteditor__simpletext wsContentGeneric__texteditor__simpletext input-group'>
+          <input type='text' className='wsContentThread__app__texteditor__simpletext__input wsContentGeneric__texteditor__simpletext__input form-control' placeholder='...' />
 
-          <div className='wsContentThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
+          <div className='wsContentThread__app__texteditor__simpletext__icon wsContentGeneric__texteditor__simpletext__icon input-group-addon'>
             <i className='fa fa-font' />
           </div>
         </div>
 
-        <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
+        <div className='wsContentGeneric__texteditor__wysiwyg d-none d-xl-block'>
           <textarea />
         </div>
 
-        <div className='wsContentThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
-          <button type='submit' className='wsContentThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
+        <div className='wsContentThread__app__texteditor__submit wsContentGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
+          <button type='submit' className='wsContentThread__app__texteditor__submit__btn wsContentGeneric__texteditor__submit__btn btn btn-primary'>
             Envoyer
-            <div className='wsContentThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
+            <div className='wsContentThread__app__texteditor__submit__btn__icon wsContentGeneric__texteditor__submit__btn__icon'>
               <i className='fa fa-paper-plane-o' />
             </div>
           </button>

src/css/index.styl

@@ -2,10 +2,6 @@
 
 .wsContentThread
   width 550px
-  flex-grow 1
-  margin-bottom 0
-  border-bottom 1px solid grey
-  overflow-Y auto
   &__header
     color white
     background-color threadColor
@@ -14,58 +10,57 @@
     &__icon
       .fa-comments-o
         color white
-  &__wrapper
-    height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
-  &__messagelist
-    padding 15px 35px
-    list-style none
-    &__item
-      &__avatar
-        position relative
-        top 43px
-        left -25px
-        & > img
-          width 45px
-          height 45px
-          border-radius 30px
-      &__createhour
-        margin-left 30px
-        opacity 0.7
-        font-size 14px
-      &__content
-        border 1px solid grey
-        border-radius 5px
-        padding 15px
-        background-color off-white
-        font-size 15px
-        z-index -1
-        color darkBlue
-
-  &__texteditor
-    &__simpletext
-      &__input
-        &:focus
+  &__app
+    display flex
+    flex-flow column
+    width 100%
+    &__messagelist
+      flex 1 1 auto
+      padding 15px 35px
+      list-style none
+      overflow-y auto
+      &__item
+        &__avatar
+          position relative
+          top 40px
+          left -20px
+          & > img
+            width 45px
+            height 45px
+            border-radius 25px
+        &__createhour
+          margin-left 35px
+          opacity 0.7
+          font-size 14px
+        &__content
+          display inline-block
+          border 1px solid grey
+          border-radius 5px
+          padding 15px
+          background-color off-white
+          font-size 15px
+    &__texteditor
+      flex 0 1 auto
+      &__simpletext
+        &__input
+          &:focus
+            color darkBlue
+            border-color darkBlue
+      &__submit
+        &__btn
           color darkBlue
-          border-color darkBlue
-    &__submit
-      &__btn
-        color darkBlue
-
-.sended
-  .wsFileGeneric__messagelist__item__content
-    margin-right 25%
 
 .received
-  .wsFileGeneric__messagelist__item
+  text-align right
+  .wsContentGeneric__messagelist__item
     &__avatar
-      left 93%
+      left 20px
     &__createhour
-      text-align right
-      margin-right 50px
+      margin-left 0
+      margin-right 35px
     &__content
-      margin-left 25%
-      background-color darkBlue
       color white
+      background-color darkBlue
 
 .activeEditionTitle
   .wsContentThread