Extract PrivacyNotice

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/elements.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+import { Explanation as ExplanationBase } from '../elements';
+
+export const Explanation = styled(ExplanationBase)`
+  margin-top: -1rem;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/index.tsx

@@ -0,0 +1,14 @@
+import { patronUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { Explanation } from './elements';
+
+export const PrivacyNotice: FunctionComponent = () => (
+  <Explanation>
+    You can change privacy of a sandbox as a{' '}
+    <a href={patronUrl()} rel="noopener noreferrer" target="_blank">
+      patron
+    </a>
+    .
+  </Explanation>
+);

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx

@@ -1,10 +1,7 @@
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
-import {
-  patronUrl,
-  sandboxUrl,
-} from '@codesandbox/common/lib/utils/url-generator';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -17,7 +14,6 @@ import {
   BasicInfo,
   BundlerLink,
   Container,
-  Explanation,
   Group,
   Icon,
   Item,
@@ -30,6 +26,7 @@ import { Frozen } from './Frozen';
 import { Git } from './Git';
 import { Keywords } from './Keywords';
 import { Privacy } from './Privacy';
+import { PrivacyNotice } from './PrivacyNotice';
 import { SandboxConfig } from './SandboxConfig';
 import { Team } from './Team';
 import { Title } from './Title';
@@ -82,15 +79,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
       <Group>
         <Privacy editable={editable} />
 
-        {!isPatron && (
-          <Explanation style={{ marginTop: '-1rem' }}>
-            You can change privacy of a sandbox as a{' '}
-            <a href={patronUrl()} rel="noopener noreferrer" target="_blank">
-              patron
-            </a>
-            .
-          </Explanation>
-        )}
+        {!isPatron && <PrivacyNotice />}
 
         {editable && <Frozen />}