Fix url() by only rendering SketchPicker browser side

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' }}>
+              {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;