import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  '@global': {
    '#cf_ad': {
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
      padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
        .spacing.unit + 130}px`,
      borderRadius: theme.shape.borderRadius,
      margin: '0 !important', // Reset
      maxWidth: 'none !important', // Reset
      '& img': {
        verticalAlign: 'middle',
      },
      '& a': {
        textDecoration: 'none',
      },
      '& .cf-wrapper.cf-wrapper': {
        padding: 0, // Reset
        overflow: 'visible', // Reset
        backgroundColor: 'transparent', // Reset
      },
      '& .cf-img-wrapper.cf-img-wrapper': {
        float: 'left',
        marginLeft: -130,
        marginRight: theme.spacing.unit,
      },
      '& .cf-text.cf-text': {
        ...theme.typography.body2,
        display: 'block',
        '& strong': {
          fontWeight: theme.typography.fontWeightMedium,
        },
      },
      '& .cf-powered-by.cf-powered-by': {
        ...theme.typography.caption,
        color: theme.palette.text.secondary,
        display: 'block',
        marginTop: 0, // Reset
      },
    },
  },
});

class CodeFund extends React.Component {
  componentDidMount() {
    const scriptSlot = document.querySelector('#code-fund-script-slot');

    // Concurrence issues
    if (!scriptSlot) {
      return;
    }

    const script = document.createElement('script');
    script.setAttribute('async', '');
    script.src = '//codefund.io/scripts/71fdcb01-40be-4590-af75-cd1bd4773c2a/embed.js';
    scriptSlot.appendChild(script);
  }

  render() {
    return (
      <React.Fragment>
        <span id="code-fund-script-slot" />
        <span id="codefund_ad" />
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(CodeFund);

@@ -130,16 +130,13 @@
 '#cf
-_ad
 ': %7B%0A
+
     
@@ -176,24 +176,27 @@
 roundColor: 
+%60$%7B
 theme.palett
@@ -213,16 +213,29 @@
 nd.paper
+%7D !important%60
 ,%0A      
@@ -403,16 +403,51 @@
 Radius,%0A
+      width: 'initial !important',%0A
       ma
@@ -584,64 +584,8 @@
  %7D,%0A
-      '& a': %7B%0A        textDecoration: 'none',%0A      %7D,%0A
     
@@ -620,37 +620,8 @@
 : %7B%0A
-        padding: 0, // Reset%0A
     
@@ -846,16 +846,65 @@
 g.unit,%0A
+        marginBottom: '0px !important', // Reset%0A
       %7D,
@@ -969,16 +969,77 @@
 .body2,%0A
+        color: %60$%7Btheme.typography.body2.color%7D !important%60,%0A
         
@@ -1234,16 +1234,85 @@
 aption,%0A
+        fontSize: %60$%7Btheme.typography.caption.fontSize%7D !important%60,%0A
         
@@ -1318,16 +1318,19 @@
  color: 
+%60$%7B
 theme.pa
@@ -1353,34 +1353,21 @@
 dary
-,%0A        display: 'block'
+%7D !important%60
 ,%0A  
@@ -1383,17 +1383,32 @@
 ginTop: 
-0
+'0px! important'
 , // Res
@@ -1772,58 +1772,29 @@
 .io/
-scripts/71fdcb01-40be-4590-af75-cd1bd4773c2a/embed
+properties/137/funder
 .js'
@@ -1925,24 +1925,24 @@
 pt-slot%22 /%3E%0A
+
         %3Cspa
@@ -1959,11 +1959,8 @@
 fund
-_ad
 %22 /%3E

Update the CodeFund embed script (#14031)