Moved code theme picker into custom theme subarea

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -55,26 +55,70 @@ export default class CustomThemeChooser extends React.Component {
         const elements = [];
         let colors = '';
         Constants.THEME_ELEMENTS.forEach((element, index) => {
-            elements.push(
+            if (element.id === 'codeTheme') {
-                <div
+                const codeThemeOptions = [];
-                    className='col-sm-4 form-group'
+
-                    key={'custom-theme-key' + index}
+                element.themes.forEach((codeTheme, codeThemeIndex) => {
-                >
+                    codeThemeOptions.push(
-                    <label className='custom-label'>{element.uiName}</label>
+                        <option
+                            key={'code-theme-key' + codeThemeIndex}
+                            value={codeTheme.id}
+                        >
+                            {codeTheme.uiName}
+                        </option>
+                    );
+                });
+
+                elements.push(
                     <div
-                        className='input-group color-picker'
+                        className='col-sm-4 form-group'
-                        id={element.id}
+                        key={'custom-theme-key' + index}
                     >
-                        <input
+                        <label className='custom-label'>{element.uiName}</label>
-                            className='form-control'
+                        <div
-                            type='text'
+                            className='input-group dropdown'
-                            defaultValue={theme[element.id]}
+                            id={element.id}
-                            onChange={this.onInputChange}
+                        >
-                        />
+                            <select
-                        <span className='input-group-addon'><i></i></span>
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            >
+                                {codeThemeOptions}
+                            </select>
+                            <span className='input-group-addon'>
+                                <i>
+                                    <img
+                                        src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                                    />
+                                </i>
+                            </span>
+                        </div>
                     </div>
-                </div>
+                );
-            );
+            } else {
+                elements.push(
+                    <div
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
+                    >
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group color-picker'
+                            id={element.id}
+                        >
+                            <input
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            />
+                            <span className='input-group-addon'><i></i></span>
+                        </div>
+                    </div>
+                );
+            }
 
             colors += theme[element.id] + ',';
         });

web/react/components/user_settings/user_settings_appearance.jsx

@@ -203,12 +203,7 @@ export default class UserSettingsAppearance extends React.Component {
                     </div>
                     {custom}
                     <hr />
-                    <strong className='radio'>{'Code Theme'}</strong>
+
-                    <CodeThemeChooser
-                        theme={this.state.theme}
-                        updateTheme={this.updateCodeTheme}
-                    />
-                    <hr />
                     {serverError}
                     <a
                         className='btn btn-sm btn-primary'
@@ -228,6 +223,13 @@ export default class UserSettingsAppearance extends React.Component {
             </div>
         );
 
+                   /* <strong className='radio'>{'Code Theme'}</strong>
+                    <CodeThemeChooser
+                        theme={this.state.theme}
+                        updateTheme={this.updateCodeTheme}
+                    />
+                    <hr /> */
+
         return (
             <div>
                 <div className='modal-header'>

web/react/utils/constants.jsx

@@ -304,11 +304,33 @@ module.exports = {
         {
             id: 'mentionHighlightLink',
             uiName: 'Mention Highlight Link'
+        },
+        {
+            id: 'codeTheme',
+            uiName: 'Code Theme',
+            themes: [
+                {
+                    id: 'solarized_dark',
+                    uiName: 'Solarized Dark'
+                },
+                {
+                    id: 'solarized_light',
+                    uiName: 'Solarized light'
+                },
+                {
+                    id: 'github',
+                    uiName: 'GitHub'
+                },
+                {
+                    id: 'monokai',
+                    uiName: 'Monokai'
+                }
+            ]
         }
     ],
     CODE_THEMES: {
         github: 'GitHub',
-        solarized_light: 'Solarized light',
+        solarized_light: 'Solarized Light',
         monokai: 'Monokai',
         solarized_dark: 'Solarized Dark'
     },