Fix File UI (#3972)

* fix ui

* move themeProvider

Author: SaraVieira

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -1,4 +1,6 @@
 import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
+import { withTheme } from 'styled-components';
+import { ThemeProvider } from '@codesandbox/components';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import { Module } from '@codesandbox/common/lib/types';
@@ -23,9 +25,10 @@ type Props = EditorProps & {
   onChangeVSCode: (val: string) => void;
   onDispose: (cb: () => void) => void;
   openText: () => void;
+  theme: any;
 };
 
-export class Configuration extends React.PureComponent<Props>
+export class ConfigurationComponent extends React.PureComponent<Props>
   implements Editor {
   disposeInitializer: Function;
   currentModule: Module;
@@ -147,13 +150,16 @@ export class Configuration extends React.PureComponent<Props>
             More info...
           </a>
         </Description>
-
-        <ConfigWizard
-          sandbox={sandbox}
-          updateFile={this.updateFile}
-          file={this.props.getCode()}
-        />
+        <ThemeProvider theme={this.props.theme.vscodeTheme}>
+          <ConfigWizard
+            sandbox={sandbox}
+            updateFile={this.updateFile}
+            file={this.props.getCode()}
+          />
+        </ThemeProvider>
       </Container>
     );
   }
 }
+
+export const Configuration = withTheme(ConfigurationComponent);

packages/common/src/templates/configuration/elements.ts

@@ -6,6 +6,14 @@ export const PaddedPreference = (styled(Preference)`
   width: 100%;
   padding: 0;
   font-weight: 400;
+
+  span[data-component='SwitchToggle'] {
+    top: 1px;
+  }
+
+  input[type='checkbox']:focus {
+    display: none;
+  }
 ` as unknown) as typeof Preference;
 
 export const PaddedConfig = styled.div`

packages/common/src/templates/configuration/prettierRC/ui.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
   ConfigDescription,
   PaddedConfig,
@@ -43,7 +42,6 @@ export class ConfigWizard extends React.Component<ConfigurationUIProps> {
     if (!parsedFile) {
       return <div>Could not parse .prettierrc</div>;
     }
-
     return (
       <div>
         <PaddedConfig>