Browse Source

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

Skylsmoi 6 years ago
parent
commit
79b31f6e5e

+ 3 - 1
src/component/CardPopup/CardPopup.jsx View File

8
   return (
8
   return (
9
     <div className={classnames(props.customClass, 'cardPopup')}>
9
     <div className={classnames(props.customClass, 'cardPopup')}>
10
       <div className='cardPopup__container'>
10
       <div className='cardPopup__container'>
11
-        <div className='cardPopup__header' />
11
+        <div className='cardPopup__header' style={{backgroundColor: props.customColor}} />
12
 
12
 
13
         <div className='cardPopup__close' onClick={props.onClose}>
13
         <div className='cardPopup__close' onClick={props.onClose}>
14
           <i className='fa fa-times' />
14
           <i className='fa fa-times' />
26
 
26
 
27
 CardPopup.propTypes = {
27
 CardPopup.propTypes = {
28
   customClass: PropTypes.string,
28
   customClass: PropTypes.string,
29
+  customColor: PropTypes.string,
29
   onClose: PropTypes.func
30
   onClose: PropTypes.func
30
 }
31
 }
31
 
32
 
32
 CardPopup.defaultProps = {
33
 CardPopup.defaultProps = {
33
   customClass: 'defaultCustomClass',
34
   customClass: 'defaultCustomClass',
35
+  customColor: '',
34
   onClose: () => {}
36
   onClose: () => {}
35
 }
37
 }

+ 20 - 6
src/component/CardPopup/CardPopupCreateContent.jsx View File

1
 import React from 'react'
1
 import React from 'react'
2
 import PropTypes from 'prop-types'
2
 import PropTypes from 'prop-types'
3
+import Radium from 'radium'
3
 import CardPopup from './CardPopup.jsx'
4
 import CardPopup from './CardPopup.jsx'
4
 
5
 
5
 require('./CardPopupCreateContent.styl')
6
 require('./CardPopupCreateContent.styl')
6
 
7
 
7
 const PopupCreateContent = props => {
8
 const PopupCreateContent = props => {
8
   return (
9
   return (
9
-    <CardPopup customClass='popupCreateContent' onClose={props.onClose}>
10
+    <CardPopup
11
+      customClass='popupCreateContent'
12
+      customColor={props.customColor}
13
+      onClose={props.onClose}
14
+    >
10
       <div className='createcontent'>
15
       <div className='createcontent'>
11
         <div className='createcontent__contentname mb-4'>
16
         <div className='createcontent__contentname mb-4'>
12
           <div className='createcontent__contentname__icon ml-1 mr-3'>
17
           <div className='createcontent__contentname__icon ml-1 mr-3'>
13
-            <i className={`fa fa-${props.faIcon}`} style={{color: props.color}} />
18
+            <i className={`fa fa-${props.faIcon}`} style={{color: props.customColor}} />
14
           </div>
19
           </div>
15
 
20
 
16
-          <div className='createcontent__contentname__title' style={{color: props.color}}>
21
+          <div className='createcontent__contentname__title' style={{color: props.customColor}}>
17
             {props.label}
22
             {props.label}
18
           </div>
23
           </div>
19
         </div>
24
         </div>
31
               type='button' // do neither remove this nor set it to 'submit' otherwise clicking the btn will submit the form and reload the page
36
               type='button' // do neither remove this nor set it to 'submit' otherwise clicking the btn will submit the form and reload the page
32
               className='createcontent__form__button btn btn-primary'
37
               className='createcontent__form__button btn btn-primary'
33
               onClick={props.onValidate}
38
               onClick={props.onValidate}
39
+              style={{
40
+                backgroundColor: '#fdfdfd',
41
+                color: props.customColor,
42
+                borderColor: props.customColor,
43
+                ':hover': {
44
+                  backgroundColor: props.customColor,
45
+                  color: '#fdfdfd'
46
+                }
47
+              }}
34
             >
48
             >
35
               {props.btnValidateLabel}
49
               {props.btnValidateLabel}
36
             </button>
50
             </button>
47
   contentName: PropTypes.string.isRequired,
61
   contentName: PropTypes.string.isRequired,
48
   onChangeContentName: PropTypes.func.isRequired,
62
   onChangeContentName: PropTypes.func.isRequired,
49
   label: PropTypes.string,
63
   label: PropTypes.string,
50
-  hexcolor: PropTypes.string,
64
+  customColor: PropTypes.string,
51
   faIcon: PropTypes.string,
65
   faIcon: PropTypes.string,
52
   btnValidateLabel: PropTypes.string
66
   btnValidateLabel: PropTypes.string
53
 }
67
 }
54
 
68
 
55
 PopupCreateContent.defaultProps = {
69
 PopupCreateContent.defaultProps = {
56
   label: '',
70
   label: '',
57
-  hexcolor: '#333',
71
+  customColor: '#333',
58
   inputPlaceHolder: '',
72
   inputPlaceHolder: '',
59
   btnValidateLabel: ''
73
   btnValidateLabel: ''
60
 }
74
 }
61
 
75
 
62
-export default PopupCreateContent
76
+export default Radium(PopupCreateContent)