From fe0aeac6fe2aaa6a9c33bd47a293d626c9d640e9 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Tue, 9 Feb 2016 20:35:40 +0500
Subject: Multiple UI Improvements

---
 web/react/components/admin_console/user_item.jsx            | 4 ++--
 web/react/components/member_list_item.jsx                   | 4 ++--
 web/react/components/member_list_team_item.jsx              | 4 ++--
 web/react/components/more_channels.jsx                      | 2 +-
 web/react/components/posts_view.jsx                         | 6 ++++--
 web/react/components/user_settings/manage_command_hooks.jsx | 6 +++---
 web/react/utils/constants.jsx                               | 1 +
 web/react/utils/utils.jsx                                   | 1 +
 8 files changed, 16 insertions(+), 12 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index 02b01b090..0c1a55cc1 100644
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -360,8 +360,8 @@ export default class UserItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
-                    <span className='member-email'>{email}</span>
+                    <span className='more-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='more-description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'
diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index c50ee5c96..41ea58eeb 100644
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -124,8 +124,8 @@ export default class MemberListItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <div className='member-name'>{Utils.displayUsername(member.id)}</div>
-                    <div className='member-description'>{member.email}</div>
+                    <div className='more-name'>{Utils.displayUsername(member.id)}</div>
+                    <div className='more-description'>{member.email}</div>
                 </td>
                 <td className='td--action lg'>{invite}</td>
             </tr>
diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx
index 6e1006911..30086d1b2 100644
--- a/web/react/components/member_list_team_item.jsx
+++ b/web/react/components/member_list_team_item.jsx
@@ -208,8 +208,8 @@ export default class MemberListTeamItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <span className='member-name'>{Utils.displayUsername(user.id)}</span>
-                    <span className='member-email'>{email}</span>
+                    <span className='more-name'>{Utils.displayUsername(user.id)}</span>
+                    <span className='more-description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index d12ea4703..d800f93d8 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -114,7 +114,7 @@ export default class MoreChannels extends React.Component {
                                     <tr key={channel.id}>
                                         <td>
                                             <p className='more-name'>{channel.display_name}</p>
-                                            <p className='more-purpose'>{channel.purpose}</p>
+                                            <p className='more-description'>{channel.purpose}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx
index f108ace2e..ebe19abad 100644
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -94,7 +94,7 @@ export default class PostsView extends React.Component {
             });
         }
 
-        this.scrollStopAction.fireAfter(1000);
+        this.scrollStopAction.fireAfter(2000);
     }
     handleScrollStop() {
         this.setState({
@@ -564,6 +564,8 @@ function ScrollToBottomArrows({isScrolling, atBottom, onClick}) {
         <div
             className={className}
             onClick={onClick}
-        />
+        >
+            <span dangerouslySetInnerHTML={{__html: Constants.SCROLL_BOTTOM_ICON}} />
+        </div>
     );
 }
diff --git a/web/react/components/user_settings/manage_command_hooks.jsx b/web/react/components/user_settings/manage_command_hooks.jsx
index d23d2957e..3656424b2 100644
--- a/web/react/components/user_settings/manage_command_hooks.jsx
+++ b/web/react/components/user_settings/manage_command_hooks.jsx
@@ -271,7 +271,7 @@ export default class ManageCommandCmds extends React.Component {
             cmds.push(
                 <div
                     key={cmd.id}
-                    className='webcmd__item'
+                    className='webhook__item webcmd__item'
                 >
                     <div className='padding-top x2'>
                         <strong>
@@ -400,7 +400,7 @@ export default class ManageCommandCmds extends React.Component {
         }
 
         const existingCmds = (
-            <div className='webcmds__container'>
+            <div className='webhooks__container webcmds__container'>
                 <label className='control-label padding-top x2'>
                     <FormattedMessage
                         id='user.settings.cmds.existing'
@@ -408,7 +408,7 @@ export default class ManageCommandCmds extends React.Component {
                     />
                 </label>
                 <div className='padding-top divider-light'></div>
-                <div className='webcmds__list'>
+                <div className='webhooks__list webcmds__list'>
                     {displayCmds}
                 </div>
             </div>
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 9689591a6..b1e84202d 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -173,6 +173,7 @@ export default {
     MENU_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>",
     COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>",
     REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>",
+    SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>",
     UPDATE_TYPING_MS: 5000,
     THEMES: {
         default: {
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 896a94ac5..c2487f290 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -680,6 +680,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelColor) {
+        changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
-- 
cgit v1.2.3-1-g7c22