Merge branch 'master' into fix/homepage-ab

Author: CompuIves

packages/app/src/app/overmind/effects/vscode/initializers.ts

@@ -40,6 +40,7 @@ export function initializeSettings() {
           'editor.minimap.enabled': false,
           'workbench.editor.openSideBySideDirection': 'down',
           'svelte.plugin.typescript.diagnostics.enable': false,
+          'typescript.locale': 'en',
         },
         null,
         2
@@ -71,6 +72,7 @@ export function initializeSettings() {
     settingsChanged = changeIfNeeded('javascript.autoClosingTags', false);
     settingsChanged = changeIfNeeded('typescript.autoClosingTags', false);
     settingsChanged = changeIfNeeded('html.autoClosingTags', false);
+    settingsChanged = changeIfNeeded('typescript.locale', 'en');
     settingsChanged = changeIfNeeded(
       'typescript.tsserver.useSeparateSyntaxServer',
       false

packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

@@ -404,7 +404,7 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
 
   copySandboxURL = () => {
     const url = sandboxUrl({ id: this.props.id, alias: this.props.alias });
-
+    // TODO: Use effects.browse.copyToClipboard after refactoring to Function Component
     copyToClipboard(`https://codesandbox.io${url}`);
 
     return true;

packages/app/src/app/pages/Dashboard/Content/routes/Templates/OwnedTemplates/OwnedTemplates.tsx

@@ -29,6 +29,9 @@ export const OwnedTemplates = (props: OwnedTemplatesProps) => {
     actions: {
       dashboard: { deleteTemplate },
     },
+    effects: {
+      browser: { copyToClipboard },
+    },
   } = useOvermind();
   const { teamId } = props;
   const { loading, error, data, refetch } = useQuery<
@@ -99,6 +102,15 @@ export const OwnedTemplates = (props: OwnedTemplatesProps) => {
                     return true;
                   },
                 },
+                {
+                  title: 'Copy Template Link',
+                  action: () => {
+                    copyToClipboard(
+                      `https://codesandbox.io${sandboxUrl(template.sandbox)}`
+                    );
+                    return true;
+                  },
+                },
               ],
               {
                 title: `Delete Template`,

packages/app/src/app/pages/GitHub/index.tsx

@@ -62,56 +62,58 @@ export const GitHub: FunctionComponent = () => {
 
   return (
     <MaxWidth>
-      <Margin vertical={1.5} horizontal={1.5}>
-        <Container>
-          <Navigation title="GitHub Import" />
+      <div style={{ minHeight: '100vh' }}>
+        <Margin vertical={1.5} horizontal={1.5}>
+          <Container>
+            <Navigation title="GitHub Import" />
 
-          <Content horizontal vertical>
-            <Description>
-              <Title>Import from GitHub</Title>
+            <Content horizontal vertical>
+              <Description>
+                <Title>Import from GitHub</Title>
 
-              <SubTitle>
-                Enter the URL to your GitHub repository to generate a URL to
-                your sandbox. The sandbox will stay in sync with your
-                repository.
-                <br />
-                <a
-                  href="/docs/importing#import-from-github"
-                  rel="noopener norefereer"
-                  target="_blank"
-                >
-                  See the docs
-                </a>
-              </SubTitle>
-            </Description>
+                <SubTitle>
+                  Enter the URL to your GitHub repository to generate a URL to
+                  your sandbox. The sandbox will stay in sync with your
+                  repository.
+                  <br />
+                  <a
+                    href="/docs/importing#import-from-github"
+                    rel="noopener norefereer"
+                    target="_blank"
+                  >
+                    See the docs
+                  </a>
+                </SubTitle>
+              </Description>
 
-            <Label htmlFor="githuburl">
-              URL to GitHub Repository (supports branches and paths too)
-            </Label>
+              <Label htmlFor="githuburl">
+                URL to GitHub Repository (supports branches and paths too)
+              </Label>
 
-            <Input
-              name="githuburl"
-              onChange={updateUrl}
-              placeholder="Insert GitHub URL..."
-              value={url}
-            />
+              <Input
+                name="githuburl"
+                onChange={updateUrl}
+                placeholder="Insert GitHub URL..."
+                value={url}
+              />
 
-            {error !== null && <ErrorMessage>{error}</ErrorMessage>}
+              {error !== null && <ErrorMessage>{error}</ErrorMessage>}
 
-            <Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
+              <Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
 
-            <Input
-              name="sandboxurl"
-              placeholder="The Sandbox URL"
-              value={transformedUrl}
-            />
+              <Input
+                name="sandboxurl"
+                placeholder="The Sandbox URL"
+                value={transformedUrl}
+              />
 
-            <Button disabled={!transformedUrl} to={gitHubToSandboxUrl(url)}>
-              Open Sandbox
-            </Button>
-          </Content>
-        </Container>
-      </Margin>
+              <Button disabled={!transformedUrl} to={gitHubToSandboxUrl(url)}>
+                Open Sandbox
+              </Button>
+            </Content>
+          </Container>
+        </Margin>
+      </div>
     </MaxWidth>
   );
 };

packages/app/src/app/pages/Sandbox/index.tsx

@@ -5,6 +5,8 @@ import Padding from '@codesandbox/common/lib/components/spacing/Padding';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { Title } from 'app/components/Title';
 import { useOvermind } from 'app/overmind';
+import { ThemeProvider } from '@codesandbox/components';
+import codesandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
 import { GithubIntegration } from 'app/pages/common/GithubIntegration';
 import { Navigation } from 'app/pages/common/Navigation';
 import React, { useEffect } from 'react';
@@ -137,26 +139,28 @@ export const Sandbox = React.memo<Props>(
 
     if (content) {
       return (
-        <Fullscreen>
-          <Padding
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              width: '100vw',
-              height: '100vh',
-            }}
-            margin={1}
-          >
-            <Navigation title="Sandbox Editor" />
-            <Centered
-              style={{ flex: 1, width: '100%', height: '100%' }}
-              horizontal
-              vertical
+        <ThemeProvider theme={codesandboxBlack}>
+          <Fullscreen>
+            <Padding
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100vw',
+                height: '100vh',
+              }}
+              margin={1}
             >
-              {content}
-            </Centered>
-          </Padding>
-        </Fullscreen>
+              <Navigation title="Sandbox Editor" />
+              <Centered
+                style={{ flex: 1, width: '100%', height: '100%' }}
+                horizontal
+                vertical
+              >
+                {content}
+              </Centered>
+            </Padding>
+          </Fullscreen>
+        </ThemeProvider>
       );
     }