From 282e17642827dc174e9b0860867b2959f781daf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Fri, 27 Sep 2019 14:37:20 +0200
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=94=A8=20Switch=20Project=20to=20use?=
 =?UTF-8?q?=20useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/package.json                     |   1 +
 .../overmind/namespaces/workspace/actions.ts  |   7 +-
 .../Editor/Workspace/Project/Alias/Alias.tsx  |  69 ----------
 .../Workspace/Project/Alias/elements.ts       |   4 +-
 .../Editor/Workspace/Project/Alias/index.ts   |   1 -
 .../Editor/Workspace/Project/Alias/index.tsx  |  69 ++++++++++
 .../Editor/Workspace/Project/Author.tsx       |  23 ----
 .../Workspace/Project/Author/elements.ts      |  11 ++
 .../Editor/Workspace/Project/Author/index.tsx |  33 +++++
 .../Workspace/Project/Description/elements.ts |   6 +
 .../Workspace/Project/Description/index.ts    |   1 -
 .../{Description.tsx => index.tsx}            |  41 +++---
 .../Workspace/Project/Frozen/elements.ts      |   7 +-
 .../Editor/Workspace/Project/Frozen/index.ts  |   1 -
 .../Project/Frozen/{Frozen.tsx => index.tsx}  |  24 ++--
 .../Project/SandboxConfig/Icon/elements.ts    |  65 ----------
 .../TemplateConfig/Icon/elements.ts           |  65 ++++++++++
 .../{ => TemplateConfig}/Icon/index.tsx       |  25 ++--
 .../SandboxConfig/TemplateConfig/elements.ts  |  36 ++++++
 .../index.tsx}                                |  26 ++--
 .../Project/SandboxConfig/elements.ts         |  26 +---
 .../Workspace/Project/SandboxConfig/index.ts  |   1 -
 .../{SandboxConfig.tsx => index.tsx}          |  14 +-
 .../Workspace/Project/Title/elements.ts       |   8 +-
 .../Editor/Workspace/Project/Title/index.ts   |   1 -
 .../Project/Title/{Title.tsx => index.tsx}    |  49 +++----
 .../Editor/Workspace/Project/elements.ts      |  40 +-----
 .../Sandbox/Editor/Workspace/Project/index.ts |   1 -
 .../Project/{Project.tsx => index.tsx}        | 120 ++++++++++--------
 yarn.lock                                     |   7 +
 30 files changed, 398 insertions(+), 384 deletions(-)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/Alias.tsx
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/{Description.tsx => index.tsx} (74%)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/{Frozen.tsx => index.tsx} (83%)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/elements.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/{ => TemplateConfig}/Icon/index.tsx (84%)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/elements.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/{TemplateConfig.tsx => TemplateConfig/index.tsx} (76%)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/{SandboxConfig.tsx => index.tsx} (85%)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/{Title.tsx => index.tsx} (72%)
 delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.ts
 rename packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/{Project.tsx => index.tsx} (61%)

