1 files changed, 33 insertions, 2 deletions

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 35f836adb..55242ca7f 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -3,6 +3,9 @@
 
 import Constants from '../../utils/constants.jsx';
 
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
+const Popover = ReactBootstrap.Popover;
+
 export default class CustomThemeChooser extends React.Component {
     constructor(props) {
         super(props);
@@ -19,6 +22,15 @@ export default class CustomThemeChooser extends React.Component {
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
     }
+    componentDidUpdate() {
+        const theme = this.props.theme;
+        Constants.THEME_ELEMENTS.forEach((element) => {
+            if (theme.hasOwnProperty(element.id) && element.id !== 'codeTheme') {
+                $('#' + element.id).data('colorpicker').color.setColor(theme[element.id]);
+                $('#' + element.id).colorpicker('update');
+            }
+        });
+    }
     onPickerChange(e) {
         const theme = this.props.theme;
         theme[e.target.id] = e.color.toHex();
@@ -72,6 +84,19 @@ export default class CustomThemeChooser extends React.Component {
                     );
                 });
 
+                var popoverContent = (
+                    <Popover
+                        bsStyle='info'
+                        id='code-popover'
+                        className='code-popover'
+                    >
+                        <img
+                            width='200'
+                            src={'/static/images/themes/code_themes/' + theme[element.id] + 'Large.png'}
+                        />
+                    </Popover>
+                );
+
                 elements.push(
                     <div
                         className='col-sm-4 form-group'
@@ -85,16 +110,22 @@ export default class CustomThemeChooser extends React.Component {
                             <select
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             >
                                 {codeThemeOptions}
                             </select>
+                            <OverlayTrigger
+                                placement='top'
+                                overlay={popoverContent}
+                                ref='headerOverlay'
+                            >
                             <span className='input-group-addon'>
                                 <img
                                     src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
                                 />
                             </span>
+                            </OverlayTrigger>
                         </div>
                     </div>
                 );
@@ -112,7 +143,7 @@ export default class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>