diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css index 1fd2e0c0..e09a64a3 100644 --- a/src/components/color-button/color-button.css +++ b/src/components/color-button/color-button.css @@ -30,3 +30,8 @@ color: #575e75; font-size: 0.75rem; } + +.swatch-icon { + width: 1.75rem; + margin: auto; +} diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx index 9a7087e5..f36bdb66 100644 --- a/src/components/color-button/color-button.jsx +++ b/src/components/color-button/color-button.jsx @@ -1,8 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {MIXED} from '../../helper/style-path'; + +import noFillIcon from './no-fill.svg'; +import mixedFillIcon from './mixed-fill.svg'; import styles from './color-button.css'; +const colorToBackground = (color) => { + return color === MIXED || color === null ? 'white' : color +}; + const ColorButtonComponent = props => (
(
+ > + {props.color === null ? ( + + ) : ((props.color === MIXED ? ( + + ) : null))} +
); diff --git a/src/components/color-button/mixed-fill.svg b/src/components/color-button/mixed-fill.svg new file mode 100644 index 00000000..7a4fbcde --- /dev/null +++ b/src/components/color-button/mixed-fill.svg @@ -0,0 +1,16 @@ + + + + mixed-fill + Created with Sketch. + + + + + + + + + + + diff --git a/src/components/color-button/no-fill.svg b/src/components/color-button/no-fill.svg new file mode 100644 index 00000000..d955dda1 --- /dev/null +++ b/src/components/color-button/no-fill.svg @@ -0,0 +1,12 @@ + + + + no-fill + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css index 5ef9b537..3a796cff 100644 --- a/src/components/color-picker/color-picker.css +++ b/src/components/color-picker/color-picker.css @@ -48,3 +48,7 @@ border: 1px solid #4C97FF; box-shadow: 0px 0px 0px 3px hsla(215, 100%, 65%, 0.2); } + +.swatch > img { + max-width: 100%; +} diff --git a/src/components/color-picker/color-picker.jsx b/src/components/color-picker/color-picker.jsx index ab54a986..1317a510 100644 --- a/src/components/color-picker/color-picker.jsx +++ b/src/components/color-picker/color-picker.jsx @@ -9,6 +9,7 @@ import {MIXED} from '../../helper/style-path'; import Slider from '../forms/slider.jsx'; import styles from './color-picker.css'; +import noFillIcon from '../color-button/no-fill.svg'; const colorStringToHsv = hexString => { const hsv = parseColor(hexString).hsv; @@ -179,7 +180,9 @@ class ColorPickerComponent extends React.Component { [styles.activeSwatch]: this.props.color === null })} onClick={this.handleTransparent} - /> + > + +