diff --git a/packages/app/package.json b/packages/app/package.json
index d7feb2743a9..c7be8402df0 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -252,6 +252,7 @@
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
+    "@types/react-color": "^3.0.1",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
diff --git a/packages/app/src/app/overmind/namespaces/workspace/actions.ts b/packages/app/src/app/overmind/namespaces/workspace/actions.ts
index 5274c5845b8..25a71452bc0 100755
--- a/packages/app/src/app/overmind/namespaces/workspace/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/workspace/actions.ts
@@ -188,9 +188,10 @@ export const sandboxDeleted: AsyncAction = async ({
   effects.router.redirectToSandboxWizard();
 };
 
-export const sandboxPrivacyChanged: AsyncAction<{
-  privacy: 0 | 1 | 2;
-}> = async ({ state, effects, actions }, { privacy }) => {
+export const sandboxPrivacyChanged: AsyncAction<0 | 1 | 2> = async (
+  { actions, effects, state },
+  privacy
+) => {
   const oldPrivacy = state.editor.currentSandbox.privacy;
   const sandbox = await effects.api.updatePrivacy(
     state.editor.currentSandbox.id,
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/Alias.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/Alias.tsx
deleted file mode 100644
index 2373513d348..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/Alias.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-import React, { FunctionComponent, useState } from 'react';
-
-import { useOvermind } from 'app/overmind';
-
-import { WorkspaceInputContainer } from '../../elements';
-
-import { EditPen } from '../elements';
-
-import { SandboxAlias } from './elements';
-
-type Props = {
-  editable: boolean;
-};
-export const Alias: FunctionComponent<Props> = ({ editable }) => {
-  const {
-    actions: {
-      workspace: { sandboxInfoUpdated, valueChanged },
-    },
-    state: {
-      isPatron,
-      editor: { currentSandbox },
-      workspace: { project },
-    },
-  } = useOvermind();
-  const [editing, setEditing] = useState(false);
-
-  const alias = project.alias || currentSandbox.alias;
-
-  return isPatron ? (
-    <>
-      {editing ? (
-        <WorkspaceInputContainer>
-          <input
-            value={alias}
-            onChange={event => {
-              valueChanged({
-                field: 'alias',
-                value: event.target.value,
-              });
-            }}
-            type="text"
-            onBlur={() => {
-              sandboxInfoUpdated();
-              setEditing(false);
-            }}
-            onKeyUp={event => {
-              if (event.keyCode === ESC) {
-                sandboxInfoUpdated();
-                setEditing(false);
-              }
-            }}
-            ref={el => {
-              if (el) {
-                el.focus();
-              }
-            }}
-            placeholder="Alias"
-          />
-        </WorkspaceInputContainer>
-      ) : (
-        <SandboxAlias>
-          {alias}
-          {editable && <EditPen onClick={() => setEditing(true)} />}
-        </SandboxAlias>
-      )}
-    </>
-  ) : null;
-};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts
index 5a380f6b4d3..5b7a37b1a44 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/elements.ts
@@ -3,9 +3,7 @@ import styled, { css } from 'styled-components';
 export const SandboxAlias = styled.div`
   ${({ theme }) => css`
     margin-top: 0.5rem;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.8)`
-      : css`rgba(255, 255, 255, 0.8)`};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
     font-size: 0.875rem;
   `}
 `;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.ts
deleted file mode 100644
index b24935ecbb0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Alias } from './Alias';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
new file mode 100644
index 00000000000..5b5323e3f64
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
@@ -0,0 +1,69 @@
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceInputContainer } from '../../elements';
+
+import { EditPen } from '../elements';
+
+import { SandboxAlias } from './elements';
+
+type Props = {
+  editable: boolean;
+};
+export const Alias: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxInfoUpdated, valueChanged },
+    },
+    state: {
+      editor: { currentSandbox },
+      workspace: { project },
+    },
+  } = useOvermind();
+  const [editing, setEditing] = useState(false);
+
+  const alias = project.alias || currentSandbox.alias;
+
+  return editing ? (
+    <WorkspaceInputContainer>
+      <input
+        onBlur={() => {
+          sandboxInfoUpdated();
+
+          setEditing(false);
+        }}
+        onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+          valueChanged({ field: 'alias', value });
+        }}
+        onKeyUp={({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+          if (keyCode === ESC) {
+            sandboxInfoUpdated();
+
+            setEditing(false);
+          }
+        }}
+        placeholder="Alias"
+        type="text"
+        value={alias}
+        ref={el => {
+          if (el) {
+            el.focus();
+          }
+        }}
+      />
+    </WorkspaceInputContainer>
+  ) : (
+    <SandboxAlias>
+      {alias}
+
+      {editable && <EditPen onClick={() => setEditing(true)} />}
+    </SandboxAlias>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx
deleted file mode 100644
index 4afdf51e5cb..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
-import { User } from '@codesandbox/common/lib/types';
-import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
-import React, { FunctionComponent } from 'react';
-
-import { Item, UserLink } from './elements';
-
-type Props = {
-  author: User;
-};
-export const Author: FunctionComponent<Props> = ({
-  author: { username, avatarUrl, subscriptionSince },
-}) => (
-  <Item>
-    <UserLink title={username} to={profileUrl(username)}>
-      <UserWithAvatar
-        username={username}
-        avatarUrl={avatarUrl}
-        subscriptionSince={subscriptionSince}
-      />
-    </UserLink>
-  </Item>
-);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts
new file mode 100644
index 00000000000..e0fde610980
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/elements.ts
@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const UserLink = styled(Link)`
+  ${({ theme }) => css`
+    display: block;
+    color: ${theme[`editor.foreground`] || css`rgba(255, 255, 255, 0.8)`};
+    font-size: 0.875rem;
+    text-decoration: none;
+  `}
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx
new file mode 100644
index 00000000000..7caefc23ad2
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Author/index.tsx
@@ -0,0 +1,33 @@
+import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
+import { profileUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item } from '../elements';
+
+import { UserLink } from './elements';
+
+export const Author: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: {
+          author: { username, avatarUrl, subscriptionSince },
+        },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <UserLink title={username} to={profileUrl(username)}>
+        <UserWithAvatar
+          avatarUrl={avatarUrl}
+          subscriptionSince={subscriptionSince}
+          username={username}
+        />
+      </UserLink>
+    </Item>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts
index a4e7c357957..2b4a9f270e8 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/elements.ts
@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components';
 
+import { WorkspaceInputContainer as WorkspaceInputContainerBase } from '../../elements';
+
 export const SandboxDescription = styled.div<{ empty: boolean }>`
   ${({ empty, theme }) => css`
     margin-top: 0.5rem;
@@ -10,3 +12,7 @@ export const SandboxDescription = styled.div<{ empty: boolean }>`
     font-style: ${empty ? 'normal' : 'italic'};
   `}
 `;
+
+export const WorkspaceInputContainer = styled(WorkspaceInputContainerBase)`
+  margin: 0 -0.25rem;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.ts
deleted file mode 100644
index 6899644e645..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Description } from './Description';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/Description.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
similarity index 74%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/Description.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
index c8123174f39..9c6215906b4 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/Description.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
@@ -1,13 +1,16 @@
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import React, { FunctionComponent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { WorkspaceInputContainer } from '../../elements';
-
 import { EditPen } from '../elements';
 
-import { SandboxDescription } from './elements';
+import { SandboxDescription, WorkspaceInputContainer } from './elements';
 
 type Props = {
   editable: boolean;
@@ -25,37 +28,37 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
   } = useOvermind();
   const [editing, setEditing] = useState(false);
 
-  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.keyCode === ENTER && !event.shiftKey) {
       event.preventDefault();
       event.stopPropagation();
+
       sandboxInfoUpdated();
+
       setEditing(false);
     }
   };
 
   return editing ? (
-    <WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
+    <WorkspaceInputContainer>
       <textarea
-        rows={2}
+        onBlur={() => {
+          sandboxInfoUpdated();
+
+          setEditing(false);
+        }}
+        onChange={({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => {
+          valueChanged({ field: 'description', value });
+        }}
+        onKeyDown={onKeyDown}
         placeholder="Description"
-        value={description}
         ref={el => {
           if (el) {
             el.focus();
           }
         }}
-        onKeyDown={onKeyDown}
-        onChange={event => {
-          valueChanged({
-            field: 'description',
-            value: event.target.value,
-          });
-        }}
-        onBlur={() => {
-          sandboxInfoUpdated();
-          setEditing(false);
-        }}
+        rows={2}
+        value={description}
       />
     </WorkspaceInputContainer>
   ) : (
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/elements.ts
index 1249cf24f34..a6cb34bd679 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/elements.ts
@@ -9,11 +9,8 @@ export const FrozenWarning = styled.span`
   ${({ theme }) => css`
     display: block;
     padding-top: 5px;
-    margin: 1rem;
-    margin-top: -20px;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.4)`
-      : css`rgba(255, 255, 255, 0.4)`};
+    margin: -20px 1rem 1rem;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
     font-size: 12px;
   `}
 `;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.ts
deleted file mode 100644
index b7e3554b7e1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Frozen } from './Frozen';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/Frozen.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
similarity index 83%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/Frozen.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
index 797a53b0d40..522ca4f0571 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/Frozen.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
-
 import Switch from '@codesandbox/common/lib/components/Switch';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { FunctionComponent, useEffect } from 'react';
+
 import { useOvermind } from 'app/overmind';
-import { Item, PropertyValue, PropertyName, Icon } from '../elements';
+
+import { Icon, Item, PropertyName, PropertyValue } from '../elements';
+
 import { FreezeContainer, FrozenWarning } from './elements';
 
-export const Frozen: React.FC = () => {
+export const Frozen: FunctionComponent = () => {
   const {
     actions: {
       editor: { frozenUpdated, sessionFreezeOverride },
@@ -18,6 +20,7 @@ export const Frozen: React.FC = () => {
       },
     },
   } = useOvermind();
+
   useEffect(() => {
     // always freeze it on start
     if (customTemplate) {
@@ -27,11 +30,10 @@ export const Frozen: React.FC = () => {
 
   const updateFrozenState = () => {
     if (customTemplate) {
-      sessionFreezeOverride({ frozen: !sessionFrozen });
-      return;
+      return sessionFreezeOverride({ frozen: !sessionFrozen });
     }
 
-    frozenUpdated({ frozen: !isFrozen });
+    return frozenUpdated({ frozen: !isFrozen });
   };
 
   return (
@@ -46,18 +48,20 @@ export const Frozen: React.FC = () => {
             <Icon />
           </Tooltip>
         </PropertyName>
+
         <PropertyValue>
           <FreezeContainer>
             <Switch
-              small
-              right={customTemplate ? sessionFrozen : isFrozen}
-              onClick={updateFrozenState}
               offMode
+              onClick={updateFrozenState}
+              right={customTemplate ? sessionFrozen : isFrozen}
               secondary
+              small
             />
           </FreezeContainer>
         </PropertyValue>
       </Item>
+
       {!sessionFrozen && (
         <FrozenWarning>Edits are enabled for this session</FrozenWarning>
       )}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/elements.ts
deleted file mode 100644
index d75a0fb00d7..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/elements.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-import { Popover, PopoverDisclosure, PopoverArrow } from 'reakit/Popover';
-import { PropertyValue } from '../../elements';
-
-export const Button = styled(PopoverDisclosure)<{ color: string }>`
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: ${props => props.color};
-
-  cursor: pointer;
-`;
-
-export const IconWrapper = styled(Popover)`
-  padding: 10px;
-  background: ${props => props.theme['sideBar.background']};
-  border: 1px solid
-    ${({ theme }) =>
-      theme['sideBar.foreground'] ||
-      (theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)')};
-  box-shadow: 0 0 14px
-    ${({ theme }) =>
-      theme.light ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'};
-
-  svg {
-    .stroke {
-      fill: ${({ theme }) =>
-        theme['sideBar.foreground'] ||
-        (theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)')}};
-    }
-
-    .fill {
-      fill: ${props => props.theme['sideBar.background']};
-    }
-  }
-`;
-
-export const Arrow = styled(PopoverArrow)``;
-
-export const List = styled.ul`
-  list-style: none;
-  display: grid;
-  padding: 0;
-  margin: 0;
-  grid-template-columns: repeat(7, 24px);
-  grid-gap: 10px;
-
-  li {
-    cursor: pointer;
-  }
-`;
-
-export const Value = styled(PropertyValue)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-export const IconButton = styled.button`
-  padding: 0;
-  border: 0;
-  background: transparent;
-
-  cursor: pointer;
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/elements.ts
new file mode 100644
index 00000000000..af97f7dda6a
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/elements.ts
@@ -0,0 +1,65 @@
+import { Popover, PopoverDisclosure } from 'reakit/Popover';
+import styled, { css } from 'styled-components';
+
+import { PropertyValue } from '../../../elements';
+
+export const Button = styled(PopoverDisclosure)<{ color: string }>`
+  ${({ color }) => css`
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: ${color};
+
+    cursor: pointer;
+  `};
+`;
+
+export const IconWrapper = styled(Popover)`
+  ${({ theme }) => css`
+    padding: 10px;
+    background: ${theme['sideBar.background']};
+    border: 1px solid
+      ${theme['sideBar.foreground'] ||
+        (theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)')};
+    box-shadow: 0 0 14px
+      ${theme.light ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.1)'};
+
+    svg {
+      .stroke {
+        fill: ${theme['sideBar.foreground'] ||
+          (theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.5)')}};
+      }
+
+      .fill {
+        fill: ${theme['sideBar.background']};
+      }
+    }
+  `};
+`;
+
+export const List = styled.ul`
+  list-style: none;
+  display: grid;
+  padding: 0;
+  margin: 0;
+  grid-template-columns: repeat(7, 24px);
+  grid-gap: 10px;
+
+  li {
+    cursor: pointer;
+  }
+`;
+
+export const Value = styled(PropertyValue)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+export const IconButton = styled.button`
+  padding: 0;
+  border: 0;
+  background: transparent;
+
+  cursor: pointer;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/index.tsx
similarity index 84%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/index.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/index.tsx
index 5560356fe82..a9e67cde7e3 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/Icon/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/Icon/index.tsx
@@ -2,19 +2,13 @@ import * as templates from '@codesandbox/common/lib/templates';
 import getIcon from '@codesandbox/common/lib/templates/icons';
 import { ColorIcons as Icons } from '@codesandbox/template-icons';
 import React, { FunctionComponent, useState } from 'react';
-import { usePopoverState } from 'reakit/Popover';
+import { PopoverArrow as Arrow, usePopoverState } from 'reakit/Popover';
 
 import { useOvermind } from 'app/overmind';
 
-import { Item, PropertyName } from '../../elements';
-import {
-  Button,
-  IconWrapper,
-  List,
-  Value,
-  IconButton,
-  Arrow,
-} from './elements';
+import { Item, PropertyName } from '../../../elements';
+
+import { Button, IconButton, IconWrapper, List, Value } from './elements';
 
 export const Icon: FunctionComponent = () => {
   const {
@@ -41,10 +35,7 @@ export const Icon: FunctionComponent = () => {
 
     popover.hide();
 
-    editTemplate({
-      ...customTemplate,
-      iconUrl: key,
-    });
+    editTemplate({ ...customTemplate, iconUrl: key });
   };
   const TemplateIcon = Icons[selectedIcon];
 
@@ -62,10 +53,10 @@ export const Icon: FunctionComponent = () => {
         </Button>
 
         <IconWrapper
-          hideOnEsc
+          aria-label="Choose an Icon"
           hideOnClickOutside
+          hideOnEsc
           {...popover}
-          aria-label="Choose an Icon"
         >
           <Arrow {...popover} />
 
@@ -75,7 +66,7 @@ export const Icon: FunctionComponent = () => {
 
               return (
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-                <li role="button" tabIndex={0} onClick={() => setIcon(i)}>
+                <li onClick={() => setIcon(i)} role="button" tabIndex={0}>
                   <IconButton>
                     <TemplateIconMap width={24} />
                   </IconButton>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/elements.ts
new file mode 100644
index 00000000000..d289f3b02fb
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/elements.ts
@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+import {
+  Explanation as ExplanationBase,
+  Item as ItemBase,
+} from '../../elements';
+
+export const Explanation = styled(ExplanationBase)`
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+`;
+
+export const Item = styled(ItemBase)`
+  margin-top: 0.5rem;
+`;
+
+export const PickColor = styled.button.attrs<{ color: string }>({
+  type: 'button',
+})`
+  ${({ color }) => css`
+    position: relative;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 4px;
+    background: ${color};
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0;
+    cursor: pointer;
+  `}
+`;
+
+export const PickerContainer = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
similarity index 76%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
index 9004342080f..5faaf339d85 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
@@ -6,11 +6,11 @@ import { useClickAway } from 'react-use';
 
 import { useOvermind } from 'app/overmind';
 
-import { WorkspaceItem } from '../../WorkspaceItem';
+import { WorkspaceItem } from '../../../WorkspaceItem';
 
-import { Explanation, Item, PropertyName, PropertyValue } from '../elements';
+import { PropertyName, PropertyValue } from '../../elements';
 
-import { PickColor, PickerContainer } from './elements';
+import { Explanation, Item, PickColor, PickerContainer } from './elements';
 import { Icon } from './Icon';
 
 export const TemplateConfig: FunctionComponent = () => {
@@ -29,7 +29,6 @@ export const TemplateConfig: FunctionComponent = () => {
   const [selectedColor, setSelectedColor] = useState(
     () => customTemplate.color || templates.default(template).color()
   );
-
   const colors = Object.keys(templates)
     .filter(x => x !== 'default')
     .map(t => templates[t])
@@ -38,15 +37,12 @@ export const TemplateConfig: FunctionComponent = () => {
   useClickAway(picker, () => {
     setShowPicker(false);
 
-    editTemplate({
-      ...customTemplate,
-      color: selectedColor,
-    });
+    editTemplate({ ...customTemplate, color: selectedColor });
   });
 
   return (
-    <WorkspaceItem showOverflow defaultOpen title="Template">
-      <Explanation style={{ marginTop: 0, marginBottom: '.5rem' }}>
+    <WorkspaceItem defaultOpen showOverflow title="Template">
+      <Explanation>
         This is a template, you can find more info about templates{' '}
         <Link target="_blank" to="/docs/templates">
           here
@@ -54,24 +50,22 @@ export const TemplateConfig: FunctionComponent = () => {
         .
       </Explanation>
 
-      <Item style={{ marginTop: '0.5rem' }}>
+      <Item>
         <PropertyName>Color</PropertyName>
 
         <PropertyValue relative>
           <PickColor
-            onClick={() => setShowPicker(true)}
             color={selectedColor}
+            onClick={() => setShowPicker(true)}
           />
 
           {showPicker && (
             <PickerContainer ref={picker}>
               <SketchPicker
+                color={selectedColor}
                 disableAlpha
                 id="color"
-                onChangeComplete={(color: { hex: string }) =>
-                  setSelectedColor(color.hex)
-                }
-                color={selectedColor}
+                onChangeComplete={color => setSelectedColor(color.hex)}
                 presetColors={[...new Set(colors)]}
               />
             </PickerContainer>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/elements.ts
index 297771c9814..910bf4c8595 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/elements.ts
@@ -1,9 +1,8 @@
-import styled, { css } from 'styled-components';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import styled from 'styled-components';
 
 export const Container = styled.div`
-  margin: 1rem;
-  margin-top: 5px;
+  margin: 5px 1rem 1rem;
 `;
 
 export const CenteredText = styled.div`
@@ -28,24 +27,3 @@ export const Action = styled(Button).attrs({
     margin-top: 1rem;
   }
 `;
-
-export const PickColor = styled.button.attrs<{ color: string }>({
-  type: 'button',
-})`
-  ${({ color }) => css`
-    position: relative;
-    width: 24px;
-    height: 24px;
-    border: none;
-    border-radius: 4px;
-    background: ${color};
-    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0;
-    cursor: pointer;
-  `}
-`;
-
-export const PickerContainer = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: calc(100% + 8px);
-`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.ts
deleted file mode 100644
index 1d1de1f5333..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SandboxConfig } from './SandboxConfig';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/SandboxConfig.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.tsx
similarity index 85%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/SandboxConfig.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.tsx
index 4262e2a4168..a4db7613730 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/SandboxConfig.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/index.tsx
@@ -6,7 +6,7 @@ import { useOvermind } from 'app/overmind';
 
 import { Group } from '../elements';
 
-import { Container, CenteredText, Action } from './elements';
+import { Action, CenteredText, Container } from './elements';
 import { TemplateConfig } from './TemplateConfig';
 
 export const SandboxConfig: FunctionComponent = () => {
@@ -26,10 +26,8 @@ export const SandboxConfig: FunctionComponent = () => {
     },
   } = useOvermind();
 
-  const onCreateTemplate = (e?: MouseEvent<HTMLButtonElement>) => {
-    if (e) {
-      e.preventDefault();
-    }
+  const onCreateTemplate = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
 
     if (!user) {
       modalOpened({ modal: 'signInForTemplates' });
@@ -44,10 +42,8 @@ export const SandboxConfig: FunctionComponent = () => {
     });
   };
 
-  const onDelete = (e?: MouseEvent<HTMLButtonElement>) => {
-    if (e) {
-      e.preventDefault();
-    }
+  const onDelete = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
 
     if (customTemplate) {
       deleteTemplate();
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/elements.ts
index a5cc0e90d64..68e81c6e827 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/elements.ts
@@ -1,10 +1,16 @@
 import styled, { css } from 'styled-components';
 
+import { WorkspaceInputContainer as WorkspaceInputContainerBase } from '../../elements';
+
 export const SandboxTitle = styled.div`
   ${({ theme }) => css`
     margin-bottom: 0.5rem;
-    color: ${theme.light ? css`#636363` : css`white`};
+    color: ${theme.light ? '#636363' : '#FFFFFF'};
     font-size: 1rem;
     font-weight: 400;
   `}
 `;
+
+export const WorkspaceInputContainer = styled(WorkspaceInputContainerBase)`
+  margin: 0 -0.25rem;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.ts
deleted file mode 100644
index 177576b64e1..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Title } from './Title';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/Title.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
similarity index 72%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/Title.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
index 6e43c67a555..ed6c4301f44 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/Title.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
@@ -1,14 +1,17 @@
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { ESC, ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import React, { FunctionComponent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { WorkspaceInputContainer } from '../../elements';
-
 import { EditPen } from '../elements';
 
-import { SandboxTitle } from './elements';
+import { SandboxTitle, WorkspaceInputContainer } from './elements';
 
 type Props = {
   editable: boolean;
@@ -16,7 +19,7 @@ type Props = {
 export const Title: FunctionComponent<Props> = ({ editable }) => {
   const {
     actions: {
-      workspace: { valueChanged, sandboxInfoUpdated },
+      workspace: { sandboxInfoUpdated, valueChanged },
     },
     state: {
       editor: { currentSandbox },
@@ -28,34 +31,33 @@ export const Title: FunctionComponent<Props> = ({ editable }) => {
   const [editing, setEditing] = useState(false);
 
   return editing ? (
-    <WorkspaceInputContainer style={{ margin: '0 -0.25rem' }}>
+    <WorkspaceInputContainer>
       <input
-        type="text"
-        placeholder="Title"
-        ref={el => {
-          if (el) {
-            el.focus();
-          }
-        }}
-        value={title}
-        onChange={event => {
-          valueChanged({
-            field: 'title',
-            value: event.target.value,
-          });
-        }}
         onBlur={() => {
           sandboxInfoUpdated();
+
           setEditing(false);
         }}
-        onKeyUp={event => {
-          if (event.keyCode === ENTER) {
+        onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+          valueChanged({ field: 'title', value });
+        }}
+        onKeyUp={({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+          if (keyCode === ENTER) {
             sandboxInfoUpdated();
+
             setEditing(false);
-          } else if (event.keyCode === ESC) {
+          } else if (keyCode === ESC) {
             setEditing(false);
           }
         }}
+        placeholder="Title"
+        ref={el => {
+          if (el) {
+            el.focus();
+          }
+        }}
+        type="text"
+        value={title}
       />
     </WorkspaceInputContainer>
   ) : (
@@ -69,6 +71,7 @@ export const Title: FunctionComponent<Props> = ({ editable }) => {
               field: 'title',
               value: getSandboxName(currentSandbox),
             });
+
             setEditing(true);
           }}
         />
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
index 89fa7e2e109..94ff4646a16 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
-import { Link } from 'react-router-dom';
 import Question from 'react-icons/lib/go/question';
 import EditPenIcon from 'react-icons/lib/md/create';
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   position: relative;
@@ -9,16 +9,14 @@ export const Container = styled.div`
 `;
 
 export const BasicInfo = styled.div`
-  margin: 1rem;
-  margin-top: 0;
+  margin: 0 1rem 1rem;
   font-size: 0.875rem;
 `;
 
 export const Item = styled.div`
   display: flex;
   align-items: center;
-  margin: 1rem;
-  margin-top: 0;
+  margin: 0 1rem 1rem;
   font-size: 0.875rem;
 `;
 
@@ -68,22 +66,6 @@ export const PrivacySelect = styled.select`
   `}
 `;
 
-export const PatronMessage = styled.div`
-  ${({ theme }) => css`
-    color: ${theme.light ? css`rgba(0, 0, 0, 0.6)` : theme.placeholder};
-    font-size: 0.875rem;
-  `}
-`;
-
-export const UserLink = styled(Link)`
-  ${({ theme }) => css`
-    display: block;
-    color: ${theme[`editor.foreground`] || css`rgba(255, 255, 255, 0.8)`};
-    font-size: 0.875rem;
-    text-decoration: none;
-  `}
-`;
-
 export const StatsContainer = styled(Item)`
   ${({ theme }) => css`
     height: 1.5rem;
@@ -104,17 +86,6 @@ export const PrivacyContainer = styled.span`
   `}
 `;
 
-export const FreezeContainer = styled.span`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const TemplateColor = styled.span`
-  ${({ theme }) => css`
-    color: ${theme.templateColor};
-  `}
-`;
-
 export const EditPen = styled(EditPenIcon)`
   ${({ theme }) => css`
     margin-left: 0.5rem;
@@ -157,8 +128,7 @@ export const Explanation = styled.span`
   ${({ theme }) => css`
     display: block;
     padding-top: 5px;
-    margin: 1rem;
-    margin-top: -20px;
+    margin: -20px 1rem 1rem;
     color: ${theme.light
       ? css`rgba(0, 0, 0, 0.4)`
       : css`rgba(255, 255, 255, 0.4)`};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.ts
deleted file mode 100644
index 9ac9de9c1da..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Project } from './Project';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
similarity index 61%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index f9d3d36e2da..6a668e6ff46 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -9,11 +9,12 @@ import {
 } from '@codesandbox/common/lib/utils/url-generator';
 import { PrivacyStatus } from 'app/components/PrivacyStatus';
 import { Stats } from 'app/pages/common/Stats';
-import React from 'react';
+import React, { ChangeEvent, FunctionComponent } from 'react';
 import TeamIcon from 'react-icons/lib/md/people';
+
 import { useOvermind } from 'app/overmind';
 
-// import AliasComponent from './Alias';
+// import { Alias } from './Alias';
 import { Author } from './Author';
 import { Description } from './Description';
 import {
@@ -36,59 +37,69 @@ import { Keywords } from './Keywords';
 import { SandboxConfig } from './SandboxConfig';
 import { Title } from './Title';
 
-interface IProjectProps {
+type Props = {
   editable?: boolean;
-}
-
-export const Project: React.FunctionComponent<IProjectProps> = ({
-  editable,
-}) => {
+};
+export const Project: FunctionComponent<Props> = ({ editable }) => {
   const {
-    state: {
-      editor: { currentSandbox: sandbox },
-      isPatron,
-    },
     actions: {
       workspace: { sandboxPrivacyChanged },
     },
+    state: {
+      editor: {
+        currentSandbox,
+        currentSandbox: {
+          author,
+          forkedFromSandbox,
+          forkedTemplateSandbox,
+          git,
+          privacy,
+          team,
+          template,
+        },
+      },
+      isPatron,
+    },
   } = useOvermind();
-
-  const template = getTemplateDefinition(sandbox.template);
+  const { url } = getTemplateDefinition(template);
 
   return (
     <Container>
       <BasicInfo>
         <Title editable={editable} />
+
         <Description editable={editable} />
+
         {/* Disable until we also moved SSE over */}
-        {/* <Alias editable={editable} /> */}
+        {/* {isPatron && <Alias editable={editable} />} */}
       </BasicInfo>
 
-      {!sandbox.team && sandbox.author && <Author author={sandbox.author} />}
+      {!team && author && <Author />}
 
-      {sandbox.team && (
+      {team && (
         <Tooltip appendTo="parent" content="This sandbox is owned by this team">
           <Item style={{ color: 'white', display: 'flex' }}>
             <TeamIcon style={{ fontSize: '1.125em', marginRight: '.5rem' }} />
-            <div>{sandbox.team.name}</div>
+
+            <div>{team.name}</div>
           </Item>
         </Tooltip>
       )}
 
-      {sandbox.git && (
+      {git && (
         <Item>
           <GithubBadge
-            url={githubRepoUrl(sandbox.git)}
-            username={sandbox.git.username}
-            repo={sandbox.git.repo}
-            branch={sandbox.git.branch}
-            commitSha={sandbox.git.commitSha}
+            branch={git.branch}
+            commitSha={git.commitSha}
+            repo={git.repo}
+            url={githubRepoUrl(git)}
+            username={git.username}
           />
         </Item>
       )}
 
       <StatsContainer>
-        <Stats sandbox={sandbox} />
+        <Stats sandbox={currentSandbox} />
       </StatsContainer>
 
       <Keywords editable={editable} />
@@ -96,30 +107,29 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
       <Group>
         <Item>
           <PropertyName>Privacy</PropertyName>
+
           <PropertyValue>
             <PrivacyContainer>
               {editable ? (
-                <>
-                  <PrivacySelect
-                    value={sandbox.privacy}
-                    disabled={!isPatron}
-                    onChange={event =>
-                      sandboxPrivacyChanged({
-                        privacy: Number(event.target.value) as 0 | 1 | 2,
-                      })
-                    }
-                  >
-                    <option value={0}>Public</option>
-                    {isPatron && (
-                      <option value={1}>
-                        Unlisted (only available by url)
-                      </option>
-                    )}
-                    {isPatron && <option value={2}>Private</option>}
-                  </PrivacySelect>
-                </>
+                <PrivacySelect
+                  disabled={!isPatron}
+                  onChange={({
+                    target: { value },
+                  }: ChangeEvent<HTMLSelectElement>) =>
+                    sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
+                  }
+                  value={privacy}
+                >
+                  <option value={0}>Public</option>
+
+                  {isPatron && (
+                    <option value={1}>Unlisted (only available by url)</option>
+                  )}
+
+                  {isPatron && <option value={2}>Private</option>}
+                </PrivacySelect>
               ) : (
-                <PrivacyStatus privacy={sandbox.privacy} />
+                <PrivacyStatus privacy={privacy} />
               )}
             </PrivacyContainer>
           </PropertyValue>
@@ -137,20 +147,17 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
 
         {editable && <Frozen />}
 
-        {(sandbox.forkedFromSandbox || sandbox.forkedTemplateSandbox) && (
+        {(forkedFromSandbox || forkedTemplateSandbox) && (
           <Item>
             <PropertyName>
-              {sandbox.forkedTemplateSandbox ? 'Template' : 'Forked From'}
+              {forkedTemplateSandbox ? 'Template' : 'Forked From'}
             </PropertyName>
+
             <PropertyValue>
               <TemplateStyledLink
-                to={sandboxUrl(
-                  sandbox.forkedFromSandbox || sandbox.forkedTemplateSandbox
-                )}
+                to={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
               >
-                {getSandboxName(
-                  sandbox.forkedFromSandbox || sandbox.forkedTemplateSandbox
-                )}
+                {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
               </TemplateStyledLink>
             </PropertyValue>
           </Item>
@@ -161,23 +168,24 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
             Environment{' '}
             <Tooltip
               boundary="viewport"
-              interactive
               content={
                 <>
                   The environment determines how a sandbox is executed, you can
                   find more info{' '}
-                  <a target="_blank" href="/docs/environment">
+                  <a href="/docs/environment" target="_blank">
                     here
                   </a>
                   .
                 </>
               }
+              interactive
             >
               <Icon />
             </Tooltip>
           </PropertyName>
+
           <PropertyValue>
-            <BundlerLink href={template.url}>{sandbox.template}</BundlerLink>
+            <BundlerLink href={url}>{template}</BundlerLink>
           </PropertyValue>
         </Item>
       </Group>
diff --git a/yarn.lock b/yarn.lock
index f11f55a5a15..0b74c68a9b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4258,6 +4258,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-color@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
+  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.8.3":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.3.tgz#6131b7b6158bc7ed1925a3374b88b7c00481f0cb"

From 899e2c2b2377afd13bb2c2e4c460cdd88d275a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 21:54:38 +0100
Subject: [PATCH 2/9] Extract Team

---
 .../Editor/Workspace/Project/Team/elements.ts | 14 ++++++++++
 .../Editor/Workspace/Project/Team/index.tsx   | 28 +++++++++++++++++++
 .../Editor/Workspace/Project/index.tsx        | 18 ++++--------
 3 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/elements.ts
new file mode 100644
index 00000000000..4d5044786d8
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/elements.ts
@@ -0,0 +1,14 @@
+import TeamIconBase from 'react-icons/lib/md/people';
+import styled from 'styled-components';
+
+import { Item as ItemBase } from '../elements';
+
+export const Item = styled(ItemBase)`
+  color: white;
+  display: flex;
+`;
+
+export const TeamIcon = styled(TeamIconBase)`
+  font-size: 1.125em;
+  margin-right: 0.5rem;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/index.tsx
new file mode 100644
index 00000000000..e5543f65e7f
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Team/index.tsx
@@ -0,0 +1,28 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item, TeamIcon } from './elements';
+
+export const Team: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: {
+          team: { name },
+        },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Tooltip appendTo="parent" content="This sandbox is owned by this team">
+      <Item>
+        <TeamIcon />
+
+        <div>{name}</div>
+      </Item>
+    </Tooltip>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index 6a668e6ff46..086d049a58b 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -7,12 +7,11 @@ import {
   patronUrl,
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import { PrivacyStatus } from 'app/components/PrivacyStatus';
-import { Stats } from 'app/pages/common/Stats';
 import React, { ChangeEvent, FunctionComponent } from 'react';
-import TeamIcon from 'react-icons/lib/md/people';
 
+import { PrivacyStatus } from 'app/components/PrivacyStatus';
 import { useOvermind } from 'app/overmind';
+import { Stats } from 'app/pages/common/Stats';
 
 // import { Alias } from './Alias';
 import { Author } from './Author';
@@ -35,12 +34,13 @@ import {
 import { Frozen } from './Frozen';
 import { Keywords } from './Keywords';
 import { SandboxConfig } from './SandboxConfig';
+import { Team } from './Team';
 import { Title } from './Title';
 
 type Props = {
   editable?: boolean;
 };
-export const Project: FunctionComponent<Props> = ({ editable }) => {
+export const Project: FunctionComponent<Props> = ({ editable = false }) => {
   const {
     actions: {
       workspace: { sandboxPrivacyChanged },
@@ -76,15 +76,7 @@ export const Project: FunctionComponent<Props> = ({ editable }) => {
 
       {!team && author && <Author />}
 
-      {team && (
-        <Tooltip appendTo="parent" content="This sandbox is owned by this team">
-          <Item style={{ color: 'white', display: 'flex' }}>
-            <TeamIcon style={{ fontSize: '1.125em', marginRight: '.5rem' }} />
-
-            <div>{team.name}</div>
-          </Item>
-        </Tooltip>
-      )}
+      {team && <Team/>}
 
       {git && (
         <Item>

From c6c723f961ef21b6582cdcf0454283912a083567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:23:11 +0100
Subject: [PATCH 3/9] Extract Git

---
 .../Sandbox/Editor/Workspace/Project/Git.tsx  | 31 +++++++++++++++++++
 .../Editor/Workspace/Project/index.tsx        | 15 ++-------
 2 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Git.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Git.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Git.tsx
new file mode 100644
index 00000000000..c661e4fbda6
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Git.tsx
@@ -0,0 +1,31 @@
+import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
+import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+
+import { Item } from './elements';
+
+export const Git: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: {
+          git,
+          git: { branch, commitSha, repo, username },
+        },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <GithubBadge
+        branch={branch}
+        commitSha={commitSha}
+        repo={repo}
+        url={githubRepoUrl(git)}
+        username={username}
+      />
+    </Item>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index 086d049a58b..74c7ab2f44e 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -1,9 +1,7 @@
-import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
 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 {
-  githubRepoUrl,
   patronUrl,
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
@@ -32,6 +30,7 @@ import {
   TemplateStyledLink,
 } from './elements';
 import { Frozen } from './Frozen';
+import { Git } from './Git';
 import { Keywords } from './Keywords';
 import { SandboxConfig } from './SandboxConfig';
 import { Team } from './Team';
@@ -78,17 +77,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
 
       {team && <Team/>}
 
-      {git && (
-        <Item>
-          <GithubBadge
-            branch={git.branch}
-            commitSha={git.commitSha}
-            repo={git.repo}
-            url={githubRepoUrl(git)}
-            username={git.username}
-          />
-        </Item>
-      )}
+      {git && <Git />}
 
       <StatsContainer>
         <Stats sandbox={currentSandbox} />

From 2649393d40f7d1cd0d604ea6a70b3b32f9f8e6a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:31:52 +0100
Subject: [PATCH 4/9] Extract Privacy

---
 .../Workspace/Project/Privacy/elements.ts     | 27 +++++++++
 .../Workspace/Project/Privacy/index.tsx       | 57 +++++++++++++++++++
 .../Editor/Workspace/Project/elements.ts      | 27 ---------
 .../Editor/Workspace/Project/index.tsx        | 40 +------------
 4 files changed, 87 insertions(+), 64 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/elements.ts
new file mode 100644
index 00000000000..eed571de577
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/elements.ts
@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+
+export const PrivacyContainer = styled.span`
+  ${({ theme }) => css`
+    margin-bottom: 1rem;
+    color: ${theme.templateColor};
+    font-size: 0.875rem;
+  `}
+`;
+
+export const PrivacySelect = styled.select`
+  ${({ theme }) => css`
+    width: 100%;
+    /* Same size as other items */
+    height: 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: ${theme[`dropdown.background`] || 'rgba(0, 0, 0, 0.3)'};
+    box-sizing: border-box;
+    color: ${theme[`dropdown.foreground`] ||
+      (theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)')};
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  `}
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/index.tsx
new file mode 100644
index 00000000000..40e7deacab5
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/index.tsx
@@ -0,0 +1,57 @@
+import React, { ChangeEvent, FunctionComponent } from 'react';
+
+import { PrivacyStatus } from 'app/components/PrivacyStatus';
+import { useOvermind } from 'app/overmind';
+
+import { Item, PropertyName, PropertyValue } from '../elements';
+
+import { PrivacyContainer, PrivacySelect } from './elements';
+
+type Props = {
+  editable: boolean;
+};
+export const Privacy: FunctionComponent<Props> = ({ editable }) => {
+  const {
+    actions: {
+      workspace: { sandboxPrivacyChanged },
+    },
+    state: {
+      editor: {
+        currentSandbox: { privacy },
+      },
+      isPatron,
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <PropertyName>Privacy</PropertyName>
+
+      <PropertyValue>
+        <PrivacyContainer>
+          {editable ? (
+            <PrivacySelect
+              disabled={!isPatron}
+              onChange={({
+                target: { value },
+              }: ChangeEvent<HTMLSelectElement>) =>
+                sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
+              }
+              value={privacy}
+            >
+              <option value={0}>Public</option>
+
+              {isPatron && (
+                <option value={1}>Unlisted (only available by url)</option>
+              )}
+
+              {isPatron && <option value={2}>Private</option>}
+            </PrivacySelect>
+          ) : (
+            <PrivacyStatus privacy={privacy} />
+          )}
+        </PrivacyContainer>
+      </PropertyValue>
+    </Item>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
index 94ff4646a16..2ceba46c9b2 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
@@ -47,25 +47,6 @@ export const PropertyValue = styled.span<{ relative?: boolean }>`
   `}
 `;
 
-export const PrivacySelect = styled.select`
-  ${({ theme }) => css`
-    width: 100%;
-    /* Same size as other items */
-    height: 20px;
-    border: none;
-    border-radius: 4px;
-    background-color: ${theme[`dropdown.background`] ||
-      css`rgba(0, 0, 0, 0.3)`};
-    box-sizing: border-box;
-    color: ${theme[`dropdown.foreground`] ||
-      (theme.light ? css`rgba(0, 0, 0, 0.8)` : css`rgba(255, 255, 255, 0.8)`)};
-
-    &:disabled {
-      opacity: 0.5;
-    }
-  `}
-`;
-
 export const StatsContainer = styled(Item)`
   ${({ theme }) => css`
     height: 1.5rem;
@@ -78,14 +59,6 @@ export const StatsContainer = styled(Item)`
   `}
 `;
 
-export const PrivacyContainer = styled.span`
-  ${({ theme }) => css`
-    margin-bottom: 1rem;
-    color: ${theme.templateColor};
-    font-size: 0.875rem;
-  `}
-`;
-
 export const EditPen = styled(EditPenIcon)`
   ${({ theme }) => css`
     margin-left: 0.5rem;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index 74c7ab2f44e..65daa7360b0 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -5,9 +5,8 @@ import {
   patronUrl,
   sandboxUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 
-import { PrivacyStatus } from 'app/components/PrivacyStatus';
 import { useOvermind } from 'app/overmind';
 import { Stats } from 'app/pages/common/Stats';
 
@@ -22,8 +21,6 @@ import {
   Group,
   Icon,
   Item,
-  PrivacyContainer,
-  PrivacySelect,
   PropertyName,
   PropertyValue,
   StatsContainer,
@@ -32,6 +29,7 @@ import {
 import { Frozen } from './Frozen';
 import { Git } from './Git';
 import { Keywords } from './Keywords';
+import { Privacy } from './Privacy';
 import { SandboxConfig } from './SandboxConfig';
 import { Team } from './Team';
 import { Title } from './Title';
@@ -41,9 +39,6 @@ type Props = {
 };
 export const Project: FunctionComponent<Props> = ({ editable = false }) => {
   const {
-    actions: {
-      workspace: { sandboxPrivacyChanged },
-    },
     state: {
       editor: {
         currentSandbox,
@@ -52,7 +47,6 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
           forkedFromSandbox,
           forkedTemplateSandbox,
           git,
-          privacy,
           team,
           template,
         },
@@ -86,35 +80,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
       <Keywords editable={editable} />
 
       <Group>
-        <Item>
-          <PropertyName>Privacy</PropertyName>
-
-          <PropertyValue>
-            <PrivacyContainer>
-              {editable ? (
-                <PrivacySelect
-                  disabled={!isPatron}
-                  onChange={({
-                    target: { value },
-                  }: ChangeEvent<HTMLSelectElement>) =>
-                    sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
-                  }
-                  value={privacy}
-                >
-                  <option value={0}>Public</option>
-
-                  {isPatron && (
-                    <option value={1}>Unlisted (only available by url)</option>
-                  )}
-
-                  {isPatron && <option value={2}>Private</option>}
-                </PrivacySelect>
-              ) : (
-                <PrivacyStatus privacy={privacy} />
-              )}
-            </PrivacyContainer>
-          </PropertyValue>
-        </Item>
+        <Privacy editable={editable} />
 
         {!isPatron && (
           <Explanation style={{ marginTop: '-1rem' }}>

From 4eba1765f24a96b1eb237cd261f0b2995f5d8acd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:37:30 +0100
Subject: [PATCH 5/9] Extract PrivacyNotice

---
 .../Workspace/Project/PrivacyNotice/elements.ts |  7 +++++++
 .../Workspace/Project/PrivacyNotice/index.tsx   | 14 ++++++++++++++
 .../Sandbox/Editor/Workspace/Project/index.tsx  | 17 +++--------------
 3 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/elements.ts
new file mode 100644
index 00000000000..f399421c2ad
--- /dev/null
+++ b/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;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/PrivacyNotice/index.tsx
new file mode 100644
index 00000000000..f9145a7e7bf
--- /dev/null
+++ b/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>
+);
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index 65daa7360b0..d6d6a178ffb 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/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 />}
 

From f793f0d6cd4763ffdd5b37636fb7d0fa1a7e37a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:46:52 +0100
Subject: [PATCH 6/9] Extract ForkedFrom

---
 .../Workspace/Project/ForkedFrom/elements.ts  |  8 +++++
 .../Workspace/Project/ForkedFrom/index.tsx    | 33 +++++++++++++++++++
 .../Editor/Workspace/Project/elements.ts      |  7 ----
 .../Editor/Workspace/Project/index.tsx        | 20 ++---------
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/elements.ts
new file mode 100644
index 00000000000..950a9e6945b
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/elements.ts
@@ -0,0 +1,8 @@
+import { Link as LinkBase } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const Link = styled(LinkBase)`
+  ${({ theme }) => css`
+    color: ${theme.templateColor} !important;
+  `}
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/index.tsx
new file mode 100644
index 00000000000..0dd8c891124
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/ForkedFrom/index.tsx
@@ -0,0 +1,33 @@
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Item, PropertyName, PropertyValue } from '../elements';
+
+import { Link } from './elements';
+
+export const ForkedFrom: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: { forkedFromSandbox, forkedTemplateSandbox },
+      },
+    },
+  } = useOvermind();
+
+  return (
+    <Item>
+      <PropertyName>
+        {forkedTemplateSandbox ? 'Template' : 'Forked From'}
+      </PropertyName>
+
+      <PropertyValue>
+        <Link to={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}>
+          {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
+        </Link>
+      </PropertyValue>
+    </Item>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
index 2ceba46c9b2..8d9495d06d4 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
@@ -1,6 +1,5 @@
 import Question from 'react-icons/lib/go/question';
 import EditPenIcon from 'react-icons/lib/md/create';
-import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
@@ -82,12 +81,6 @@ export const Icon = styled(Question)`
   cursor: pointer;
 `;
 
-export const TemplateStyledLink = styled(Link)`
-  ${({ theme }) => css`
-    color: ${theme.templateColor} !important;
-  `}
-`;
-
 export const BundlerLink = styled.a.attrs({
   target: '_blank',
   rel: 'noreferrer noopener',
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index d6d6a178ffb..c25f1a9f785 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -1,7 +1,5 @@
 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 { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -20,8 +18,8 @@ import {
   PropertyName,
   PropertyValue,
   StatsContainer,
-  TemplateStyledLink,
 } from './elements';
+import { ForkedFrom } from './ForkedFrom';
 import { Frozen } from './Frozen';
 import { Git } from './Git';
 import { Keywords } from './Keywords';
@@ -83,21 +81,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
 
         {editable && <Frozen />}
 
-        {(forkedFromSandbox || forkedTemplateSandbox) && (
-          <Item>
-            <PropertyName>
-              {forkedTemplateSandbox ? 'Template' : 'Forked From'}
-            </PropertyName>
-
-            <PropertyValue>
-              <TemplateStyledLink
-                to={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
-              >
-                {getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
-              </TemplateStyledLink>
-            </PropertyValue>
-          </Item>
-        )}
+        {(forkedFromSandbox || forkedTemplateSandbox) && <ForkedFrom />}
 
         <Item>
           <PropertyName>

From 9b3da0469e5f50b985d07c88767b76e32da25d80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:51:13 +0100
Subject: [PATCH 7/9] Extract Environment

---
 .../Workspace/Project/Environment/elements.ts | 10 ++++
 .../Workspace/Project/Environment/index.tsx   | 48 +++++++++++++++++++
 .../Editor/Workspace/Project/elements.ts      |  9 ----
 .../Editor/Workspace/Project/index.tsx        | 43 ++---------------
 4 files changed, 61 insertions(+), 49 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts
new file mode 100644
index 00000000000..7477a7378fc
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts
@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+
+export const BundlerLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noreferrer noopener',
+})`
+  ${({ theme }) => css`
+    color: ${theme.templateColor} !important;
+  `}
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx
new file mode 100644
index 00000000000..0c5353c193f
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx
@@ -0,0 +1,48 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Icon, Item, PropertyName, PropertyValue } from '../elements';
+
+import { BundlerLink } from './elements';
+
+export const Environment: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: { template },
+      },
+    },
+  } = useOvermind();
+  const { url } = getTemplateDefinition(template);
+
+  return (
+    <Item>
+      <PropertyName>
+        Environment{' '}
+        <Tooltip
+          boundary="viewport"
+          content={
+            <>
+              The environment determines how a sandbox is executed, you can find
+              more info{' '}
+              <a href="/docs/environment" target="_blank">
+                here
+              </a>
+              .
+            </>
+          }
+          interactive
+        >
+          <Icon />
+        </Tooltip>
+      </PropertyName>
+
+      <PropertyValue>
+        <BundlerLink href={url}>{template}</BundlerLink>
+      </PropertyValue>
+    </Item>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
index 8d9495d06d4..118fb2c5f9a 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
@@ -81,15 +81,6 @@ export const Icon = styled(Question)`
   cursor: pointer;
 `;
 
-export const BundlerLink = styled.a.attrs({
-  target: '_blank',
-  rel: 'noreferrer noopener',
-})`
-  ${({ theme }) => css`
-    color: ${theme.templateColor} !important;
-  `}
-`;
-
 export const Explanation = styled.span`
   ${({ theme }) => css`
     display: block;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
index c25f1a9f785..e384a72f38a 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx
@@ -1,5 +1,3 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -8,17 +6,8 @@ import { Stats } from 'app/pages/common/Stats';
 // import { Alias } from './Alias';
 import { Author } from './Author';
 import { Description } from './Description';
-import {
-  BasicInfo,
-  BundlerLink,
-  Container,
-  Group,
-  Icon,
-  Item,
-  PropertyName,
-  PropertyValue,
-  StatsContainer,
-} from './elements';
+import { BasicInfo, Container, Group, StatsContainer } from './elements';
+import { Environment } from './Environment';
 import { ForkedFrom } from './ForkedFrom';
 import { Frozen } from './Frozen';
 import { Git } from './Git';
@@ -43,13 +32,11 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
           forkedTemplateSandbox,
           git,
           team,
-          template,
         },
       },
       isPatron,
     },
   } = useOvermind();
-  const { url } = getTemplateDefinition(template);
 
   return (
     <Container>
@@ -83,31 +70,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
 
         {(forkedFromSandbox || forkedTemplateSandbox) && <ForkedFrom />}
 
-        <Item>
-          <PropertyName>
-            Environment{' '}
-            <Tooltip
-              boundary="viewport"
-              content={
-                <>
-                  The environment determines how a sandbox is executed, you can
-                  find more info{' '}
-                  <a href="/docs/environment" target="_blank">
-                    here
-                  </a>
-                  .
-                </>
-              }
-              interactive
-            >
-              <Icon />
-            </Tooltip>
-          </PropertyName>
-
-          <PropertyValue>
-            <BundlerLink href={url}>{template}</BundlerLink>
-          </PropertyValue>
-        </Item>
+        <Environment />
       </Group>
 
       {editable && <SandboxConfig />}

From b46e9bae16f83591a25a5bb88bed0acfcd50e98c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Tue, 3 Dec 2019 23:57:04 +0100
Subject: [PATCH 8/9] Fix CSS

---
 .../Editor/Workspace/Project/Alias/index.tsx  |  4 ++--
 .../Workspace/Project/Description/index.tsx   |  4 ++--
 .../Workspace/Project/Environment/index.tsx   |  4 ++--
 .../Editor/Workspace/Project/Frozen/index.tsx |  4 ++--
 .../SandboxConfig/TemplateConfig/index.tsx    |  2 +-
 .../Editor/Workspace/Project/Title/index.tsx  |  4 ++--
 .../Editor/Workspace/Project/elements.ts      | 22 +++++++------------
 7 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
index 5b5323e3f64..5872c53a62a 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Alias/index.tsx
@@ -10,7 +10,7 @@ import { useOvermind } from 'app/overmind';
 
 import { WorkspaceInputContainer } from '../../elements';
 
-import { EditPen } from '../elements';
+import { EditPenIcon } from '../elements';
 
 import { SandboxAlias } from './elements';
 
@@ -63,7 +63,7 @@ export const Alias: FunctionComponent<Props> = ({ editable }) => {
     <SandboxAlias>
       {alias}
 
-      {editable && <EditPen onClick={() => setEditing(true)} />}
+      {editable && <EditPenIcon onClick={() => setEditing(true)} />}
     </SandboxAlias>
   );
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
index 9c6215906b4..24b3407b2f6 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Description/index.tsx
@@ -8,7 +8,7 @@ import React, {
 
 import { useOvermind } from 'app/overmind';
 
-import { EditPen } from '../elements';
+import { EditPenIcon } from '../elements';
 
 import { SandboxDescription, WorkspaceInputContainer } from './elements';
 
@@ -65,7 +65,7 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
     <SandboxDescription empty={Boolean(description)}>
       {description || (editable ? 'No description, create one!' : '')}
 
-      {editable && <EditPen onClick={() => setEditing(true)} />}
+      {editable && <EditPenIcon onClick={() => setEditing(true)} />}
     </SandboxDescription>
   );
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx
index 0c5353c193f..9ccc0ce6ae7 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { Icon, Item, PropertyName, PropertyValue } from '../elements';
+import { Item, PropertyName, PropertyValue, QuestionIcon } from '../elements';
 
 import { BundlerLink } from './elements';
 
@@ -36,7 +36,7 @@ export const Environment: FunctionComponent = () => {
           }
           interactive
         >
-          <Icon />
+          <QuestionIcon />
         </Tooltip>
       </PropertyName>
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
index 522ca4f0571..a0805b53929 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Frozen/index.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent, useEffect } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { Icon, Item, PropertyName, PropertyValue } from '../elements';
+import { Item, PropertyName, PropertyValue, QuestionIcon } from '../elements';
 
 import { FreezeContainer, FrozenWarning } from './elements';
 
@@ -45,7 +45,7 @@ export const Frozen: FunctionComponent = () => {
             boundary="viewport"
             content="Whether we should fork the sandbox on edits"
           >
-            <Icon />
+            <QuestionIcon />
           </Tooltip>
         </PropertyName>
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
index 5faaf339d85..d793d3c1bd5 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
@@ -65,7 +65,7 @@ export const TemplateConfig: FunctionComponent = () => {
                 color={selectedColor}
                 disableAlpha
                 id="color"
-                onChangeComplete={color => setSelectedColor(color.hex)}
+                onChangeComplete={({ hex }) => setSelectedColor(hex)}
                 presetColors={[...new Set(colors)]}
               />
             </PickerContainer>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
index ed6c4301f44..48a3ed77ba3 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Title/index.tsx
@@ -9,7 +9,7 @@ import React, {
 
 import { useOvermind } from 'app/overmind';
 
-import { EditPen } from '../elements';
+import { EditPenIcon } from '../elements';
 
 import { SandboxTitle, WorkspaceInputContainer } from './elements';
 
@@ -65,7 +65,7 @@ export const Title: FunctionComponent<Props> = ({ editable }) => {
       {getSandboxName(currentSandbox)}
 
       {editable && (
-        <EditPen
+        <EditPenIcon
           onClick={() => {
             valueChanged({
               field: 'title',
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
index 118fb2c5f9a..704801468e5 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts
@@ -1,5 +1,5 @@
 import Question from 'react-icons/lib/go/question';
-import EditPenIcon from 'react-icons/lib/md/create';
+import EditPen from 'react-icons/lib/md/create';
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
@@ -30,7 +30,7 @@ export const PropertyName = styled.span`
     flex: 0 0 110px;
     width: 110px;
     margin-right: 0.5rem;
-    color: ${theme.light ? css`#6c6c6c` : css`rgba(255, 255, 255, 0.4)`};
+    color: ${theme.light ? '#6c6c6c' : 'rgba(255, 255, 255, 0.4)'};
     font-weight: 600;
     text-transform: uppercase;
   `}
@@ -51,29 +51,25 @@ export const StatsContainer = styled(Item)`
     height: 1.5rem;
     margin-left: 1rem;
     box-sizing: border-box;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.8)`
-      : css`rgba(255, 255, 255, 0.8)`};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
     font-size: 0.875rem;
   `}
 `;
 
-export const EditPen = styled(EditPenIcon)`
+export const EditPenIcon = styled(EditPen)`
   ${({ theme }) => css`
     margin-left: 0.5rem;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.5)`
-      : css`rgba(255, 255, 255, 0.5)`};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'};
     transition: 0.3s ease color;
     cursor: pointer;
 
     &:hover {
-      color: ${theme.light ? css`#636363` : css`white`};
+      color: ${theme.light ? '#636363' : '#FFFFFF'};
     }
   `}
 `;
 
-export const Icon = styled(Question)`
+export const QuestionIcon = styled(Question)`
   display: flex;
   font-size: 0.75rem;
   opacity: 0.5;
@@ -86,9 +82,7 @@ export const Explanation = styled.span`
     display: block;
     padding-top: 5px;
     margin: -20px 1rem 1rem;
-    color: ${theme.light
-      ? css`rgba(0, 0, 0, 0.4)`
-      : css`rgba(255, 255, 255, 0.4)`};
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
     font-size: 12px;
   `}
 `;

From 008c3f9b6147733b6525b36eecf5f61f7473898c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Fri, 6 Dec 2019 23:56:50 +0100
Subject: [PATCH 9/9] Fix react-color types

---
 packages/app/package.json | 2 +-
 yarn.lock                 | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index c7be8402df0..833dd4d46e4 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -252,7 +252,7 @@
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
-    "@types/react-color": "^3.0.1",
+    "@types/react-color": "^2.17.2",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
diff --git a/yarn.lock b/yarn.lock
index 0b74c68a9b7..4df9303e172 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4258,10 +4258,10 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-color@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
-  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+"@types/react-color@^2.17.2":
+  version "2.17.2"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-2.17.2.tgz#1a9de1baf5af5c4c7aecb8cb80f3f3cf242743ad"
+  integrity sha512-6aa8L1hhxxjEZz7LY45NRMOKUt72dVrB3MWXESv92YZohH3n2jjUi7j1cMeygdSUxZD8qLU5ITA63tRYYu8M2g==
   dependencies:
     "@types/react" "*"