From 0054924cdbcdb3e3631bd7036244aebba4234c33 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 3 Nov 2015 09:39:07 -0800
Subject: Moved code theme picker into custom theme subarea

---
 .../user_settings/custom_theme_chooser.jsx         | 78 +++++++++++++++++-----
 .../user_settings/user_settings_appearance.jsx     | 14 ++--
 web/react/utils/constants.jsx                      | 24 ++++++-
 3 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 095e5b622..07e3fb24c 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/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(
-                <div
-                    className='col-sm-4 form-group'
-                    key={'custom-theme-key' + index}
-                >
-                    <label className='custom-label'>{element.uiName}</label>
+            if (element.id === 'codeTheme') {
+                const codeThemeOptions = [];
+
+                element.themes.forEach((codeTheme, codeThemeIndex) => {
+                    codeThemeOptions.push(
+                        <option
+                            key={'code-theme-key' + codeThemeIndex}
+                            value={codeTheme.id}
+                        >
+                            {codeTheme.uiName}
+                        </option>
+                    );
+                });
+
+                elements.push(
                     <div
-                        className='input-group color-picker'
-                        id={element.id}
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
                     >
-                        <input
-                            className='form-control'
-                            type='text'
-                            defaultValue={theme[element.id]}
-                            onChange={this.onInputChange}
-                        />
-                        <span className='input-group-addon'><i></i></span>
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group dropdown'
+                            id={element.id}
+                        >
+                            <select
+                                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] + ',';
         });
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 425645c1f..550c180c0 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/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'>
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index b8d346ba7..3cc76bd95 100644
--- a/web/react/utils/constants.jsx
+++ b/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'
     },
-- 
cgit v1.2.3-1-g7c22


From 4897997025d07998e77cee4dd1c4252fff763db4 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Wed, 4 Nov 2015 13:49:39 -0800
Subject: Removed old code theme selector and fixed some issues

---
 .../user_settings/code_theme_chooser.jsx           | 55 ----------------------
 .../user_settings/custom_theme_chooser.jsx         | 15 +++---
 .../user_settings/user_settings_appearance.jsx     | 19 --------
 web/react/utils/constants.jsx                      | 20 ++++----
 web/react/utils/utils.jsx                          | 10 ++--
 5 files changed, 20 insertions(+), 99 deletions(-)
 delete mode 100644 web/react/components/user_settings/code_theme_chooser.jsx

diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx
deleted file mode 100644
index eef4b24ba..000000000
--- a/web/react/components/user_settings/code_theme_chooser.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-var Constants = require('../../utils/constants.jsx');
-
-export default class CodeThemeChooser extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    render() {
-        const theme = this.props.theme;
-
-        const premadeThemes = [];
-        for (const k in Constants.CODE_THEMES) {
-            if (Constants.CODE_THEMES.hasOwnProperty(k)) {
-                let activeClass = '';
-                if (k === theme.codeTheme) {
-                    activeClass = 'active';
-                }
-
-                premadeThemes.push(
-                    <div
-                        className='col-xs-6 col-sm-3 premade-themes'
-                        key={'premade-theme-key' + k}
-                    >
-                        <div
-                            className={activeClass}
-                            onClick={() => this.props.updateTheme(k)}
-                        >
-                            <label>
-                                <img
-                                    className='img-responsive'
-                                    src={'/static/images/themes/code_themes/' + k + '.png'}
-                                />
-                                <div className='theme-label'>{Constants.CODE_THEMES[k]}</div>
-                            </label>
-                        </div>
-                    </div>
-                );
-            }
-        }
-
-        return (
-            <div className='row'>
-                {premadeThemes}
-            </div>
-        );
-    }
-}
-
-CodeThemeChooser.propTypes = {
-    theme: React.PropTypes.object.isRequired,
-    updateTheme: React.PropTypes.func.isRequired
-};
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 07e3fb24c..986b0b2fd 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -87,13 +87,9 @@ export default class CustomThemeChooser extends React.Component {
                             >
                                 {codeThemeOptions}
                             </select>
-                            <span className='input-group-addon'>
-                                <i>
-                                    <img
-                                        src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
-                                    />
-                                </i>
-                            </span>
+                            <img
+                                src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                            />
                         </div>
                     </div>
                 );
