Added logic to color the border of the preview <div> in the opposite …

…color of that being previewed, for better contrast.
maratbn · Jul 2, 2018 · ce5f5ab4fa63d83468891f1d74cceae9c4ad6cc0 · ce5f5ab
1 parent b5c48ad
commit ce5f5ab4fa63d83468891f1d74cceae9c4ad6cc0
Unified Split

Showing with 9 additions and 1 deletion.

+9 −1 webpack_in/entry.jsx
diff --git a/webpack_in/entry.jsx b/webpack_in/entry.jsx
@@ -305,12 +305,20 @@ class ColorSelector extends React.Component {
    render() {
        const { color } = this.state;

+        const colorOpposite = {
+            r: 255 - color.r,
+            g: 255 - color.g,
+            b: 255 - color.b
+          };
+
        return (
            <div style={ objStyleCommon }>
              <div style={{ margin: '1em auto',
                            width: '70%',
                            height: '3em',
-                            border: 'solid 2px black',
+                            border: `solid 2px rgb(${colorOpposite.r},
+                                                   ${colorOpposite.g},
+                                                   ${colorOpposite.b})`,
                            backgroundColor: `rgb(${color.r}, ${color.g}, ${color.b})`}} />
              <div style={{ marginTop: '-1em'}}>
                <ColorComponentEntry label="R" value={ this.state.color.r } onChangeValue={