diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.css b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.css deleted file mode 100644 index 517ef12314c..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.css +++ /dev/null @@ -1,61 +0,0 @@ -.cs__wrapper { - max-width: 330px; - padding: 10px; - margin: 0; - overflow: hidden; - font-size: 13px; - line-height: 1.4; - text-align: left; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, sans-serif; - font-weight: normal; - color: #212529; -} -.cs__header { - text-align: center; - font-size: 13px; - line-height: 1.2; - margin-bottom: 10px; - display: block; - text-decoration: none; - color: #51585f; -} -.cs__blurb { - text-align: center; - font-size: 14px; - line-height: 1.4; - margin-bottom: 10px; - display: block; - text-decoration: none; - color: #212529; -} -.cs__image_wrapper { - text-align: center; - display: block; -} -.cs__image { - max-width: 80%; -} -.cs__footer { - margin-top: 8px; - text-align: center; - font-size: 10px; -} -.cs__wrapper.dark { - color: rgba(255, 255, 255, 0.6); -} -.cs__wrapper.dark .cs__header { - color: rgba(255, 255, 255, 0.5); -} -.cs__wrapper.dark .cs__blurb { - color: rgba(255, 255, 255, 0.8); -} -.cs__wrapper.dark .cs__blurb strong { - color: #6caedd; -} -.cs__wrapper.dark .cs__footer { - color: rgba(255, 255, 255, 0.3); -} -.cs__wrapper.dark .cs__footer a { - color: rgba(255, 255, 255, 0.3); -} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js index 571f6f9b0e4..4f091c8ca56 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js @@ -1,29 +1,27 @@ import React from 'react'; -import './CodeSponsor.css'; -type Props = { - token: string, - theme: 'dark' | 'light', -}; +const CODEFUND_LINK = + 'https://codefund.io/scripts/1fc4e04d-9622-4844-81f9-7522c7d19ac7/embed.js?theme=codesandbox'; +let loaded = false; -export default ({ token, theme }: Props) => { - const pixelHref = `https://codesponsor.io/t/l/${token}/pixel.png`; - const linkHref = `https://codesponsor.io/t/c/${token}/`; +export default class CodeFund extends React.PureComponent { + componentDidMount() { + if (!loaded) { + loaded = true; - return ( -
-
Proudly sponsored by
- - Rollbar{' '} - - Real-time error monitoring, alerting, and analytics for software - developers{' '} - - 🚀 - - - - CodeSponsor -
- ); -}; + const script = document.createElement('script'); + script.setAttribute('src', CODEFUND_LINK); + script.async = 'true'; + script.setAttribute('id', 'external-js'); + document.head.appendChild(script); + } + } + + render() { + return ( +
+
+
+ ); + } +} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js index cd50037e7b5..2b07f8da312 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js @@ -2,6 +2,4 @@ import React from 'react'; import CodeSponsor from './CodeSponsor'; -export default () => ( - -); +export default () => ;