From c7e39c5e362d8cef6119a891b7157c83ff18c49a Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Wed, 14 Mar 2018 21:50:12 -0700
Subject: [PATCH] Fix url() by only rendering SketchPicker browser side

---
 components/BackgroundSelect.js | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 27e5eb6..f4c798f 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -10,12 +10,16 @@ import { parseRGBA, capitalizeFirstLetter } from '../lib/util'
 class BackgroundSelect extends React.Component {
   constructor() {
     super()
-    this.state = { isVisible: false, selectedTab: 'color' }
+    this.state = { isVisible: false, selectedTab: 'color', mounted: false }
     this.toggle = this.toggle.bind(this)
     this.selectTab = this.selectTab.bind(this)
     this.handlePickColor = this.handlePickColor.bind(this)
   }
 
+  componentDidMount() {
+    this.setState({ mounted: true })
+  }
+
   toggle() {
     this.setState({ isVisible: !this.state.isVisible })
   }
@@ -77,10 +81,12 @@ class BackgroundSelect extends React.Component {
           </div>
           <div className="picker-tabs-contents">
             <div style={this.props.config.backgroundMode === 'color' ? {} : { display: 'none' }}>
-              <SketchPicker
-                color={this.props.config.backgroundColor}
-                onChangeComplete={this.handlePickColor}
-              />
+              {this.state.mounted && (
+                <SketchPicker
+                  color={this.props.config.backgroundColor}
+                  onChangeComplete={this.handlePickColor}
+                />
+              )}
             </div>
             <div style={this.props.config.backgroundMode === 'image' ? {} : { display: 'none' }}>
               <ImagePicker
@@ -142,8 +148,7 @@ class BackgroundSelect extends React.Component {
             right: 0px;
             bottom: 0px;
             left: 0px;
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
-              left center;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
           }
 
           .picker-tabs {
@@ -190,14 +195,6 @@ class BackgroundSelect extends React.Component {
             color: ${COLORS.SECONDARY} !important;
           }
 
-          /* TODO remove once base64 url issue fixed in react-color */
-          /* prettier-ignore */
-          .bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(1) > div),
-          .bg-select-pickers :global(.sketch-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(1)) {
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
-              left center !important;
-          }
-
           .bg-select-pickers :global(.sketch-picker > div:nth-child(3) > div > div > input) {
             width: 100% !important;
             box-shadow: none;