Resolve discussions

Author: MichaelDeBoey

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

@@ -12,4 +12,5 @@ export const BigTitle = styled.h2`
 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

@@ -3,8 +3,7 @@ import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { PaddedPreference, SubDescription, Rule } from '../../elements';
-
+import { PaddedPreference, Rule, SubDescription } from '../../elements';
 import { BigTitle, PreferenceText } from './elements';
 
 export const EditorTheme: FunctionComponent = () => {

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

@@ -3,12 +3,12 @@ import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
 
 import {
-  Title,
-  SubContainer,
-  PreferenceContainer,
   PaddedPreference,
-  SubDescription,
+  PreferenceContainer,
   Rule,
+  SubContainer,
+  SubDescription,
+  Title,
 } from '../elements';
 import VSCodePlaceholder from '../VSCodePlaceholder';
 

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 renamed to 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,
   });
 };