changing the way comments are published

src/component/Timeline/Timeline.jsx

@@ -70,20 +70,32 @@ const Timeline = props => {
         })}
       </ul>
 
-      <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
-        <div className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg')}>
-          <textarea />
+      <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor d-flex align-items-center justify-content-between flex-wrap')}>
+
+        <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
+          <textarea placeholder='Taper votre message ici'/>
         </div>
-        <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-inline-flex d-lg-flex justify-content-lg-center')}>
-          <button
-            type='submit'
-            className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
-          >
-            Envoyer
-            <div className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
-              <i className='fa fa-paper-plane-o' />
-            </div>
-          </button>
+
+        <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__texteditor__wrapper')}>
+
+          <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__texteditor__advancedtext')}>
+            <button type='button' className={classnames(`${props.customClass}__texteditor__advancedtext__btn`, 'timeline__texteditor__advancedtext__btn btn btn-outline-primary')}>
+              Texte Avancé
+            </button>
+          </div>
+
+          <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
+            <button
+              type='submit'
+              className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
+            >
+              Envoyer
+              <div className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
+                <i className='fa fa-paper-plane-o' />
+              </div>
+            </button>
+          </div>
+
         </div>
       </form>
     </div>

src/component/Timeline/Timeline.styl

@@ -58,7 +58,7 @@
         font-size 17px
         & > i
           margin-right 10px
-          color darkGrey
+          color off-white
           font-size 22px
       &__date
         color fontColor
@@ -66,16 +66,25 @@
         margin auto 0
   &__texteditor
     flex 0 1 auto
-    padding 2px
-    &__wysiwyg
-      display block
+    border-top 1px solid grey
+    padding 25px 10px
+    &__textinput
+      width 70%
       & > textarea
+        border-radius 5px
+        border 1.5px solid grey
+        padding 5px
+        height 80px
         width 100%
-        height 130px
+    &__wrapper
+      display flex
+      flex-direction column
+      justify-content center
     &__submit
       margin 10px 0
       &__btn
         display flex
+        width 118px
         cursor pointer
         &:hover , &:focus
           box-shadow shadow-all-btn
@@ -93,6 +102,20 @@
     &__content
       color white
 
+.activeAdvancedText
+  .timeline
+    &__texteditor
+      padding 10px
+      height 220px
+      &__textinput
+        width 100%
+      &__wrapper
+        flex-direction row
+        align-items center
+        width 100%
+      &__advancedtext
+        margin-right 20px
+
 
 /**** MEDIA 576px & 1199px ****/