added proper color management + comment about better handling of custom events

src/component/HtmlDocument.jsx

@@ -25,6 +25,7 @@ const HtmlDocument = props => {
         <TextAreaApp
           id={props.wysiwygNewVersion}
           customClass={'html-documents__editionmode'}
+          customColor={props.customColor}
           onClickCancelBtn={props.onClickCloseEditMode}
           onClickValidateBtn={props.onClickValidateBtn}
           text={props.text}

src/container/HtmlDocument.jsx

@@ -278,23 +278,35 @@ class HtmlDocument extends React.Component {
     if (!isVisible) return null
 
     return (
-      <PopinFixed customClass={`${config.slug}`}>
+      <PopinFixed
+        customClass={`${config.slug}`}
+        customColor={config.hexcolor}
+      >
         <PopinFixedHeader
           customClass={`${config.slug}`}
+          customColor={config.hexcolor}
           faIcon={config.faIcon}
           title={content.label}
           onClickCloseBtn={this.handleClickBtnCloseApp}
           onValidateChangeTitle={this.handleSaveEditTitle}
         />
 
-        <PopinFixedOption customClass={`${config.slug}`} i18n={i18n}>
+        <PopinFixedOption
+          customColor={config.hexcolor}
+          customClass={`${config.slug}`}
+          i18n={i18n}
+        >
           <div /* this div in display flex, justify-content space-between */>
             <div className='d-flex'>
-              <NewVersionBtn onClickNewVersionBtn={this.handleClickNewVersion} disabled={mode !== MODE.VIEW} />
+              <NewVersionBtn
+                customColor={config.hexcolor}
+                onClickNewVersionBtn={this.handleClickNewVersion}
+                disabled={mode !== MODE.VIEW}
+              />
 
               {mode === MODE.REVISION &&
                 <button
-                  className='wsContentGeneric__option__menu__lastversion html-documents__lastversionbtn btn btn-default'
+                  className='wsContentGeneric__option__menu__lastversion html-documents__lastversionbtn btn'
                   onClick={this.handleClickLastVersion}
                   style={{backgroundColor: config.hexcolor, color: '#fdfdfd'}}
                 >
@@ -313,6 +325,7 @@ class HtmlDocument extends React.Component {
               />
 
               <ArchiveDeleteContent
+                customColor={config.hexcolor}
                 onClickArchiveBtn={this.handleClickArchive}
                 onClickDeleteBtn={this.handleClickDelete}
                 disabled={mode === MODE.REVISION}
@@ -327,6 +340,7 @@ class HtmlDocument extends React.Component {
         >
           <HtmlDocumentComponent
             mode={mode}
+            customColor={config.hexcolor}
             wysiwygNewVersion={'wysiwygNewVersion'}
             onClickCloseEditMode={this.handleCloseNewVersion}
             onClickValidateBtn={this.handleSaveHtmlDocument}
@@ -339,6 +353,7 @@ class HtmlDocument extends React.Component {
 
           <Timeline
             customClass={`${config.slug}__contentpage`}
+            customColor={config.hexcolor}
             loggedUser={loggedUser}
             timelineData={timeline}
             newComment={newComment}

src/css/index.styl

@@ -1,54 +1,18 @@
 @import "../../node_modules/tracim_lib/src/css/Variable.styl"
 
-btncolor()
-  background-color htmlColor
-  color off-white
-
-btnState()
-  background-color darkHtmlColor
-  color off-white
-
 .html-documents
   width 70%
   &__header
-    background-color htmlColor
     &__editionmode
       display none
     &__icon
       .fa-file-text-o
         color white
-  .newversionbtn
-    border-color htmlColor
-    color fontColor
-    &:hover, &:focus, &:visited, &:active
-      btnState()
-      border-color darkHtmlColor
-      box-shadow none
   &__lastversionbtn
     & > i
       font-size 20px
-  .optionicon
-    &:hover, &:focus, &:active
-      color htmlColor
   .selectStatus
     margin-right 15px
-    .dropdown-item
-      &:hover, &:focus, &:active, &visited, &:focus-within
-        background-color htmlColor
-        color off-white!important // @FIXME 04/07/2018 AC - we must use a plugin for this
-  &__editionmode
-    &__cancel
-      border-color htmlColor
-      color htmlColor
-      &:hover, &:focus, &:active, &:visited, &focus-within
-        border-color htmlColor
-        btncolor()
-    &__submit
-      border-color htmlColor
-      color htmlColor
-      &:hover, &:focus, &:active, &:visited, &focus-within
-        border-color htmlColor
-        btncolor()
   &__contentpage
     &__textnote
       margin 10px 5px 10px 10px
@@ -86,31 +50,13 @@ btnState()
           width 145px
           color white
           font-size 17px
-          background-color htmlColor
           & > i
             margin-right 10px
             color darkGrey
             font-size 20px
-          &:hover, &:focus
-            btnState()
         &__date
           color fontColor
           font-size 17px
-    &__texteditor
-      &__advancedtext
-        &__btn
-          color fontColor
-          border-color htmlColor
-          &:hover ,&:focus, &:visited, &:active
-            btnState()
-            border-color darkHtmlColor
-            box-shadow none
-      &__submit
-        &__btn
-          background-color htmlColor
-          color white
-          &:hover, &:focus, &:visited, &:active
-            background-color darkHtmlColor
 
 .messagelistOpen
   .timeline__messagelist
@@ -121,23 +67,6 @@ btnState()
   .timeline__messagelist__item__content
     background-color htmlColor
 
-.popupCreateContent
-  .cardPopup
-    &__header
-      background-color htmlColor
-  .createcontent
-    &__contentname
-      color htmlColor
-    &__form
-      &__button
-        & > button
-          border-color htmlColor
-          background-color htmlColor
-          &:hover, &:active, &:visited &:focus
-            background-color darkHtmlColor
-            box-shadow none
-
-
 @media (min-width: min-sm) and (max-width: max-lg)
   .html-documents
     &__contentpage

src/index.js

@@ -2,13 +2,17 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import HtmlDocument from './container/HtmlDocument.jsx'
 import PopupCreateHtmlDocument from './container/PopupCreateHtmlDocument.jsx'
+// @TODO make a file that contains all events implemented by this App.
+// @todo add this file to appInterface
+// @todo app shall make it's customReducer from the events of this app
+// so it will be testable by tracim_frontend
 
 require('./css/index.styl')
 
 const appInterface = {
   name: 'HtmlDocument',
   isRendered: false,
-  renderApp: data => {
+  renderApp: data => { // renderAppFull
     return ReactDOM.render(
       <HtmlDocument data={data} />
       , document.getElementById(data.config.domContainer)
@@ -17,7 +21,7 @@ const appInterface = {
   unmountApp: domId => {
     return ReactDOM.unmountComponentAtNode(document.getElementById(domId)) // returns bool
   },
-  renderPopupCreation: data => {
+  renderPopupCreation: data => { // renderAppPopupCreation
     return ReactDOM.render(
       <PopupCreateHtmlDocument data={data} />
       , document.getElementById(data.config.domContainer)