More theming

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

@@ -25,6 +25,7 @@ import { debounce } from 'lodash-es';
 import { EXTENSIONS_LOCATION, VIM_EXTENSION_ID } from './constants';
 import {
   initializeCustomTheme,
+  initializeCodeSandboxTheme,
   initializeExtensionsFolder,
   initializeSettings,
   initializeThemeCache,
@@ -133,6 +134,7 @@ export class VSCodeEffect {
       // We want to initialize before VSCode, but after browserFS is configured
       // For first-timers initialize a theme in the cache so it doesn't jump colors
       initializeExtensionsFolder();
+      initializeCodeSandboxTheme();
       initializeCustomTheme();
       initializeThemeCache();
       initializeSettings();
@@ -498,12 +500,18 @@ export class VSCodeEffect {
               fs: 'LocalStorage',
             },
             '/extensions': {
-              fs: 'BundledHTTPRequest',
+              fs: 'OverlayFS',
               options: {
-                index: EXTENSIONS_LOCATION + '/extensions/index.json',
-                baseUrl: EXTENSIONS_LOCATION + '/extensions',
-                bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
-                logReads: process.env.NODE_ENV === 'development',
+                writable: { fs: 'InMemory' },
+                readable: {
+                  fs: 'BundledHTTPRequest',
+                  options: {
+                    index: EXTENSIONS_LOCATION + '/extensions/index.json',
+                    baseUrl: EXTENSIONS_LOCATION + '/extensions',
+                    bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
+                    logReads: process.env.NODE_ENV === 'development',
+                  },
+                },
               },
             },
             '/extensions/custom-theme': {

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

@@ -1,3 +1,6 @@
+import codeSandboxBlackTheme from '@codesandbox/common/lib/themes/codesandbox-black.json';
+import codeSandboxTheme from '@codesandbox/common/lib/themes/codesandbox.json';
+
 export function initializeThemeCache() {
   try {
     if (!localStorage.getItem('vs-global://colorThemeData')) {
@@ -42,57 +45,81 @@ export function initializeSettings() {
   }
 }
 
+export function initializeCodeSandboxTheme() {
+  // @ts-ignore
+  const fs = BrowserFS.BFSRequire('fs');
+
+  fs.writeFileSync(
+    '/extensions/ngryman.codesandbox-theme-0.0.1/themes/CodeSandbox-color-theme.json',
+    JSON.stringify(codeSandboxTheme)
+  );
+}
+
+export function installCustomTheme(id: string, name: string, theme: string) {
+  const packageJSON = {
+    name: id,
+    displayName: name,
+    description: 'The Custom VSCode Theme',
+    version: '0.4.1',
+    publisher: 'CodeSandbox',
+    license: 'SEE LICENSE IN LICENSE.md',
+    repository: {
+      type: 'git',
+      url: 'https://github.com/sdras/night-owl-vscode-theme',
+    },
+    keywords: [],
+    scripts: {
+      publish: 'vsce publish',
+    },
+    galleryBanner: {
+      color: '#061526',
+      theme: 'dark',
+    },
+    engines: {
+      vscode: '^1.17.0',
+    },
+    categories: ['Themes'],
+    contributes: {
+      themes: [
+        {
+          label: name,
+          uiTheme: 'vs-dark',
+          path: './themes/custom-color-theme.json',
+        },
+      ],
+    },
+  };
+
+  // @ts-ignore
+  const fs = BrowserFS.BFSRequire('fs');
+  const extName = `${id}-theme`;
+  fs.mkdirSync(`/extensions/${extName}`);
+  fs.writeFileSync(
+    `/extensions/${extName}/package.json`,
+    JSON.stringify(packageJSON)
+  );
+
+  fs.mkdirSync(`/extensions/${extName}/themes`);
+  fs.writeFileSync(
+    `/extensions/${extName}/themes/custom-color-theme.json`,
+    theme
+  );
+}
+
 /**
  * This auto installs an extension with a custom theme specified in preferences. People can select
  * it as "Custom Theme".
  */
 export function initializeCustomTheme() {
   const customTheme = localStorage.getItem('settings.manualCustomVSCodeTheme');
-  if (customTheme) {
-    const packageJSON = {
-      name: 'custom',
-      displayName: 'Custom Theme',
-      description: 'The Custom VSCode Theme',
-      version: '0.4.1',
-      publisher: 'CodeSandbox',
-      license: 'SEE LICENSE IN LICENSE.md',
-      repository: {
-        type: 'git',
-        url: 'https://github.com/sdras/night-owl-vscode-theme',
-      },
-      keywords: [],
-      scripts: {
-        publish: 'vsce publish',
-      },
-      galleryBanner: {
-        color: '#061526',
-        theme: 'dark',
-      },
-      engines: {
-        vscode: '^1.17.0',
-      },
-      categories: ['Themes'],
-      contributes: {
-        themes: [
-          {
-            label: 'Custom Theme',
-            uiTheme: 'vs-dark',
-            path: './themes/custom-color-theme.json',
-          },
-        ],
-      },
-    };
 
-    // @ts-ignore
-    const fs = window.BrowserFS.BFSRequire('fs');
-    fs.writeFileSync(
-      '/extensions/custom-theme/package.json',
-      JSON.stringify(packageJSON)
-    );
-    fs.mkdirSync('/extensions/custom-theme/themes');
-    fs.writeFileSync(
-      '/extensions/custom-theme/themes/custom-color-theme.json',
-      JSON.parse(customTheme)
-    );
+  if (customTheme) {
+    installCustomTheme('custom', 'Custom Theme', customTheme);
   }
+
+  installCustomTheme(
+    'codesandbox-black',
+    'CodeSandbox Black',
+    JSON.stringify(codeSandboxBlackTheme)
+  );
 }

packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts

@@ -17,6 +17,7 @@ export const Container = styled.div`
     display: flex;
     flex-direction: column;
     width: 3.5rem;
+    border-right: 1px solid ${theme['activityBar.border'] || 'transparent'};
     flex: 0 0 3.5rem;
     height: 100%;
     color: ${theme[`activityBar.inactiveForeground`] ||

packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/elements.ts

@@ -4,8 +4,11 @@ import ExpandIcon from 'react-icons/lib/md/keyboard-arrow-down';
 export const ChildContainer = styled.div<{ disabled?: boolean }>`
   position: relative;
   margin: 0;
-  padding: 0;
+  padding-top: 0.5rem;
+  padding-bottom: 1.75rem;
   height: 100%;
+  border-top: 1px solid
+    ${props => props.theme['sideBar.border'] || props.theme.background};
 
   ${({ disabled }) =>
     disabled &&
@@ -34,13 +37,15 @@ export const ItemHeader = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  padding: 0.25rem 0.75rem;
+
+  border-top: 1px solid ${props =>
+    props.theme['sideBar.border'] || props.theme.background};
+  padding: 0.5rem 0.75rem;
   box-sizing: border-box;
   vertical-align: middle;
   height: 2rem;
   margin: 0;
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 13px;
   color: ${props => (props.theme.light ? '#636363' : props.theme.white)};
   cursor: pointer;
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx

@@ -19,7 +19,9 @@ export const FilesItem = () => {
         <span style={{ display: 'inline-block', width: '100%' }}>Explorer</span>{' '}
         {editActions}
       </ItemTitle>
-      <Files setEditActions={setEditActions} />
+      <div style={{ paddingBottom: '1.75rem' }}>
+        <Files setEditActions={setEditActions} />
+      </div>
       {!staticTemplate ? (
         <WorkspaceItem defaultOpen title="Dependencies">
           <Dependencies />

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx

@@ -15,20 +15,11 @@ export const NotOwnedSandboxInfo = () => {
   return (
     <div style={{ marginTop: '1rem' }}>
       <Project />
-      <WorkspaceItem
-        actions={editActions}
-        defaultOpen
-        style={{ marginTop: '.5rem' }}
-        title="Files"
-      >
+      <WorkspaceItem actions={editActions} defaultOpen title="Files">
         <Files setEditActions={setEditActions} />
       </WorkspaceItem>
       {!staticTemplate ? (
-        <WorkspaceItem
-          defaultOpen
-          style={{ marginTop: '.5rem' }}
-          title="Dependencies"
-        >
+        <WorkspaceItem defaultOpen title="Dependencies">
           <Dependencies />
         </WorkspaceItem>
       ) : null}

packages/common/src/themes/codesandbox-black.json

@@ -50,7 +50,7 @@
     "tab.activeBackground": "#282A36",
     "tab.activeForeground": "#F8F8F2",
     "editor.background": "#151515",
-    "editor.foreground": "#ffffff",
+    "editor.foreground": "#999",
     "editor.hoverHighlightBackground": "#333",
     "editor.inactiveSelectionBackground": "#333",
 
@@ -158,7 +158,7 @@
     "scrollbarSlider.hoverBackground": null,
     "sideBar.background": "#151515",
     "sideBar.border": "#242424",
-    "sideBar.foreground": "#ffffff",
+    "sideBar.foreground": "#999",
     "sideBarSectionHeader.background": "#151515",
     "sideBarSectionHeader.foreground": "#ffffff",
     "sideBarSectionHeader.border": "#242424",

packages/common/src/themes/codesandbox.json

@@ -4,6 +4,7 @@
   "type": "dark",
   "colors": {
     "activityBar.background": "#1C2022",
+    "activityBar.border": "#111518",
     "badge.background": "#374140",
     "button.background": "#40A9F3",
     "button.hoverBackground": "#66B9F4",
@@ -16,14 +17,14 @@
     "input.background": "#111518",
     "input.foreground": "#C0C0C0",
     "list.hoverBackground": "#37414050",
-    "menu.background": "#111518",
+    "list.focusBackground": "#24282A",
     "menu.selectionBackground": "#24282A",
-    "menu.selectionForeground": "#40A9F3",
     "scrollbarSlider.activeBackground": "#374140",
     "scrollbarSlider.background": "#37414050",
     "sideBar.background": "#191d1f",
     "sideBar.border": "#111518",
-    "statusBar.background": "#242424",
+    "statusBar.background": "#1C2022",
+    "statusBar.border": "#111518",
     "tab.activeBackground": "#1C2022",
     "tab.border": "#111518",
     "tab.inactiveBackground": "#111518",
@@ -35,7 +36,14 @@
     "editorHoverWidget.border": "#111518",
     "inputOption.activeBorder": "#66b9f4",
     "focusBorder": "#66b9f4",
-    "peekViewEditor.background": "#111518"
+    "peekViewEditor.background": "#111518",
+    "menu.background": "#1C2022",
+    "menu.foreground": "#C0C0C0",
+    "menu.selectionForeground": "#ffffff",
+    "menubar.selectionBackground": "#ffffff10",
+    "menubar.selectionForeground": "#ffffff",
+    "editorGroup.dropBackground": "#ffd3991f",
+    "editorWarning.foreground": "#FFD399"
   },
   "tokenColors": [
     {