Fix `react-color` bugs (#1190)

* fix color picker styles

* fix rgba stringify on color picker change

components/BackgroundSelect.js

@@ -5,7 +5,7 @@ import ColorPicker from './ColorPicker'
 import Button from './Button'
 import Popout, { managePopout } from './Popout'
 import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
-import { stringifyRGBA } from '../lib/util'
+import { stringifyColor } from '../lib/util'
 
 function validateColor(str) {
   if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) {
@@ -20,7 +20,7 @@ class BackgroundSelect extends React.PureComponent {
     }
   }
 
-  handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) })
+  handlePickColor = color => this.props.onChange({ backgroundColor: stringifyColor(color) })
 
   render() {
     const {

components/ColorPicker.js

@@ -2,6 +2,7 @@ import React from 'react'
 import SketchPicker from 'react-color/lib/Sketch'
 
 import { COLORS } from '../lib/constants'
+import { stringifyColor } from '../lib/util'
 
 const pickerStyle = {
   backgroundColor: COLORS.BLACK,
@@ -18,31 +19,34 @@ export default function ColorPicker(props) {
       <SketchPicker
         styles={{ picker: style || pickerStyle }}
         onChange={setColor}
-        color={color}
+        color={typeof color === 'string' ? color : stringifyColor(color)}
         onChangeComplete={onChange}
         presetColors={presets}
         disableAlpha={disableAlpha}
       />
       <style jsx>
         {`
-            /* react-color overrides */
+          /* react-color overrides */
-            :global(.sketch-picker > div:nth-child(3) > div > div > span) {
+          :global(.sketch-picker > div:nth-child(3) > div > div > input) {
-              color: ${COLORS.SECONDARY} !important
+            width: 100% !important;
-            }
+            box-shadow: none;
+            outline: none;
+            border-radius: 2px;
+            background: ${COLORS.DARK_GRAY};
+            color: #fff !important;
+          }
 
-            :global(.sketch-picker > div:nth-child(3) > div > div > input) {
+          :global(.sketch-picker
-              width: 100% !important
+              > div:nth-child(2)
-              box-shadow: none
+              > div:nth-child(1)
-              outline: none
+              > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
-              border-radius: 2px
+            background: #fff;
-              background: ${COLORS.DARK_GRAY}
+          }
-              color: #fff !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)) {
+          :global(.sketch-picker label) {
-              background: #fff
+            color: ${COLORS.SECONDARY} !important;
-            }
+          }
-          `}
+        `}
       </style>
     </React.Fragment>
   )

components/Themes/ThemeCreate.js

@@ -6,7 +6,7 @@ import ListSetting from '../ListSetting'
 import Popout from '../Popout'
 import ColorPicker from '../ColorPicker'
 import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
-import { stringifyRGBA, generateId } from '../../lib/util'
+import { stringifyColor, generateId } from '../../lib/util'
 
 const colorPickerStyle = {
   backgroundColor: COLORS.BLACK,
@@ -135,7 +135,7 @@ const ThemeCreate = ({
         <HighlightPicker
           title={highlight}
           color={highlights[highlight]}
-          onChange={({ rgb }) => updateHighlights({ [highlight]: stringifyRGBA(rgb) })}
+          onChange={color => updateHighlights({ [highlight]: stringifyColor(color) })}
         />
       )}
       <style jsx>

lib/util.js

@@ -91,7 +91,7 @@ export const formatCode = async code => {
   })
 }
 
-export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
+export const stringifyColor = obj => `rgba(${obj.rgb.r},${obj.rgb.g},${obj.rgb.b},${obj.rgb.a})`
 
 export const generateId = () => Math.random().toString(36).slice(2)