@@ -118,9 +114,9 @@ export default class CustomThemeChooser extends React.Component {
                         </div>
                     </div>
                 );
-            }
 
-            colors += theme[element.id] + ',';
+                colors += theme[element.id] + ',';
+            }
         });
 
         colors += theme.codeTheme;
@@ -131,6 +127,7 @@ export default class CustomThemeChooser extends React.Component {
                     {'Copy and paste to share theme colors:'}
                 </label>
                 <input
+                    readOnly='true'
                     type='text'
                     className='form-control'
                     value={colors}
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index 550c180c0..d73b5f476 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -7,7 +7,6 @@ var Utils = require('../../utils/utils.jsx');
 
 const CustomThemeChooser = require('./custom_theme_chooser.jsx');
 const PremadeThemeChooser = require('./premade_theme_chooser.jsx');
-const CodeThemeChooser = require('./code_theme_chooser.jsx');
 const AppDispatcher = require('../../dispatcher/app_dispatcher.jsx');
 const Constants = require('../../utils/constants.jsx');
 const ActionTypes = Constants.ActionTypes;
@@ -19,7 +18,6 @@ export default class UserSettingsAppearance extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.submitTheme = this.submitTheme.bind(this);
         this.updateTheme = this.updateTheme.bind(this);
-        this.updateCodeTheme = this.updateCodeTheme.bind(this);
         this.deactivate = this.deactivate.bind(this);
         this.resetFields = this.resetFields.bind(this);
         this.handleImportModal = this.handleImportModal.bind(this);
@@ -100,10 +98,6 @@ export default class UserSettingsAppearance extends React.Component {
         );
     }
     updateTheme(theme) {
-        if (!theme.codeTheme) {
-            theme.codeTheme = this.state.theme.codeTheme;
-        }
-
         let themeChanged = this.state.theme.length === theme.length;
         if (!themeChanged) {
             for (const field in theme) {
@@ -121,11 +115,6 @@ export default class UserSettingsAppearance extends React.Component {
         this.setState({theme});
         Utils.applyTheme(theme);
     }
-    updateCodeTheme(codeTheme) {
-        var theme = this.state.theme;
-        theme.codeTheme = codeTheme;
-        this.updateTheme(theme);
-    }
     updateType(type) {
         this.setState({type});
     }
@@ -203,7 +192,6 @@ export default class UserSettingsAppearance extends React.Component {
                     </div>
                     {custom}
                     <hr />
-
                     {serverError}
                     <a
                         className='btn btn-sm btn-primary'
@@ -223,13 +211,6 @@ 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'>
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 3cc76bd95..7d885681a 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -159,7 +159,8 @@ module.exports = {
             buttonBg: '#2389d7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         organization: {
             type: 'Organization',
@@ -181,7 +182,8 @@ module.exports = {
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         mattermostDark: {
             type: 'Mattermost Dark',
@@ -203,7 +205,8 @@ module.exports = {
             buttonBg: '#4CBBA4',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#984063',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'solarized_dark'
         },
         windows10: {
             type: 'Windows Dark',
@@ -225,7 +228,8 @@ module.exports = {
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#784098',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'monokai'
         }
     },
     THEME_ELEMENTS: [
@@ -315,7 +319,7 @@ module.exports = {
                 },
                 {
                     id: 'solarized_light',
-                    uiName: 'Solarized light'
+                    uiName: 'Solarized Light'
                 },
                 {
                     id: 'github',
@@ -328,12 +332,6 @@ module.exports = {
             ]
         }
     ],
-    CODE_THEMES: {
-        github: 'GitHub',
-        solarized_light: 'Solarized Light',
-        monokai: 'Monokai',
-        solarized_dark: 'Solarized Dark'
-    },
     DEFAULT_CODE_THEME: 'github',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index e8d34dccd..770ab01c5 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -438,11 +438,6 @@ export function toTitleCase(str) {
 }
 
 export function applyTheme(theme) {
-    if (!theme.codeTheme) {
-        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
-    }
-    updateCodeTheme(theme.codeTheme);
-
     if (theme.sidebarBg) {
         changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1);
     }
@@ -598,6 +593,11 @@ export function applyTheme(theme) {
     if (theme.mentionHighlightLink) {
         changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
     }
+
+    if (!theme.codeTheme) {
+        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
+    }
+    updateCodeTheme(theme.codeTheme);
 }
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions
-- 
cgit v1.2.3-1-g7c22


From 9bf832f9f32a1171b2250ed99caa3a3553e877e2 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 5 Nov 2015 10:43:20 +0500
Subject: Updating code themes

---
 .../user_settings/custom_theme_chooser.jsx           |  10 ++++++----
 web/sass-files/sass/partials/_settings.scss          |   9 +++++++++
 web/static/images/themes/code_themes/github.png      | Bin 9648 -> 18321 bytes
 web/static/images/themes/code_themes/monokai.png     | Bin 9303 -> 18119 bytes
 .../images/themes/code_themes/solarized_dark.png     | Bin 8172 -> 17856 bytes
 .../images/themes/code_themes/solarized_light.png    | Bin 8860 -> 17934 bytes
 6 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 986b0b2fd..895d0c500 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/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>
                 );
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 3be83ed2f..b304450bc 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/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 {
diff --git a/web/static/images/themes/code_themes/github.png b/web/static/images/themes/code_themes/github.png
index d0538d6c0..a49b877b1 100644
Binary files a/web/static/images/themes/code_themes/github.png and b/web/static/images/themes/code_themes/github.png differ
diff --git a/web/static/images/themes/code_themes/monokai.png b/web/static/images/themes/code_themes/monokai.png
index 8f92d2a18..a71225b68 100644
Binary files a/web/static/images/themes/code_themes/monokai.png and b/web/static/images/themes/code_themes/monokai.png differ
diff --git a/web/static/images/themes/code_themes/solarized_dark.png b/web/static/images/themes/code_themes/solarized_dark.png
index 76055c678..07774ff20 100644
Binary files a/web/static/images/themes/code_themes/solarized_dark.png and b/web/static/images/themes/code_themes/solarized_dark.png differ
diff --git a/web/static/images/themes/code_themes/solarized_light.png b/web/static/images/themes/code_themes/solarized_light.png
index b9595c22d..fc71dbb87 100644
Binary files a/web/static/images/themes/code_themes/solarized_light.png and b/web/static/images/themes/code_themes/solarized_light.png differ
-- 
cgit v1.2.3-1-g7c22


From a809ff88625e0fbaab8d14e2d35e85abd8fe6111 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 5 Nov 2015 11:06:47 +0500
Subject: Updating UI for access history and access log modals

---
 web/react/components/activity_log_modal.jsx       | 2 +-
 web/sass-files/sass/partials/_access-history.scss | 4 ----
 web/sass-files/sass/partials/_activity-log.scss   | 4 ++--
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 6a24870f6..ef3077470 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -167,8 +167,8 @@ export default class ActivityLogModal extends React.Component {
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{'Active Sessions'}</Modal.Title>
                 </Modal.Header>
-                <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
                 <Modal.Body ref='modalBody'>
+                    <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
                     {content}
                 </Modal.Body>
             </Modal>
diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss
index a3289ecc0..c8a0b28bd 100644
--- a/web/sass-files/sass/partials/_access-history.scss
+++ b/web/sass-files/sass/partials/_access-history.scss
@@ -19,10 +19,6 @@
         border-bottom: 1px solid #ddd;
         padding-bottom: 15px;
     }
-    .report__time {
-        font-weight: 600;
-        font-size: 15px;
-    }
     .report__info {
         @include opacity(0.8);
     }
diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss
index 2fb37a3bb..f61c35a28 100644
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/partials/_activity-log.scss
@@ -36,7 +36,7 @@
         text-align: right;
     }
     .report__platform {
-        font-size: 16px;
+        font-size: 15px;
         font-weight: 600;
         .fa {
             margin-right: 6px;
@@ -47,5 +47,5 @@
     }
 }
 .session-help-text {
-    padding: 20px 20px 5px 20px;
+    padding: 0 0 20px;
 }
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22