Use CodeSponsor as advertisement provider (codesandbox#428)

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.css

@@ -0,0 +1,61 @@
+.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);
+}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './CodeSponsor.css';
+
+type Props = {
+  token: string,
+  theme: 'dark' | 'light',
+};
+
+export default ({ token, theme }: Props) => {
+  const pixelHref = `https://cs.berry.sh/l/${token}/pixel.png`;
+  const linkHref = `https://cs.berry.sh/c/${token}`;
+
+  return (
+    <div className={theme === 'dark' ? 'cs__wrapper dark' : 'cs__wrapper'}>
+      <div className="cs__header">Proudly sponsored by</div>
+      <a href={linkHref} className="cs__blurb" target="_blank" rel="noopener">
+        <strong>Rollbar</strong>{' '}
+        <span>
+          Real-time error monitoring, alerting, and analytics for developers{' '}
+          <span aria-label="rocket" role="img">
+            🚀
+          </span>
+        </span>
+      </a>
+      <img alt="CodeSponsor" className="cs__pixel" src={pixelHref} />
+    </div>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js

@@ -1,56 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
 
-const Container = styled.div`
-  padding: 1rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
+import CodeSponsor from './CodeSponsor';
 
-  .carbon-text {
-    text-decoration: none !important;
-    color: rgba(255, 255, 255, 0.9) !important;
-  }
-
-  .carbon-wrap {
-    font-size: 0.875rem;
-
-    img {
-      display: block;
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .carbon-poweredby {
-    display: block;
-    margin-top: 0.5rem;
-
-    font-size: 0.75rem;
-    text-decoration: none !important;
-    color: rgba(255, 255, 255, 0.6) !important;
-  }
-`;
-
-export default class Advertisement extends React.PureComponent {
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      const script = document.createElement('script');
-      script.setAttribute(
-        'src',
-        '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=codesandboxio'
-      );
-      script.async = 'true';
-      document.head.appendChild(script);
-    });
-  }
-
-  render() {
-    return (
-      <Container>
-        <script
-          id="_carbonads_js"
-          src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=codesandboxio"
-          async="true"
-        />
-      </Container>
-    );
-  }
-}
+export default () => (
+  <CodeSponsor token="4c558242-bb75-49a4-9b6f-5b393bcc78ed" theme="dark" />
+);