From 711210e034c88373474104c9da295db87b897766 Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Sat, 6 Mar 2021 18:10:53 -0800
Subject: [PATCH] Fix `react-color` bugs (#1190)

* fix color picker styles

* fix rgba stringify on color picker change
---
 components/BackgroundSelect.js   |  4 ++--
 components/ColorPicker.js        | 38 ++++++++++++++++++--------------
 components/Themes/ThemeCreate.js |  4 ++--
 lib/util.js                      |  2 +-
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 4b01a0f..6ebe44c 100644
--- a/components/BackgroundSelect.js
+++ b/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 {
diff --git a/components/ColorPicker.js b/components/ColorPicker.js
index b87f5fc..ce507a0 100644
--- a/components/ColorPicker.js
+++ b/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 */
-            :global(.sketch-picker > div:nth-child(3) > div > div > span) {
-              color: ${COLORS.SECONDARY} !important
-            }
+          /* react-color overrides */
+          :global(.sketch-picker > div:nth-child(3) > div > div > input) {
+            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) {
-              width: 100% !important
-              box-shadow: none
-              outline: none
-              border-radius: 2px
-              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)) {
+            background: #fff;
+          }
 
-            :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
-            }
-          `}
+          :global(.sketch-picker label) {
+            color: ${COLORS.SECONDARY} !important;
+          }
+        `}
       </style>
     </React.Fragment>
   )
diff --git a/components/Themes/ThemeCreate.js b/components/Themes/ThemeCreate.js
index a9d6202..553a632 100644
--- a/components/Themes/ThemeCreate.js
+++ b/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>
diff --git a/lib/util.js b/lib/util.js
index b474d0d..64dd34f 100644
--- a/lib/util.js
+++ b/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)