refactored with proper color management

package.json

@@ -29,6 +29,7 @@
     "file-loader": "^1.1.5",
     "i18next": "^10.5.0",
     "prop-types": "^15.6.0",
+    "radium": "^0.24.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-i18next": "^7.5.0",

src/component/Input/TextAreaApp/TextAreaApp.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Radium from 'radium'
 
 require('./TextAreaApp.styl')
 
@@ -15,23 +16,43 @@ export const TextAreaApp = props =>
     <div className={`${props.customClass}__button editionmode__button`}>
       <button
         type='button'
-        className={`${props.customClass}__cancel editionmode__button__cancel btn btn-outline-primary mr-3`}
+        className={`${props.customClass}__cancel editionmode__button__cancel btn mr-3`}
         onClick={props.onClickCancelBtn}
+        style={{
+          backgroundColor: '#fdfdfd',
+          color: props.customColor,
+          borderColor: props.customColor,
+          ':hover': {
+            backgroundColor: props.customColor,
+            color: '#fdfdfd'
+          }
+        }}
+        key='TextAreaApp__cancel'
       >
         Annuler
       </button>
 
       <button
         type='button'
-        className={`${props.customClass}__submit editionmode__button__submit btn btn-outline-primary`}
+        className={`${props.customClass}__submit editionmode__button__submit btn`}
         onClick={props.onClickValidateBtn}
+        style={{
+          backgroundColor: '#fdfdfd',
+          color: props.customColor,
+          borderColor: props.customColor,
+          ':hover': {
+            backgroundColor: props.customColor,
+            color: '#fdfdfd'
+          }
+        }}
+        key='TextAreaApp__validate'
       >
         Valider
       </button>
     </div>
   </form>
 
