added proper color management

src/container/PopupCreateThread.jsx

@@ -65,6 +65,8 @@ class PopupCreateHtmlDocument extends React.Component {
         if (resSave.apiResponse.status === 200) {
           this.handleClose()
 
+          GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
+
           GLOBAL_dispatchEvent({
             type: 'openContentUrl', // handled by tracim_front:src/container/WorkspaceContent.jsx
             data: {

src/container/Thread.jsx

@@ -110,8 +110,12 @@ class Thread extends React.Component {
 
     handleFetchResult(await fetchResultSaveThread)
       .then(resSave => {
-        if (resSave.apiResponse.status === 200) this.loadContent()
-        else console.warn('Error saving threads. Result:', resSave, 'content:', content, 'config:', config)
+        if (resSave.apiResponse.status === 200) {
+          this.loadContent()
+          GLOBAL_dispatchEvent({ type: 'refreshContentList', data: {} })
+        } else {
+          console.warn('Error saving threads. Result:', resSave, 'content:', content, 'config:', config)
+        }
       })
   }
 
@@ -164,16 +168,24 @@ class Thread extends React.Component {
     if (!isVisible) return null
 
     return (
-      <PopinFixed customClass={`wsContentThread`}>
+      <PopinFixed
+        customClass={config.slug}
+        customColor={config.hexcolor}
+      >
         <PopinFixedHeader
-          customClass={`wsContentThread`}
+          customClass={`${config.slug}__contentpage`}
+          customColor={config.hexcolor}
           faIcon={config.faIcon}
           title={content.label}
           onClickCloseBtn={this.handleClickBtnCloseApp}
           onValidateChangeTitle={this.handleSaveEditTitle}
         />
 
-        <PopinFixedOption customClass={`wsContentThread`} i18n={i18n}>
+        <PopinFixedOption
+          customClass={`${config.slug}__contentpage`}
+          customColor={config.hexcolor}
+          i18n={i18n}
+        >
           <div className='justify-content-end'>
             <SelectStatus
               selectedStatus={config.availableStatuses.find(s => s.slug === content.status)}
@@ -183,6 +195,7 @@ class Thread extends React.Component {
             />
 
             <ArchiveDeleteContent
+              customColor={config.hexcolor}
               onClickArchiveBtn={this.handleClickArchive}
               onClickDeleteBtn={this.handleClickDelete}
               disabled={false}
@@ -190,9 +203,12 @@ class Thread extends React.Component {
           </div>
         </PopinFixedOption>
 
-        <PopinFixedContent customClass={`${config.customClass}__contentpage`}>
+        <PopinFixedContent
+          customClass={`${config.slug}__contentpage`}
+        >
           <Timeline
             customClass={`${config.slug}__contentpage`}
+            customColor={config.hexcolor}
             loggedUser={loggedUser}
             timelineData={listMessage}
             newComment={newComment}

src/css/index.styl

@@ -1,14 +1,8 @@
 @import "../../node_modules/tracim_lib/src/css/Variable.styl"
 
-btnState()
-  background-color darkenThread
-  color off-white
-
-.wsContentThread
+.thread
   width 1100px
   &__header
-    // color white
-    background-color threadColor
     &__editionmode
       display none
     &__icon
@@ -16,60 +10,18 @@ btnState()
         color white
   .selectStatus
     margin-right 15px
-    .dropdown-item
-      &:hover, &:focus, &:active, &visited, &:focus-within
-        background-color threadColor
-        color off-white!important // @FIXME 04/07/2018 AC - we must use a plugin for this
-  .optionicon
-    &:hover, &:focus, &:active
-      color threadColor
   .timeline
     margin 0
   .thread
     &__contentpage
+      &__content
+        width 100%
       &__messagelist
         &__item__avatar
           border 1px solid darkenThread
           background-color off-white
       &__texteditor
         flex 0 0 auto
-        &__advancedtext
-          &__btn
-            color fontColor
-            border-color threadColor
-            cursor pointer
-            &:hover ,&:focus, &:visited, &:active
-              btnState()
-              border-color darkenThread
-              box-shadow none
-        &__submit
-          &__btn
-            background-color threadColor
-            color white
-            &:hover, &:focus, &:visited, &:active
-              background-color darkenThread
-
-
-.received
-  .timeline__messagelist__item__content
-    background-color threadColor
-
-.popupCreateContent
-  .cardPopup
-    &__header
-      background-color threadColor
-  .createcontent
-    &__contentname
-      color threadColor
-    &__form
-      &__button
-        & > button
-          border-color threadColor
-          background-color threadColor
-          &:hover, &:active, &:visited &:focus
-            background-color darkenThread
-            box-shadow none
-
 
 @media (min-width: min-lg) and (max-width: max-lg)
   .wsContentThread

src/helper.js

@@ -10,7 +10,7 @@ export const debug = { // copied from html-documents => outdated
     label: 'Thread',
     slug: 'thread',
     faIcon: 'comments-o',
-    hexcolor: '#65c7f2',
+    hexcolor: '#ad4cf9',
     creationLabel: 'Write a thread',
     domContainer: 'appContainer',
     apiUrl: 'http://localhost:6543/api/v2',