From 62ee998714bbb2bcd5759ff71ed4818c62b43806 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Fri, 4 Dec 2015 13:21:40 +0500
Subject: Multiple UI Improvements

---
 web/react/components/access_history_modal.jsx      |  2 +-
 web/react/components/activity_log_modal.jsx        |  2 +-
 web/react/components/center_panel.jsx              |  3 ++-
 web/react/components/invite_member_modal.jsx       |  2 +-
 web/react/components/more_direct_channels.jsx      |  2 +-
 web/react/components/search_results_item.jsx       |  2 +-
 web/react/components/team_members_modal.jsx        |  2 +-
 .../user_settings/user_settings_display.jsx        | 22 +++++++++-------------
 .../user_settings/user_settings_modal.jsx          |  2 +-
 web/react/utils/utils.jsx                          |  6 +++++-
 10 files changed, 23 insertions(+), 22 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index 165d32339..deef92a54 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -32,7 +32,7 @@ export default class AccessHistoryModal extends React.Component {
     onShow() {
         AsyncClient.getAudits();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 869d648d2..200f4d724 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -51,7 +51,7 @@ export default class ActivityLogModal extends React.Component {
     onShow() {
         AsyncClient.getSessions();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 848e8952e..a1043431d 100644
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -71,7 +71,8 @@ export default class CenterPanel extends React.Component {
                         href=''
                         onClick={handleClick}
                     >
-                        {'You are viewing the Archives. Click here to jump to recent messages.'}
+                        {'You are viewing the Archives. Click here to jump to recent messages. '}
+                        {<i className='fa fa-arrow-down'></i>}
                     </a>
                 </div>
             );
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index 76f52faa9..25a915e22 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component {
 
     componentDidUpdate(prevProps, prevState) {
         if (!prevState.show && this.state.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
             }
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 9116dc8f1..cf40af6ae 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -166,7 +166,7 @@ export default class MoreDirectChannels extends React.Component {
 
     componentDidUpdate(prevProps) {
         if (!prevProps.show && this.props.show) {
-            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 50);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
             }
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 6e17cfe32..1d4983026 100644
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -65,7 +65,7 @@ export default class SearchResultsItem extends React.Component {
                                     className='search-item__jump'
                                     onClick={this.handleClick}
                                 >
-                                    {'[Jump]'}
+                                    {<i className='fa fa-mail-reply'></i>}
                                 </a>
                             </li>
                         </ul>
diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx
index 0a30a2202..eed4a1f19 100644
--- a/web/react/components/team_members_modal.jsx
+++ b/web/react/components/team_members_modal.jsx
@@ -26,7 +26,7 @@ export default class TeamMembersModal extends React.Component {
     }
 
     onShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index c464258de..fd1e28033 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -240,18 +240,14 @@ export default class UserSettingsDisplay extends React.Component {
 
             const inputs = [
                 <div key='userDisplayNameOptions'>
-                    <div
-                        className='dropdown'
+                    <select
+                        className='form-control'
+                        type='text'
+                        value={this.state.selectedFont}
+                        onChange={(e) => this.handleFont(e.target.value)}
                     >
-                        <select
-                            className='form-control'
-                            type='text'
-                            value={this.state.selectedFont}
-                            onChange={(e) => this.handleFont(e.target.value)}
-                        >
-                            {options}
-                        </select>
-                    </div>
+                        {options}
+                    </select>
                     <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div>
                 </div>
             ];
@@ -309,12 +305,12 @@ export default class UserSettingsDisplay extends React.Component {
                 <div className='user-settings'>
                     <h3 className='tab-header'>{'Display Settings'}</h3>
                     <div className='divider-dark first'/>
-                    {fontSection}
-                    <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
+                    {fontSection}
+                    <div className='divider-dark'/>
                 </div>
             </div>
         );
diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx
index f9d03f56d..97c601b5e 100644
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -47,7 +47,7 @@ export default class UserSettingsModal extends React.Component {
     }
 
     handleShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 0a52f5b37..ac0640f6e 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -681,7 +681,11 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention-highlight, .search-highlight, #archive-link-home', 'background:' + theme.mentionHighlightBg, 1);
+    }
+
+    if (theme.mentionHighlightBg) {
+        changeCss('.post.post--highlight, #archive-link-home', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1);
     }
 
     if (theme.mentionHighlightLink) {
-- 
cgit v1.2.3-1-g7c22


From 38a0c5dd761fed5d82b26614447d238628bee6e1 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Fri, 4 Dec 2015 19:23:13 +0500
Subject: Updating UI for suggestions list

---
 .../user_settings/user_settings_display.jsx        | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index fd1e28033..c464258de 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -240,14 +240,18 @@ export default class UserSettingsDisplay extends React.Component {
 
             const inputs = [
                 <div key='userDisplayNameOptions'>
-                    <select
-                        className='form-control'
-                        type='text'
-                        value={this.state.selectedFont}
-                        onChange={(e) => this.handleFont(e.target.value)}
+                    <div
+                        className='dropdown'
                     >
-                        {options}
-                    </select>
+                        <select
+                            className='form-control'
+                            type='text'
+                            value={this.state.selectedFont}
+                            onChange={(e) => this.handleFont(e.target.value)}
+                        >
+                            {options}
+                        </select>
+                    </div>
                     <div><br/>{'Select the font displayed in the Mattermost user interface.'}</div>
                 </div>
             ];
@@ -305,12 +309,12 @@ export default class UserSettingsDisplay extends React.Component {
                 <div className='user-settings'>
                     <h3 className='tab-header'>{'Display Settings'}</h3>
                     <div className='divider-dark first'/>
+                    {fontSection}
+                    <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
                     {nameFormatSection}
                     <div className='divider-dark'/>
-                    {fontSection}
-                    <div className='divider-dark'/>
                 </div>
             </div>
         );
-- 
cgit v1.2.3-1-g7c22