Add color picker style overrides

components/ColorPicker.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import { TwitterPicker } from 'react-color'
+import WindowPointer from './WindowPointer'
 import { PALETTE } from '../lib/constants'
 
 class ColorPicker extends React.Component {
@@ -20,7 +21,6 @@ class ColorPicker extends React.Component {
   }
 
   handlePickColor(color) {
-    this.setState({ isVisible: false })
     this.props.onChange(color.hex)
   }
 
@@ -34,7 +34,8 @@ class ColorPicker extends React.Component {
           <div className="bg-color" style={{background: this.props.bg}} onClick={this.toggle}></div>
         </div>
         <div className="colorpicker-picker" hidden={!this.state.isVisible}>
-          <TwitterPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
+          <WindowPointer fromLeft="15px" />
+          <TwitterPicker color={this.props.bg} onChangeComplete={this.handlePickColor} triangle="hide" />
         </div>
         <style jsx>{`
           .colorpicker-container {
@@ -69,8 +70,8 @@ class ColorPicker extends React.Component {
 
           .colorpicker-picker {
             position: absolute;
-            margin-left: 32px;
-            margin-top: 10px;
+            margin-left: 36px;
+            margin-top: 4px;
           }
         `}</style>
       </div>

components/Meta.js

@@ -58,7 +58,7 @@ export default () => (
 
       .selected svg {
         border-radius: 3px;
-        border: solid 2px #fff;
+        border: solid 2px ${PALETTE.SECONDARY};
       }
 
       .CodeMirror__container.dropshadow {
@@ -80,7 +80,7 @@ export default () => (
       }
 
       .window-theme__bw > .CodeMirror {
-        border: 2px solid #fff;
+        border: 2px solid ${PALETTE.SECONDARY};
       }
 
       .window-controls + .CodeMirror__container > .CodeMirror {
@@ -90,6 +90,33 @@ export default () => (
       .cm-s-dracula .CodeMirror-cursor {
           border-left: solid 2px #159588;
       }
+
+      /* Colorpicker overrides */
+      .twitter-picker {
+        width: 278px !important;
+        border: 0.5px solid ${PALETTE.SECONDARY} !important;
+        border-radius: 3px !important;
+        background: #1A1A1A !important;
+      }
+
+      .colorpicker-picker > div > div:nth-child(3) > div:nth-child(11) {
+        background: #1A1A1A !important;
+        border: 0.5px solid ${PALETTE.SECONDARY} !important;
+        border-right: none !important;
+        border-radius: 3px 0 0 3px !important;
+        color: ${PALETTE.SECONDARY} !important;
+      }
+
+      #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > div:nth-child(12) > input {
+        background: rgba(255, 255, 255, 0.165) !important;
+        height: 30px !important;
+        width: 108px !important;
+        color: #fff !important;
+      }
+
+      #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > span > div {
+        border-radius: 2px !important;
+      }
     `}</style>
   </div>
 )