Twitter colorpicker -> Sketch colorpicker

components/Carbon.js

@@ -16,7 +16,7 @@ const DEFAULT_SETTINGS = {
   paddingHorizontal: '50px',
   marginVertical: '45px',
   marginHorizontal: '45px',
-  background: '#fed0ec',
+  background: 'rgba(171, 184, 195, 1)',
   theme: 'seti',
   language: DEFAULT_LANGUAGE
 }

components/ColorPicker.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
-import { TwitterPicker } from 'react-color'
+import { SketchPicker } from 'react-color'
 import WindowPointer from './WindowPointer'
 import { COLORS } from '../lib/constants'
+import { parseRGBA } from '../lib/util'
 
 class ColorPicker extends React.Component {
   constructor() {
@@ -21,7 +22,7 @@ class ColorPicker extends React.Component {
   }
 
   handlePickColor(color) {
-    this.props.onChange(color.hex)
+    this.props.onChange(parseRGBA(color.rgb))
   }
 
   render() {
@@ -35,11 +36,7 @@ class ColorPicker extends React.Component {
         </div>
         <div className="colorpicker-picker" hidden={!this.state.isVisible}>
           <WindowPointer fromLeft="15px" />
-          <TwitterPicker
+          <SketchPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
-            color={this.props.bg}
-            onChangeComplete={this.handlePickColor}
-            triangle="hide"
-          />
         </div>
         <style jsx>{`
           .colorpicker-container {
@@ -79,28 +76,31 @@ class ColorPicker extends React.Component {
           }
 
           /* react-color overrides */
-          .colorpicker-picker :global(.twitter-picker) {
+          .colorpicker-picker :global(.sketch-picker) {
-            width: 278px !important;
             border: 0.5px solid ${COLORS.SECONDARY} !important;
             border-radius: 3px !important;
             background: #1a1a1a !important;
           }
 
-          .colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(11)) {
+          .colorpicker-picker > :global(.sketch-picker > div:nth-child(3) > div > div > span) {
-            background: #1a1a1a !important;
-            border: 0.5px solid ${COLORS.SECONDARY} !important;
-            border-right: none !important;
-            border-radius: 3px 0 0 3px !important;
             color: ${COLORS.SECONDARY} !important;
           }
 
-          .colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(12) > input) {
+          .colorpicker-picker > :global(.sketch-picker > div:nth-child(3) > div > div > input) {
-            background: rgba(255, 255, 255, 0.165) !important;
+            width: 100% !important;
+            box-shadow: none;
+            outline: none;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.165);
             color: #fff !important;
           }
 
-          .colorpicker-picker > :global(div > div:nth-child(3) > span > div) {
+          .colorpicker-picker
-            border-radius: 2px !important;
+            > :global(.sketch-picker
+              > div:nth-child(2)
+              > div:nth-child(1)
+              > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
+            background: #fff;
           }
         `}</style>
       </div>

lib/util.js

@@ -9,5 +9,7 @@ const parse = v => {
   } catch (e) {}
 }
 
+export const parseRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
+
 export const getState = morph.compose(parse, morph.get(KEY))
 export const saveState = (window, v) => assign(window, JSON.stringify(v))

pages/editor.js

@@ -43,7 +43,7 @@ class Editor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      background: '#ABB8C3',
+      background: 'rgba(171, 184, 195, 1)',
       theme: THEMES.seti.id,
       language: DEFAULT_LANGUAGE,
       dropShadow: true,