feat: Adds fail warnings to color options (#22)

* changes focus state to be more opaic

* adds failure state warnings

* changes min-width to electron window, in progress changes to blind options render

* changes margin of warning

* upgrades react, related libraries

* fixes issue where check warning didn't render on color change

* updates version number

index.js

@@ -36,7 +36,7 @@ function createWindow () {
   mainWindow = new BrowserWindow({
     width: 340,
     height: 600,
-    minWidth: 300,
+    minWidth: 340,
     minHeight: 520,
     maxWidth: 430,
     maxHeight: 800,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "colorific",
   "productName": "colorific",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A color contrast and swatch managment tool",
   "author": {
     "name": "Darrell Hanley",

src/components/colorBlindOptions/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import chroma from 'chroma-js';
+import chroma, { contrast } from 'chroma-js';
 import blind from 'color-blind';
 import { setColorBlind } from 'actions/colors';
 import style from './style.css';
@@ -32,13 +32,63 @@ const blindSettings = {
 
 class ColorBlindOptions extends Component {
   static propTypes = {
+    foreground: PropTypes.string.isRequired,
     background: PropTypes.string.isRequired,
     blindness: PropTypes.string.isRequired,
     setColorBlind: PropTypes.func.isRequired,
     setting: PropTypes.string,
     pickerShown: PropTypes.bool.isRequired,
   }
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      failures: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const colorsChanged = nextProps.foreground !== this.props.foreground
+      || nextProps.background !== this.props.background;
+    if (colorsChanged) {
+      this.checkFailers(nextProps);
+    }
+  }
+
+  componentDidMount() {
+    this.checkFailers();
+  }
+
+  checkFailers(nextProps) {
+    const {
+      foreground,
+      background,
+    } = (nextProps || this.props);
+    const failures = [];
+    const commonFail = contrast(chroma(foreground), chroma(background)) < 3;
+    if (commonFail) {
+      failures.push('common');
+    }
+    Object.keys(blindSettings).forEach((key) => {
+      blindSettings[key].forEach((state) => {
+        const modifier = blind[state];
+        const failed = contrast(modifier(foreground), modifier(background)) < 3;
+        if (failed) {
+          if (failures.find((elem) => elem === key) === undefined) {
+            failures.push(key);
+          }
+          failures.push(state);
+        }
+      });
+    });
+    const shouldUpdate = this.state.failures !== failures;
+    if (shouldUpdate) {
+      this.setState({
+        failures
+      });
+    }
+  }
+
   render() {
     const {
       blindness,
@@ -47,6 +97,12 @@ class ColorBlindOptions extends Component {
       pickerShown
     } = this.props;
 
+    const { failures } = this.state;
+
+    const isFailedState = (name) => {
+      return failures.find((elem) => elem === name) !== undefined;
+    };
+
     let containerBackground = chroma(background);
     if (blindness !== 'common') {
       const modifier = blind[setting];
@@ -93,7 +149,16 @@ class ColorBlindOptions extends Component {
                   onChange={(e) => {
                     this.props.setColorBlind(e.target.value, blindSettings[e.target.value] ? blindSettings[e.target.value][0] : null)
                   }}/>
-                <span>{type}</span>
+                <span>
+                  {type}
+                  {isFailedState(type) && (
+                    <i
+                      className={style.failed}
+                      style={{ color: containerBackground }}>
+                      !
+                    </i>
+                  )}
+                </span>
                 <Triangle
                   className={style.triangle}
                   fill={type === 'common' ? previewColor : secondRowColor}
@@ -130,7 +195,16 @@ class ColorBlindOptions extends Component {
                     onChange={(e) => {
                       this.props.setColorBlind(blindness, e.target.value);
                     }}/>
-                  <span>{type}</span>
+                  <span>
+                    {type}
+                    {isFailedState(type) && (
+                      <i
+                        className={style.failed}
+                        style={{ color: secondRowColor}}>
+                        !
+                      </i>
+                    )}
+                  </span>
                   <Triangle
                     className={style.triangle}
                     fill={previewColor}
@@ -182,6 +256,7 @@ class Triangle extends Component {
 
 function mapStateToProps(state) {
   return {
+    foreground: state.colors.foreground,
     background: state.colors.background,
     blindness: state.colors.blindness,
     setting: state.colors.setting,

src/components/colorBlindOptions/style.css

@@ -2,16 +2,24 @@
   &.lightText {
     color: #fff;
 
+    & .failed {
+      background-color: #fff;
+    }
+
     & .blindOption input:focus {
-      background-color: rgba(255,255,255,0.1);
+      background-color: rgba(255,255,255,0.2);
     }
   }
 
   &.darkText {
     color: #000;
 
     & .blindOption input:focus {
-      background-color: rgba(0,0,0,0.1);
+      background-color: rgba(0,0,0,0.2);
+    }
+
+    & .failed {
+      background-color: #000;
     }
   }
 }
@@ -28,10 +36,18 @@
 
   &.lightText {
     color: #fff;
+
+    & .failed {
+      background-color: #fff;
+    }
   }
 
   &.darkText {
     color: #000;
+
+    & .failed {
+      background-color: #000;
+    }
   }
 }
 
@@ -66,6 +82,7 @@
     opacity: 0.7;
     transition: opacity 0.2s;
     user-select: none;
+    display: flex;
 
     &:hover {
       opacity: 1;
@@ -114,4 +131,17 @@
   display: none;
   width: 10px;
   height: 10px;
+}
+
+.failed {
+  font-style: normal;
+  display: flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  margin-left: 3px;
+  font-weight: bold;
+  font-size: 10px;
 }