Make the status bar less distracting (codesandbox#2675)

* Make the status bar less distracting

* Changed it to dark-3 to match new design(ish)

* change in extension

* updated theme snapshot

* change (some) vscode-extensions usage to v10

* oh boy! Ives told me to edit this giant file

* cache bust a little more

Author: siddharthkp

packages/app/config/build.js

@@ -2,11 +2,11 @@ const isDev = process.env.NODE_ENV === 'development';
 const staticAssets = [
   {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode23/vs',
+    to: 'public/vscode24/vs',
   },
   {
     from: 'standalone-packages/vscode-extensions/out',
-    to: 'public/vscode-extensions/v9',
+    to: 'public/vscode-extensions/v10',
   },
   {
     from: 'node_modules/onigasm/lib/onigasm.wasm',

packages/app/config/webpack.prod.js

@@ -6,10 +6,8 @@ const webpack = require('webpack');
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
-const normalizeName = require('webpack/lib/optimize/SplitChunksPlugin')
-  .normalizeName;
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { normalizeName } = require('webpack/lib/optimize/SplitChunksPlugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const VERSION = require('@codesandbox/common/lib/version').default;
@@ -182,7 +180,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /\/vscode23/,
+          urlPattern: /\/vscode24/,
           handler: 'cacheFirst',
           options: {
             cache: {

packages/app/src/app/index.html

@@ -68,9 +68,9 @@
       }
 	</script>
 
-	<link data-name="/public/vscode23/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode23/vs/editor/codesandbox.editor.main.css">
+	<link data-name="/public/vscode24/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode24/vs/editor/codesandbox.editor.main.css">
 	</link>
-	<link rel="preload" as="script" href="/public/vscode23/vs/editor/codesandbox.editor.main.js">
+	<link rel="preload" as="script" href="/public/vscode24/vs/editor/codesandbox.editor.main.js">
 	</link>
 </head>
 

packages/app/src/app/vscode/constants.ts

@@ -1,3 +1,3 @@
 export const EXTENSIONS_LOCATION = process.env.VSCODE
   ? '/vscode/extensions-bundle'
-  : '/public/vscode-extensions/v9';
+  : '/public/vscode-extensions/v10';

packages/app/src/app/vscode/metadata.ts

@@ -1,7 +1,7 @@
 const VSCODE_METADATA = {
   CORE: {
     paths: {
-      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode23/vs',
+      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode24/vs',
       'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
       'npm/min': 'node_modules/monaco-editor-core/min/vs',
       built: '/vscode/out-monaco-editor-core/min/vs',

packages/common/src/__snapshots__/theme.test.ts.snap

@@ -61,7 +61,7 @@ Object {
       "scrollbarSlider.background": "#37414050",
       "sideBar.background": "#191d1f",
       "sideBar.border": "#111518",
-      "statusBar.background": "#40A9F3",
+      "statusBar.background": "#242424",
       "tab.activeBackground": "#1C2022",
       "tab.border": "#111518",
       "tab.inactiveBackground": "#111518",

packages/common/src/themes/codesandbox.json

@@ -23,7 +23,7 @@
     "scrollbarSlider.background": "#37414050",
     "sideBar.background": "#191d1f",
     "sideBar.border": "#111518",
-    "statusBar.background": "#40A9F3",
+    "statusBar.background": "#242424",
     "tab.activeBackground": "#1C2022",
     "tab.border": "#111518",
     "tab.inactiveBackground": "#111518",

standalone-packages/vscode-editor/release/min/vs/editor/codesandbox.editor.main.js

@@ -22,7 +22,7 @@
 	  "scrollbarSlider.background": "#37414050",
 	  "sideBar.background": "#191d1f",
 	  "sideBar.border": "#111518",
-	  "statusBar.background": "#40A9F3",
+	  "statusBar.background": "#242424",
 	  "tab.activeBackground": "#1C2022",
 	  "tab.border": "#111518",
 	  "tab.inactiveBackground": "#111518",