settings.experimentVSCode is always true

Author: MichaelDeBoey

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx

@@ -1,9 +1,8 @@
-import themes from '@codesandbox/common/lib/themes';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { PaddedPreference, Rule, SubDescription } from '../../elements';
+import { Rule, SubDescription } from '../../elements';
 import { BigTitle, PreferenceText } from './elements';
 
 export const EditorTheme: FunctionComponent = () => {
@@ -20,9 +19,8 @@ export const EditorTheme: FunctionComponent = () => {
     setValue: value => settingChanged({ name, value }),
     value: setUndefined ? settings[name] || undefined : settings[name],
   });
-  const themeNames = themes.map(({ name }) => name);
 
-  return settings.experimentVSCode ? (
+  return (
     <div>
       <BigTitle>Editor Theme</BigTitle>
 
@@ -57,38 +55,5 @@ export const EditorTheme: FunctionComponent = () => {
         {...bindValue('manualCustomVSCodeTheme', true)}
       />
     </div>
-  ) : (
-    <div>
-      <BigTitle>Editor Theme</BigTitle>
-
-      <PaddedPreference
-        options={themeNames}
-        title="VSCode Theme"
-        type="dropdown"
-        {...bindValue('editorTheme')}
-      />
-
-      <SubDescription>
-        This will be overwritten if you enter a custom theme.
-      </SubDescription>
-
-      <Rule />
-
-      <SubDescription style={{ marginBottom: '1rem' }}>
-        Custom VSCode Theme
-      </SubDescription>
-
-      <PreferenceText
-        block
-        isTextArea
-        placeholder={`You can use your own theme from VSCode directly:
-1. Open VSCode
-2. Press (CMD or CTRL) + SHIFT + P
-3. Enter: '> Developer: Generate Color Scheme From Current Settings'
-4. Copy the contents and paste them here!`}
-        rows={7}
-        {...bindValue('customVSCodeTheme', true)}
-      />
-    </div>
   );
 };

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts

@@ -1,126 +1,20 @@
 import React, { FunctionComponent } from 'react';
 
-import { useOvermind } from 'app/overmind';
-
-import {
-  PaddedPreference,
-  PreferenceContainer,
-  Rule,
-  SubContainer,
-  SubDescription,
-  Title,
-} from '../elements';
+import { PreferenceContainer, SubContainer, Title } from '../elements';
 import VSCodePlaceholder from '../VSCodePlaceholder';
 
 import { EditorTheme } from './EditorTheme';
-import { PreferenceText } from './elements';
-
-export const Appearance: FunctionComponent = () => {
-  const {
-    actions: {
-      preferences: { settingChanged },
-    },
-    state: {
-      preferences: { settings },
-    },
-  } = useOvermind();
-
-  const bindValue = (name: string) => ({
-    setValue: value => settingChanged({ name, value }),
-    value: settings[name],
-  });
-  const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro'];
-
-  return (
-    <div>
-      <Title>Appearance</Title>
-
-      <SubContainer>
-        <PreferenceContainer>
-          <VSCodePlaceholder>
-            <PaddedPreference
-              title="Font Size"
-              type="number"
-              {...bindValue('fontSize')}
-            />
-
-            <Rule />
-
-            <PaddedPreference
-              options={['Custom'].concat(fontOptions)}
-              placeholder="Source Code Pro"
-              title="Font Family"
-              type="dropdown"
-              {...bindValue('fontFamily')}
-            />
-
-            <SubDescription>
-              We use{' '}
-              <a
-                href="https://dank.sh/affiliate?n=cjgw9wi2q7sf20a86q0k176oj"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Dank Mono
-              </a>{' '}
-              as default font, you can also use locally installed fonts
-            </SubDescription>
-
-            {!fontOptions.includes(settings.fontFamily) && (
-              <PreferenceText
-                block
-                placeholder="Enter your custom font"
-                {...bindValue('fontFamily')}
-              />
-            )}
-
-            <Rule />
-
-            <PaddedPreference
-              title="Font Ligatures"
-              type="boolean"
-              {...bindValue('enableLigatures')}
-            />
-
-            <SubDescription>
-              Whether we should enable{' '}
-              <a
-                href="https://en.wikipedia.org/wiki/Typographic_ligature"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                font ligatures
-              </a>
-              .
-            </SubDescription>
-
-            <Rule />
-
-            <PaddedPreference
-              placeholder="1.15"
-              step="0.05"
-              title="Line Height"
-              type="number"
-              {...bindValue('lineHeight')}
-            />
-
-            <Rule />
 
-            <PaddedPreference
-              title="Zen Mode"
-              type="boolean"
-              {...bindValue('zenMode')}
-            />
+export const Appearance: FunctionComponent = () => (
+  <div>
+    <Title>Appearance</Title>
 
-            <SubDescription>
-              Hide all distracting elements, perfect for lessons and
-              presentations.
-            </SubDescription>
-          </VSCodePlaceholder>
+    <SubContainer>
+      <PreferenceContainer>
+        <VSCodePlaceholder />
 
-          <EditorTheme />
-        </PreferenceContainer>
-      </SubContainer>
-    </div>
-  );
-};
+        <EditorTheme />
+      </PreferenceContainer>
+    </SubContainer>
+  </div>
+);