Merge pull request #1711 from asaadmahmoodspin/code-themes

Multiple UI Improvements

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);
@@ -72,6 +75,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'
@@ -90,11 +106,17 @@ export default class CustomThemeChooser extends React.Component {
                             >
                                 {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>
                 );

web/react/utils/constants.jsx

@@ -166,29 +166,6 @@ export default {
     UPDATE_TYPING_MS: 5000,
     THEMES: {
         default: {
-            type: 'Mattermost',
-            sidebarBg: '#fafafa',
-            sidebarText: '#333333',
-            sidebarUnreadText: '#333333',
-            sidebarTextHoverBg: '#e6f2fa',
-            sidebarTextActiveBorder: '#378FD2',
-            sidebarTextActiveColor: '#111111',
-            sidebarHeaderBg: '#2389d7',
-            sidebarHeaderTextColor: '#ffffff',
-            onlineIndicator: '#7DBE00',
-            mentionBj: '#2389d7',
-            mentionColor: '#ffffff',
-            centerChannelBg: '#ffffff',
-            centerChannelColor: '#333333',
-            newMessageSeparator: '#FF8800',
-            linkColor: '#2389d7',
-            buttonBg: '#2389d7',
-            buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7',
-            codeTheme: 'github'
-        },
-        organization: {
             type: 'Organization',
             sidebarBg: '#2071a7',
             sidebarText: '#fff',
@@ -211,6 +188,29 @@ export default {
             mentionHighlightLink: '#2f81b7',
             codeTheme: 'github'
         },
+        mattermost: {
+            type: 'Mattermost',
+            sidebarBg: '#fafafa',
+            sidebarText: '#333333',
+            sidebarUnreadText: '#333333',
+            sidebarTextHoverBg: '#e6f2fa',
+            sidebarTextActiveBorder: '#378FD2',
+            sidebarTextActiveColor: '#111111',
+            sidebarHeaderBg: '#2389d7',
+            sidebarHeaderTextColor: '#ffffff',
+            onlineIndicator: '#7DBE00',
+            mentionBj: '#2389d7',
+            mentionColor: '#ffffff',
+            centerChannelBg: '#ffffff',
+            centerChannelColor: '#333333',
+            newMessageSeparator: '#FF8800',
+            linkColor: '#2389d7',
+            buttonBg: '#2389d7',
+            buttonColor: '#FFFFFF',
+            mentionHighlightBg: '#fff2bb',
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
+        },
         mattermostDark: {
             type: 'Mattermost Dark',
             sidebarBg: '#1B2C3E',