Embed redesign 2/n: Sidebar sections + Sandbox info

packages/app/package.json

@@ -73,6 +73,7 @@
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
+    "@styled-system/css": "^5.0.23",
     "@svgr/core": "^2.4.1",
     "@typeform/embed": "^0.12.0",
     "@types/rc-slider": "^8.6.5",
@@ -107,6 +108,7 @@
     "date-fns": "^2.4.1",
     "date-fns-tz": "^1.0.7",
     "debug": "^2.6.8",
+    "dot-object": "^1.9.0",
     "downshift": "^1.0.0-rc.14",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-vue": "^4.2.2",

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts

@@ -11,7 +11,7 @@ export const Container = styled.div<{
   justify-content: center;
   align-items: center;
   line-height: 1;
-  height: calc(100% - 1px);
+  height: 100%;
   font-size: 0.875rem;
   cursor: pointer;
 

packages/app/src/embed/components/App/elements.js

@@ -33,6 +33,6 @@ export const Moving = styled.div`
     left: 250px;
     transform: inherit;
     box-shadow: none;
-    border-left: 1px solid ${props => props.theme.background4};
+    border-left: 1px solid ${props => props.theme.colors.sideBar.border};
   }
 `;

packages/app/src/embed/components/Content/elements.ts

@@ -3,15 +3,15 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   position: relative;
-  background-color: ${props => props.theme.background2};
+  background-color: ${props => props.theme['editor.background']};
   height: calc(100% - 2.5rem);
 `;
 
 export const Tabs = styled.div`
   display: flex;
   height: 35px;
   min-height: 35px;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: ${props => props.theme['tab.inactiveBackground']};
   overflow-x: auto;
   font-size: 0.875rem;
 

packages/app/src/embed/components/Header/elements.js

@@ -30,8 +30,9 @@ export const Container = styled.div`
   height: 3rem;
   padding: 0 1rem;
   box-sizing: border-box;
-  border-bottom: 1px solid ${props => props.theme.background.darken(0.3)};
-  background-color: ${props => props.theme.background};
+  background-color: ${props => props.theme['editor.background']};
+  /* match sidebar border */
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 `;
 
 export const MenuIcon = styled(MenuIconSVG)`

packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+
+export const Container = styled.div(
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: 4,
+  })
+);
+
+export const Avatar = styled.img(
+  css({
+    size: '24px',
+    borderRadius: '2px',
+    border: '1px solid',
+    borderColor: 'grays.400',
+  })
+);
+
+export const Name = styled.span(
+  css({
+    display: 'inline-block',
+    fontSize: 2,
+    marginLeft: 2,
+  })
+);

packages/app/src/embed/components/Sidebar/AvatarBlock/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Container, Avatar, Name } from './elements';
+
+const AvatarBlock = ({ url, name }) => (
+  <Container>
+    <Avatar src={url} />
+    <Name>{name}</Name>
+  </Container>
+);
+
+export default AvatarBlock;

packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import CommonStats from '@codesandbox/common/lib/components/Stats';
+import { CenteredText } from '@codesandbox/common/lib/components/Stats/Stat/elements';
+
+export const Container = styled.div(
+  css({
+    padding: 4,
+  })
+);
+
+export const Title = styled.h2(
+  css({
+    fontSize: 3,
+    fontWeight: 'medium',
+    margin: 0,
+    marginBottom: 1,
+  })
+);
+
+export const Description = styled.div(
+  css({
+    fontSize: 2,
+    color: 'grays.300',
+    marginBottom: 4,
+  })
+);
+
+export const Stats = styled(CommonStats)(
+  css({
+    fontSize: 1,
+    // ouch ouch ouch, modifying a child of
+    // a common element is just pure evil
+    // this will definitely break on the
+    // slightest touch to the Stats component
+    // TODO: Refactor stats component to accept
+    // justify as an input
+    [CenteredText]: {
+      justifyContent: 'start',
+    },
+  })
+);

packages/app/src/embed/components/Sidebar/SandboxInfo/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container, Title, Description, Stats } from './elements';
+import AvatarBlock from '../AvatarBlock';
+
+const SandboxInfo = ({ sandbox }) => {
+  const title = sandbox.title || sandbox.id;
+
+  return (
+    <Container>
+      <Title title={title}>{title}</Title>
+      {sandbox.description && <Description>{sandbox.description}</Description>}
+      {sandbox.author && (
+        <AvatarBlock
+          url={sandbox.author.avatarUrl}
+          name={sandbox.author.username}
+        />
+      )}
+      <Stats {...sandbox} />
+    </Container>
+  );
+};
+
+export default SandboxInfo;

packages/app/src/embed/components/Sidebar/Section/elements.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+
+export const Body = styled.div(
+  css({
+    borderBottom: '1px solid',
+    borderColor: 'sideBar.border',
+  })
+);
+
+export const Header = styled.div(
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    height: '32px',
+    paddingX: 3,
+    borderBottom: '1px solid',
+    borderColor: 'sideBar.border',
+    cursor: 'pointer',
+    ':hover': {
+      backgroundColor: 'sideBar.border',
+    },
+    ':focus': {
+      backgroundColor: 'sideBar.border',
+    },
+  })
+);
+
+export const Title = styled.div(
+  css({
+    fontSize: 3,
+  })
+);
+
+export const Icon = styled.svg(props =>
+  css({
+    marginRight: 1,
+    transform: props.open ? 'rotate(0)' : 'rotate(-90deg)',
+  })
+);

packages/app/src/embed/components/Sidebar/Section/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Header, Icon, Title, Body } from './elements';
+
+function Section(props) {
+  const [open, setOpen] = React.useState(props.defaultOpen || false);
+  const toggle = () => setOpen(!open);
+
+  return (
+    <section>
+      <Header onClick={toggle}>
+        <ToggleIcon open={open} />
+        <Title>{props.title}</Title>
+      </Header>
+      {open ? <Body>{props.children}</Body> : null}
+    </section>
+  );
+}
+
+function ToggleIcon(props) {
+  return (
+    <Icon
+      width="9"
+      height="6"
+      viewBox="0 0 9 6"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.50009 6L-5.24537e-07 1.26364e-06L9 4.76837e-07L4.50009 6Z"
+        fill="#757575"
+      />
+    </Icon>
+  );
+}
+
+export default Section;

packages/app/src/embed/components/Sidebar/elements.js

@@ -5,14 +5,17 @@ import { isIOS } from '@codesandbox/common/lib/utils/platform';
 export const Container = styled.div`
   flex: 250px;
   width: 250px;
+
+  color: rgba(255, 255, 255, 0.8);
+  z-index: 10;
+  background-color: ${props => props.theme['sideBar.background']};
+  overflow: auto;
+  font-family: Inter, sans-serif;
+
   /* There is a bug with ios that causes the sidebar to be longer than the preview, when you then
    * scroll the preview it scrolls the editor down (page is longer). If I set this to 100% scrolling
    * is broken in Chrome though. That's why we have this check */
   height: ${isIOS ? '100%' : '100vh'};
-  color: rgba(255, 255, 255, 0.8);
-  z-index: 10;
-  background-color: ${props => props.theme.sidebar};
-  overflow: auto;
 `;
 
 export const Title = styled.h2`

packages/app/src/embed/components/Sidebar/index.js

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 
 import type { Sandbox } from '@codesandbox/common/lib/types';
@@ -8,16 +7,10 @@ import { EntryContainer } from 'app/pages/Sandbox/Editor/Workspace/elements';
 
 import EditorLink from '../EditorLink';
 import Files from '../Files';
+import Section from './Section';
+import SandboxInfo from './SandboxInfo';
 
-import {
-  Container,
-  Title,
-  Subtitle,
-  Description,
-  Item,
-  Version,
-  Author,
-} from './elements';
+import { Container, Subtitle, Item, Version } from './elements';
 
 const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`;
 
@@ -56,24 +49,12 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
 
   npmDependencies = npmDependencies || {};
 
-  const sandboxTitle = sandbox.title || sandbox.id;
-
   return (
     <Container>
-      <Item>
-        <Title title={sandboxTitle}>{sandboxTitle}</Title>
-        {sandbox.author && (
-          <Author>
-            Made by <strong>{sandbox.author.username}</strong>
-          </Author>
-        )}
-        {sandbox.description && (
-          <Description>{sandbox.description}</Description>
-        )}
-      </Item>
-
-      <Item>
-        <Title>Files</Title>
+      <Section title="CodeSandbox" defaultOpen>
+        <SandboxInfo sandbox={sandbox} />
+      </Section>
+      <Section title="Files">
         <Files
           modules={sandbox.modules}
           directories={sandbox.directories}
@@ -83,11 +64,8 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
           template={sandbox.template}
           entry={sandbox.entry}
         />
-      </Item>
-
-      <Item>
-        <Title>Dependencies</Title>
-
+      </Section>
+      <Section title="Dependencies">
         <Subtitle>npm dependencies</Subtitle>
         {Object.keys(npmDependencies).map(dep => (
           <EntryContainer key={dep}>
@@ -112,8 +90,7 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
             ))}
           </>
         )}
-      </Item>
-
+      </Section>
       <Item hover>
         <Padding margin={1}>
           <EditorLink sandbox={sandbox} />

packages/app/src/embed/index.html

@@ -21,6 +21,7 @@
     <meta property="twitter:image:height" content="630">
     <meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Source Code Pro:500" rel="stylesheet">
+    <link href="/static/fonts/inter/inter.css" rel="stylesheet">
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href="/favicon.ico">
     <title>Embed - CodeSandbox</title>

packages/app/src/embed/index.js

@@ -5,12 +5,10 @@ import { ThemeProvider } from 'styled-components';
 
 import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 import 'normalize.css';
-import theme from '@codesandbox/common/lib/theme';
 import '@codesandbox/common/lib/global.css';
-
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import track, { identify } from '@codesandbox/common/lib/utils/analytics';
 
+import theme from './theme';
 import App from './components/App';
 
 try {
@@ -25,7 +23,7 @@ document.addEventListener('click', () => {
 requirePolyfills().then(() => {
   function renderApp(Component) {
     render(
-      <ThemeProvider theme={{ ...theme, ...codesandbox.colors }}>
+      <ThemeProvider theme={theme}>
         <Component />
       </ThemeProvider>,
       document.getElementById('root')

packages/app/src/embed/theme/index.js

@@ -0,0 +1,20 @@
+import dot from 'dot-object';
+import applicationTheme from '@codesandbox/common/lib/theme';
+import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-nu.json';
+import tokens from './tokens';
+
+// merge vscode colors into tokens
+Object.assign(tokens.colors, dot.object({ ...codesandboxBlack.colors }));
+
+const theme = {
+  // hope to remove this bit
+  ...applicationTheme,
+  // used for parts imported from outside embed
+  ...codesandboxBlack.colors,
+  // used for syntax highlighting
+  vscodeTheme: codesandboxBlack,
+  // used for embed styles
+  ...tokens,
+};
+
+export default theme;