Fix message received, change of timeline comment design, fix icon on popinfixedoption

src/component/PopinFixed/PopinFixed.styl

@@ -54,11 +54,6 @@
     padding 10px
     height 58px
     background-color off-white
-    & > i
-      vertical-align middle
-      margin-right 15px
-      font-size 25px
-      cursor pointer
     &__menu
       & > div
         display flex
@@ -68,10 +63,10 @@
         align-items center
         cursor pointer
       &__action
-        margin 5px 10px 0 0
         font-size 18px
         background-color transparent
         border none
+        cursor pointer
         &:hover , &:focus
           color blue
   &__content

src/component/Timeline/Comment.jsx

@@ -9,8 +9,10 @@ const Comment = props => (
       'received': !props.fromMe
     }
   )}>
-    <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-      {props.avatar ? <img src={props.avatar} /> : ''}
+    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__messagelist__item__wrapper')}>
+      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+        {props.avatar ? <img src={props.avatar} /> : ''}
+      </div>
     </div>
     <div
       className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>

src/component/Timeline/Timeline.jsx

@@ -57,7 +57,7 @@ class Timeline extends React.Component {
           <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
         </ul>
 
-        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor d-flex align-items-center justify-content-between flex-wrap')}>
+        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
           <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
             <textarea
               id='wysiwygTimelineComment'
@@ -82,7 +82,7 @@ class Timeline extends React.Component {
               </button>
             </div>
 
-            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
+            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit')}>
               <button
                 type='button'
                 className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}

src/component/Timeline/Timeline.styl

@@ -29,8 +29,8 @@
         top 40px
         left -20px
         border-radius 50%
-        width 50px
-        height 50px
+        width 45px
+        height 45px
         & > img
           width 45px
           height 45px
@@ -74,7 +74,7 @@
     flex 1 0 auto
     margin 20px
     &__textinput
-      width 70%
+      width 100%
       & > textarea
         border-radius 5px
         border 1.5px solid grey
@@ -83,10 +83,12 @@
         width 100%
     &__wrapper
       display flex
-      flex-direction column
-      justify-content center
+      align-items center
+      justify-content flex-end
+      margin-top 10px
+    &__advancedtext
+      margin-right 15px
     &__submit
-      margin 10px 0
       &__btn
         display inline-block
         cursor pointer
@@ -97,27 +99,17 @@
 .received
   text-align right
   .timeline__messagelist__item
+    &__wrapper
+      display flex
+      flex-direction row-reverse
     &__avatar
-      left 93%
+      left 20px
     &__createhour
       margin-left 0
       margin-right 35px
     &__content
       color white
 
-.activeAdvancedText
-  .timeline
-    &__texteditor
-      padding 10px
-      &__textinput
-        width 100%
-      &__wrapper
-        flex-direction row
-        align-items center
-        width 100%
-      &__advancedtext
-        margin-right 20px
-
 
 /**** MEDIA 576px & 1199px ****/