Disable fill or outline indicators for brush, line and pen mode.

src/components/fill-color-indicator.jsx

@@ -17,7 +17,7 @@ const messages = defineMessages({
 });
 
 const FillColorIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <Popover
             body={
                 <ColorPicker

src/components/input-group/input-group.css

@@ -3,3 +3,9 @@
 .input-group + .input-group {
     margin-left: calc(3 * $grid-unit);
 }
+
+.disabled {
+    opacity: 0.3;
+    /* Prevent any user actions */
+    pointer-events: none;
+}

src/components/input-group/input-group.jsx

@@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
 import styles from './input-group.css';
 
 const InputGroup = props => (
-    <div className={classNames(props.className, styles.inputGroup)}>
+    <div className={classNames(props.className, styles.inputGroup, {
+        [styles.disabled]: props.disabled
+    })}>
         {props.children}
     </div>
 );

src/components/stroke-color-indicator.jsx

@@ -17,7 +17,7 @@ const messages = defineMessages({
 });
 
 const StrokeColorIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <Popover
             body={
                 <ColorPicker

src/components/stroke-width-indicator.jsx

@@ -9,8 +9,9 @@ import {MAX_STROKE_WIDTH} from '../reducers/stroke-width';
 
 const BufferedInput = BufferedInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <BufferedInput
+            disabled={props.disabled}
             small
             max={MAX_STROKE_WIDTH}
             min="0"

src/containers/fill-color-indicator.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeFillColor} from '../reducers/fill-color';
 import {openFillColor, closeFillColor} from '../reducers/modals';
+import Modes from '../modes/modes';
 
 import FillColorIndicatorComponent from '../components/fill-color-indicator.jsx';
 import {applyFillColorToSelection} from '../helper/style-path';
@@ -30,6 +31,7 @@ class FillColorIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.PEN,
     fillColor: state.scratchPaint.color.fillColor,
     fillColorModalVisible: state.scratchPaint.modals.fillColor
 });
@@ -47,6 +49,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 FillColorIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     fillColor: PropTypes.string,
     onChangeFillColor: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired

src/containers/stroke-color-indicator.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {openStrokeColor, closeStrokeColor} from '../reducers/modals';
+import Modes from '../modes/modes';
 
 import StrokeColorIndicatorComponent from '../components/stroke-color-indicator.jsx';
 import {applyStrokeColorToSelection} from '../helper/style-path';
@@ -30,6 +31,7 @@ class StrokeColorIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.BRUSH,
     strokeColor: state.scratchPaint.color.strokeColor,
     strokeColorModalVisible: state.scratchPaint.modals.strokeColor
 });
@@ -47,6 +49,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 StrokeColorIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     onChangeStrokeColor: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
     strokeColor: PropTypes.string

src/containers/stroke-width-indicator.jsx

@@ -5,6 +5,7 @@ import bindAll from 'lodash.bindall';
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
 import {applyStrokeWidthToSelection} from '../helper/style-path';
+import Modes from '../modes/modes';
 
 class StrokeWidthIndicator extends React.Component {
     constructor (props) {
@@ -20,6 +21,7 @@ class StrokeWidthIndicator extends React.Component {
     render () {
         return (
             <StrokeWidthIndicatorComponent
+                disabled={this.props.disabled}
                 strokeWidth={this.props.strokeWidth}
                 onChangeStrokeWidth={this.handleChangeStrokeWidth}
             />
@@ -28,6 +30,7 @@ class StrokeWidthIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.BRUSH,
     strokeWidth: state.scratchPaint.color.strokeWidth
 });
 const mapDispatchToProps = dispatch => ({
@@ -37,6 +40,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 StrokeWidthIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     onChangeStrokeWidth: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
     strokeWidth: PropTypes.number