Updating code themes

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -76,7 +76,7 @@ export default class CustomThemeChooser extends React.Component {
                     >
                         <label className='custom-label'>{element.uiName}</label>
                         <div
-                            className='input-group dropdown'
+                            className='input-group theme-group dropdown'
                             id={element.id}
                         >
                             <select
@@ -87,9 +87,11 @@ export default class CustomThemeChooser extends React.Component {
                             >
                                 {codeThemeOptions}
                             </select>
-                            <img
-                                src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
-                            />
+                            <span className='input-group-addon'>
+                                <img
+                                    src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                                />
+                            </span>
                         </div>
                     </div>
                 );

web/sass-files/sass/partials/_settings.scss

@@ -125,6 +125,15 @@
             }
 
             .appearance-section {
+                .theme-group {
+                    .input-group-addon {
+                        padding: 4px 5px;
+                        width: 40px;
+                        img {
+                            border: 1px solid rgba(black, 0.15);
+                        }
+                    }
+                }
                 .premade-themes {
                     margin-bottom: 10px;
                     .theme-label {