🔨 Switch Appearance to use useOvermind

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

@@ -0,0 +1,16 @@
+import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
+import styled from 'styled-components';
+
+export const BigTitle = styled.h2`
+  font-weight: 600;
+  color: white;
+  font-size: 1rem;
+  padding-top: 1.5rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const PreferenceText = styled(PreferenceTextBase)`
+  font-family: 'Source Code Pro';
+  font-size: 0.8rem;
+  width: 100%;
+`;

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

@@ -0,0 +1,59 @@
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Rule, SubDescription } from '../../elements';
+import { BigTitle, PreferenceText } from './elements';
+
+export const EditorTheme: FunctionComponent = () => {
+  const {
+    actions: {
+      preferences: { settingChanged },
+    },
+    state: {
+      preferences: { settings },
+    },
+  } = useOvermind();
+
+  const bindValue = (name: string, setUndefined?: boolean) => ({
+    setValue: value => settingChanged({ name, value }),
+    value: setUndefined ? settings[name] || undefined : settings[name],
+  });
+
+  return (
+    <div>
+      <BigTitle>Editor Theme</BigTitle>
+
+      <SubDescription>
+        You can select your editor theme by selecting File {'->'} Preferences{' '}
+        {'->'} Color Theme in the menu bar.
+      </SubDescription>
+
+      <Rule />
+
+      <SubDescription style={{ marginBottom: '1rem' }}>
+        Custom VSCode Theme
+      </SubDescription>
+
+      <SubDescription style={{ marginBottom: '1rem' }}>
+        After changing this setting you
+        {"'"}
+        ll have to reload the browser and select {'"'}
+        Custom
+        {'"'} as your color 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('manualCustomVSCodeTheme', true)}
+      />
+    </div>
+  );
+};

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

@@ -1,186 +1,20 @@
-import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText';
-import themes from '@codesandbox/common/lib/themes';
-import { useOvermind } from 'app/overmind';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
-import {
-  PaddedPreference,
-  PreferenceContainer,
-  Rule,
-  SubContainer,
-  SubDescription,
-  Title,
-} from '../elements';
+import { PreferenceContainer, SubContainer, Title } from '../elements';
 import VSCodePlaceholder from '../VSCodePlaceholder';
-import { BigTitle } from './elements';
 
-export const Appearance: React.FC = () => {
-  const {
-    state: {
-      preferences: { settings },
-    },
-    actions: {
-      preferences: { settingChanged },
-    },
-  } = useOvermind();
+import { EditorTheme } from './EditorTheme';
 
-  const bindValue = (name: string, setUndefined?: boolean) => ({
-    value: setUndefined ? settings[name] || undefined : settings[name],
-    setValue: value =>
-      settingChanged({
-        name,
-        value,
-      }),
-  });
+export const Appearance: FunctionComponent = () => (
+  <div>
+    <Title>Appearance</Title>
 
-  const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro'];
-  const themeOptions = themes.map(t => t.name);
+    <SubContainer>
+      <PreferenceContainer>
+        <VSCodePlaceholder />
 
-  return (
-    <div>
-      <Title>Appearance</Title>
-
-      <SubContainer>
-        <PreferenceContainer>
-          <VSCodePlaceholder>
-            <PaddedPreference
-              title="Font Size"
-              type="number"
-              {...bindValue('fontSize')}
-            />
-            <Rule />
-            <PaddedPreference
-              title="Font Family"
-              type="dropdown"
-              options={['Custom'].concat(fontOptions)}
-              placeholder="Source Code Pro"
-              {...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
-                style={{ marginTop: '1rem' }}
-                placeholder="Enter your custom font"
-                block
-                {...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
-              title="Line Height"
-              type="number"
-              placeholder="1.15"
-              step="0.05"
-              {...bindValue('lineHeight')}
-            />
-            <Rule />
-            <PaddedPreference
-              title="Zen Mode"
-              type="boolean"
-              {...bindValue('zenMode')}
-            />
-            <SubDescription>
-              Hide all distracting elements, perfect for lessons and
-              presentations.
-            </SubDescription>
-          </VSCodePlaceholder>
-
-          {settings.experimentVSCode ? (
-            <div>
-              <BigTitle>Editor Theme</BigTitle>
-              <SubDescription>
-                You can select your editor theme by selecting File {'->'}{' '}
-                Preferences {'->'} Color Theme in the menu bar.
-              </SubDescription>
-              <Rule />
-
-              <SubDescription style={{ marginBottom: '1rem' }}>
-                Custom VSCode Theme
-              </SubDescription>
-
-              <SubDescription style={{ marginBottom: '1rem' }}>
-                After changing this setting you
-                {"'"}
-                ll have to reload the browser and select {'"'}
-                Custom
-                {'"'} as your color theme.
-              </SubDescription>
-
-              <PreferenceText
-                isTextArea
-                style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
-                block
-                rows={7}
-                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!`}
-                {...bindValue('manualCustomVSCodeTheme', true)}
-              />
-            </div>
-          ) : (
-            <div>
-              <BigTitle>Editor Theme</BigTitle>
-
-              <PaddedPreference
-                title="VSCode Theme"
-                type="dropdown"
-                options={themeOptions}
-                {...bindValue('editorTheme')}
-              />
-              <SubDescription>
-                This will be overwritten if you enter a custom theme.
-              </SubDescription>
-              <Rule />
-
-              <SubDescription style={{ marginBottom: '1rem' }}>
-                Custom VSCode Theme
-              </SubDescription>
-
-              <PreferenceText
-                isTextArea
-                style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
-                block
-                rows={7}
-                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!`}
-                {...bindValue('customVSCodeTheme', true)}
-              />
-            </div>
-          )}
-        </PreferenceContainer>
-      </SubContainer>
-    </div>
-  );
-};
+        <EditorTheme />
+      </PreferenceContainer>
+    </SubContainer>
+  </div>
+);

packages/common/src/components/Preference/PreferenceText/elements.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import InputBase, { TextArea as TextAreaBase } from '../../Input';
+
+export const Input = styled(InputBase)`
+  width: 9rem;
+`;
+
+export const TextArea = styled(TextAreaBase)`
+  width: 9rem;
+`;

packages/common/src/components/Preference/PreferenceText.tsx → packages/common/src/components/Preference/PreferenceText/index.tsx

@@ -5,7 +5,7 @@ import {
   FunctionComponent,
 } from 'react';
 
-import Input, { TextArea } from '../Input';
+import { Input, TextArea } from './elements';
 
 type Props = {
   block?: boolean;
@@ -15,7 +15,6 @@ type Props = {
   setValue: (value: string) => void;
   value: string;
 } & Pick<ComponentProps<typeof Input>, 'style'>;
-
 export const PreferenceText: FunctionComponent<Props> = ({
   isTextArea,
   placeholder,
@@ -28,10 +27,9 @@ export const PreferenceText: FunctionComponent<Props> = ({
   };
 
   return createElement(isTextArea ? TextArea : Input, {
-    style: { width: '9rem' },
-    value,
-    placeholder,
     onChange: handleChange,
+    placeholder,
+    value,
     ...props,
   });
 };