added proper color management for card popup and card popup create content

src/component/CardPopup/CardPopup.jsx

@@ -8,7 +8,7 @@ const CardPopup = props => {
   return (
     <div className={classnames(props.customClass, 'cardPopup')}>
       <div className='cardPopup__container'>
-        <div className='cardPopup__header' />
+        <div className='cardPopup__header' style={{backgroundColor: props.customColor}} />
 
         <div className='cardPopup__close' onClick={props.onClose}>
           <i className='fa fa-times' />
@@ -26,10 +26,12 @@ export default CardPopup
 
 CardPopup.propTypes = {
   customClass: PropTypes.string,
+  customColor: PropTypes.string,
   onClose: PropTypes.func
 }
 
 CardPopup.defaultProps = {
   customClass: 'defaultCustomClass',
+  customColor: '',
   onClose: () => {}
 }

src/component/CardPopup/CardPopupCreateContent.jsx

@@ -1,19 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Radium from 'radium'
 import CardPopup from './CardPopup.jsx'
 
 require('./CardPopupCreateContent.styl')
 
 const PopupCreateContent = props => {
   return (
-    <CardPopup customClass='popupCreateContent' onClose={props.onClose}>
+    <CardPopup
+      customClass='popupCreateContent'
+      customColor={props.customColor}
+      onClose={props.onClose}
+    >
       <div className='createcontent'>
         <div className='createcontent__contentname mb-4'>
           <div className='createcontent__contentname__icon ml-1 mr-3'>
-            <i className={`fa fa-${props.faIcon}`} style={{color: props.color}} />
+            <i className={`fa fa-${props.faIcon}`} style={{color: props.customColor}} />
           </div>
 
-          <div className='createcontent__contentname__title' style={{color: props.color}}>
+          <div className='createcontent__contentname__title' style={{color: props.customColor}}>
             {props.label}
           </div>
         </div>
@@ -31,6 +36,15 @@ const PopupCreateContent = props => {
               type='button' // do neither remove this nor set it to 'submit' otherwise clicking the btn will submit the form and reload the page
               className='createcontent__form__button btn btn-primary'
               onClick={props.onValidate}
+              style={{
+                backgroundColor: '#fdfdfd',
+                color: props.customColor,
+                borderColor: props.customColor,
+                ':hover': {
+                  backgroundColor: props.customColor,
+                  color: '#fdfdfd'
+                }
+              }}
             >
               {props.btnValidateLabel}
             </button>
@@ -47,16 +61,16 @@ PopupCreateContent.propTypes = {
   contentName: PropTypes.string.isRequired,
   onChangeContentName: PropTypes.func.isRequired,
   label: PropTypes.string,
-  hexcolor: PropTypes.string,
+  customColor: PropTypes.string,
   faIcon: PropTypes.string,
   btnValidateLabel: PropTypes.string
 }
 
 PopupCreateContent.defaultProps = {
   label: '',
-  hexcolor: '#333',
+  customColor: '#333',
   inputPlaceHolder: '',
   btnValidateLabel: ''
 }
 
-export default PopupCreateContent
+export default Radium(PopupCreateContent)