-export default TextAreaApp
+export default Radium(TextAreaApp)
 
 TextAreaApp.propTypes = {
   text: PropTypes.string.isRequired,
@@ -39,5 +60,6 @@ TextAreaApp.propTypes = {
   onClickCancelBtn: PropTypes.func.isRequired,
   onClickValidateBtn: PropTypes.func.isRequired,
   id: PropTypes.string,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  customColor: PropTypes.string
 }

src/component/OptionComponent/ArchiveDeleteContent.jsx

@@ -1,6 +1,15 @@
 import React from 'react'
+import Radium from 'radium'
 
 const ArchiveDeleteContent = props => {
+  const styleColorBtn = {
+    backgroundColor: '#fdfdfd',
+    color: '#333',
+    ':hover': {
+      color: props.customColor
+    }
+  }
+
   return (
     <div className='d-flex align-items-center'>
       <button
@@ -9,6 +18,8 @@ const ArchiveDeleteContent = props => {
         onClick={props.onClickArchiveBtn}
         disabled={props.disabled}
         title='Archiver'
+        style={styleColorBtn}
+        key={'archiveDeleteContent__archive'}
       >
         <i className='fa fa-fw fa-archive' />
       </button>
@@ -18,6 +29,8 @@ const ArchiveDeleteContent = props => {
         onClick={props.onClickDeleteBtn}
         disabled={props.disabled}
         title='Supprimer'
+        style={styleColorBtn}
+        key={'archiveDeleteContent__delete'}
       >
         <i className='fa fa-fw fa-trash' />
       </button>
@@ -25,4 +38,4 @@ const ArchiveDeleteContent = props => {
   )
 }
 
-export default ArchiveDeleteContent
+export default Radium(ArchiveDeleteContent)

src/component/OptionComponent/NewVersionBtn.jsx

@@ -1,11 +1,22 @@
 import React from 'react'
+import Radium from 'radium'
 
 const NewVersionBtn = props => {
   return (
     <button
-      className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary'
+      className='wsContentGeneric__option__menu__addversion newversionbtn btn'
       onClick={props.onClickNewVersionBtn}
       disabled={props.disabled}
+      style={{
+        backgroundColor: '#fdfdfd',
+        color: '#333',
+        border: '1px solid',
+        borderColor: props.customColor,
+        ':hover': {
+          backgroundColor: props.customColor,
+          color: '#fdfdfd'
+        }
+      }}
     >
       Modifier
       <i className='fa fa-plus-circle ml-3' />
@@ -13,4 +24,4 @@ const NewVersionBtn = props => {
   )
 }
 
-export default NewVersionBtn
+export default Radium(NewVersionBtn)

src/component/PopinFixed/PopinFixedHeader.jsx

@@ -27,10 +27,10 @@ class PopinFixedHeader extends React.Component {
   }
 
   render () {
-    const { customClass, faIcon, title, onClickCloseBtn } = this.props
+    const { customClass, customColor, faIcon, title, onClickCloseBtn } = this.props
 
     return (
-      <div className={classnames('wsContentGeneric__header', `${customClass}__header`)}>
+      <div className={classnames('wsContentGeneric__header', `${customClass}__header`)} style={{backgroundColor: customColor}}>
         <div className={classnames('wsContentGeneric__header__icon', `${customClass}__header__icon`)}>
           <i className={`fa fa-${faIcon}`} />
         </div>
@@ -66,12 +66,14 @@ PopinFixedHeader.propTypes = {
   faIcon: PropTypes.string.isRequired,
   onClickCloseBtn: PropTypes.func.isRequired,
   customClass: PropTypes.string,
+  customColor: PropTypes.string,
   title: PropTypes.string,
   onValidateChangeTitle: PropTypes.func
 }
 
 PopinFixedHeader.defaultProps = {
   customClass: '',
+  customColor: '',
   title: '',
   onChangeTitle: () => {}
 }

src/component/Timeline/Comment.jsx

@@ -1,28 +1,41 @@
 import React from 'react'
 import classnames from 'classnames'
 
-const Comment = props => (
-  <li className={classnames(
-    `${props.customClass}__messagelist__item`,
-    'timeline__body__messagelist__item', {
-      'received': props.fromMe, // @FIXME : invert names of class (received should be !fromMe)
-      'sended': !props.fromMe
-    }
-  )}>
-    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
-      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
-        {props.avatar ? <img src={props.avatar} /> : ''}
+const Comment = props => {
+  const styleSent = {
+    color: '#fdfdfd',
+    backgroundColor: props.customColor
+  }
+
+  const styleReceived = {
+    color: '#333',
+    backgroundColor: '#fdfdfd'
+  }
+
+  return (
+    <li className={classnames(
+      `${props.customClass}__messagelist__item`,
+      'timeline__body__messagelist__item', {
+        'sent': props.fromMe,
+        'received': !props.fromMe
+      }
+    )}>
+      <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
+        <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
+          {props.avatar ? <img src={props.avatar} /> : ''}
+        </div>
+      </div>
+      <div
+        className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__body__messagelist__item__createhour')}>
+        {props.createdAt}
       </div>
-    </div>
-    <div
-      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__body__messagelist__item__createhour')}>
-      {props.createdAt}
-    </div>
-    <div
-      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__body__messagelist__item__content')}
-      dangerouslySetInnerHTML={{__html: props.text}}
-    />
-  </li>
-)
+      <div
+        className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__body__messagelist__item__content')}
+        style={props.fromMe ? styleSent : styleReceived}
+        dangerouslySetInnerHTML={{__html: props.text}}
+      />
+    </li>
+  )
+}
 
 export default Comment

src/component/Timeline/Revision.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
+import Radium from 'radium'
+import color from 'color'
 
 const Revision = props => (
   <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__body__messagelist__version')} >
@@ -7,6 +9,13 @@ const Revision = props => (
       type='button'
       className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__body__messagelist__version__btn btn')}
       onClick={props.onClickRevision}
+      style={{
+        backgroundColor: props.customColor,
+        color: '#fdfdfd',
+        ':hover': {
+          backgroundColor: color(props.customColor).darken(0.15).hexString()
+        }
+      }}
     >
       <i className='fa fa-code-fork' />
       version {props.number}
@@ -18,4 +27,4 @@ const Revision = props => (
   </li>
 )
 
-export default Revision
+export default Radium(Revision)

src/component/Timeline/Timeline.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Radium from 'radium'
+import color from 'color'
 import Comment from './Comment.jsx'
 import Revision from './Revision.jsx'
 
@@ -43,6 +45,7 @@ class Timeline extends React.Component {
                 case 'comment':
                   return <Comment
                     customClass={props.customClass}
+                    customColor={props.customColor}
                     avatar={content.author.avatar_url}
                     createdAt={content.created}
                     text={content.raw_content}
@@ -53,6 +56,7 @@ class Timeline extends React.Component {
                 case 'revision':
                   return <Revision
                     customClass={props.customClass}
+                    customColor={props.customColor}
                     createdAt={content.created}
                     number={content.number}
                     key={`revision_${content.revision_id}`}
@@ -79,10 +83,20 @@ class Timeline extends React.Component {
                 <button
                   type='button'
                   className={classnames(
-                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn btn-outline-primary`
+                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn`
                   )}
                   onClick={props.onClickWysiwygBtn}
                   disabled={props.disableComment}
+                  style={{
+                    backgroundColor: 'transparent',
+                    color: '#333',
+                    borderColor: props.customColor,
+                    ':hover': {
+                      backgroundColor: props.customColor,
+                      color: '#fdfdfd'
+                    }
+                  }}
+                  key={'timeline__comment__advancedtext'}
                 >
                   {props.wysiwyg ? 'Texte Simple' : 'Texte Avancé'}
                 </button>
@@ -94,6 +108,14 @@ class Timeline extends React.Component {
                   className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
                   onClick={props.onClickValidateNewCommentBtn}
                   disabled={props.disableComment}
+                  style={{
+                    backgroundColor: props.customColor,
+                    color: '#fdfdfd',
+                    ':hover': {
+                      backgroundColor: color(props.customColor).darken(0.15).hexString()
+                    }
+                  }}
+                  key={'timeline__comment__send'}
                 >
                   Envoyer
                   <div
@@ -110,7 +132,7 @@ class Timeline extends React.Component {
   }
 }
 
-export default Timeline
+export default Radium(Timeline)
 
 Timeline.propTypes = {
   timelineData: PropTypes.array.isRequired,
@@ -119,6 +141,7 @@ Timeline.propTypes = {
   onClickValidateNewCommentBtn: PropTypes.func.isRequired,
   disableComment: PropTypes.bool,
   customClass: PropTypes.string,
+  customColor: PropTypes.string,
   loggedUser: PropTypes.object,
   wysiwyg: PropTypes.bool,
   onClickWysiwygBtn: PropTypes.func,
@@ -130,6 +153,7 @@ Timeline.propTypes = {
 Timeline.defaultProps = {
   disableComment: false,
   customClass: '',
+  customColor: '',
   loggedUser: {
     id: '',
     name: '',

src/component/Timeline/Timeline.styl

@@ -107,7 +107,7 @@
             display inline-block
             margin-left 20px
 
-.received
+.sent
   text-align right
   .timeline__body__messagelist__item
     &__wrapper
@@ -118,8 +118,6 @@
     &__createhour
       margin-left 0
       margin-right 35px
-    &__content
-      color white
 
 
 .mce-btn-group:not(:first-child)

src/index.dev.js

@@ -17,6 +17,9 @@ import Delimiter from './component/Delimiter/Delimiter.jsx'
 import CardPopup from './component/CardPopup/CardPopup.jsx'
 import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
 
+import NewVersionButton from './component/OptionComponent/NewVersionBtn.jsx'
+import ArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteContent.jsx'
+
 ReactDOM.render(
   <div style={{width: '1200px'}}>
     <PopinFixed customClass={`${'randomClass'}`}>
@@ -69,6 +72,8 @@ ReactDOM.render(
 
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
         <div>
+          <NewVersionButton customColor='#3f52e3' />
+          <ArchiveDeleteContent customColor='#3f52e3' />
           <Delimiter />
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
           <BtnSwitch />
@@ -77,8 +82,9 @@ ReactDOM.render(
 
         <Timeline
           customClass={`${'randomClass'}__contentpage`}
+          customColor={'#3f52e3'}
           loggedUser={{
-            user_id: 5,
+            user_id: 1,
             username: 'Smoi',
             firstname: 'Côme',
             lastname: 'Stoilenom',