Multiple Ui improvements (#4767)

* PLT-4911 - Adding new target for OAuth help links

* PLT-4953 - Fixing styles for the unread messages indicator

* PLT-4901 - Fixing header modal overlap on mobile

* PLT-4916 - Swapping position of edit and delete

4 files changed, 41 insertions, 42 deletions

diff --git a/webapp/components/admin_console/oauth_settings.jsx b/webapp/components/admin_console/oauth_settings.jsx
index 716889401..9a86abfa0 100644
--- a/webapp/components/admin_console/oauth_settings.jsx
+++ b/webapp/components/admin_console/oauth_settings.jsx
@@ -385,7 +385,7 @@ export default class OAuthSettings extends AdminSettings {
             helpText = (
                 <FormattedHTMLMessage
                     id='admin.google.EnableHtmlDesc'
-                    defaultMessage='<ol><li><a href="https://accounts.google.com/login">Log in</a> to your Google account.</li><li>Go to <a href="https://console.developers.google.com">https://console.developers.google.com</a>, click <strong>Credentials</strong> in the left hand sidebar and enter "Mattermost - your-company-name" as the <strong>Project Name</strong>, then click <strong>Create</strong>.</li><li>Click the <strong>OAuth consent screen</strong> header and enter "Mattermost" as the <strong>Product name shown to users</strong>, then click <strong>Save</strong>.</li><li>Under the <strong>Credentials</strong> header, click <strong>Create credentials</strong>, choose <strong>OAuth client ID</strong> and select <strong>Web Application</strong>.</li><li>Under <strong>Restrictions</strong> and <strong>Authorized redirect URIs</strong> enter <strong>your-mattermost-url/signup/google/complete</strong> (example: http://localhost:8065/signup/google/complete). Click <strong>Create</strong>.</li><li>Paste the <strong>Client ID</strong> and <strong>Client Secret</strong> to the fields below, then click <strong>Save</strong>.</li><li>Finally, go to <a href="https://console.developers.google.com/apis/api/plus/overview">Google+ API</a> and click <strong>Enable</strong>. This might take a few minutes to propagate through Google`s systems.</li></ol>'
+                    defaultMessage='<ol><li><a target="_blank" href="https://accounts.google.com/login">Log in</a> to your Google account.</li><li>Go to <a target="_blank" href="https://console.developers.google.com">https://console.developers.google.com</a>, click <strong>Credentials</strong> in the left hand sidebar and enter "Mattermost - your-company-name" as the <strong>Project Name</strong>, then click <strong>Create</strong>.</li><li>Click the <strong>OAuth consent screen</strong> header and enter "Mattermost" as the <strong>Product name shown to users</strong>, then click <strong>Save</strong>.</li><li>Under the <strong>Credentials</strong> header, click <strong>Create credentials</strong>, choose <strong>OAuth client ID</strong> and select <strong>Web Application</strong>.</li><li>Under <strong>Restrictions</strong> and <strong>Authorized redirect URIs</strong> enter <strong>your-mattermost-url/signup/google/complete</strong> (example: http://localhost:8065/signup/google/complete). Click <strong>Create</strong>.</li><li>Paste the <strong>Client ID</strong> and <strong>Client Secret</strong> to the fields below, then click <strong>Save</strong>.</li><li>Finally, go to <a target="_blank" href="https://console.developers.google.com/apis/api/plus/overview">Google+ API</a> and click <strong>Enable</strong>. This might take a few minutes to propagate through Google`s systems.</li></ol>'
                 />
             );
         } else if (this.state.oauthType === Constants.OFFICE365_SERVICE) {
@@ -393,7 +393,7 @@ export default class OAuthSettings extends AdminSettings {
             helpText = (
                 <FormattedHTMLMessage
                     id='admin.office365.EnableHtmlDesc'
-                    defaultMessage='<ol><li><a href="https://login.microsoftonline.com/">Log in</a> to your Microsoft or Office 365 account. Make sure it`s the account on the same <a href="https://msdn.microsoft.com/en-us/library/azure/jj573650.aspx#Anchor_0">tenant</a> that you would like users to log in with.</li><li>Go to <a href="https://apps.dev.microsoft.com">https://apps.dev.microsoft.com</a>, click <strong>Go to app list</strong> > <strong>Add an app</strong> and use "Mattermost - your-company-name" as the <strong>Application Name</strong>.</li><li>Under <strong>Application Secrets</strong>, click <strong>Generate New Password</strong> and paste it to the <strong>Application Secret Password</strong> field below.</li><li>Under <strong>Platforms</strong>, click <strong>Add Platform</strong>, choose <strong>Web</strong> and enter <strong>your-mattermost-url/signup/office365/complete</strong> (example: http://localhost:8065/signup/office365/complete) under <strong>Redirect URIs</strong>. Also uncheck <strong>Allow Implicit Flow</strong>.</li><li>Finally, click <strong>Save</strong> and then paste the <strong>Application ID</strong> below.</li></ol>'
+                    defaultMessage='<ol><li><a target="_blank" href="https://login.microsoftonline.com/">Log in</a> to your Microsoft or Office 365 account. Make sure it`s the account on the same <a target="_blank" href="https://msdn.microsoft.com/en-us/library/azure/jj573650.aspx#Anchor_0">tenant</a> that you would like users to log in with.</li><li>Go to <a target="_blank" href="https://apps.dev.microsoft.com">https://apps.dev.microsoft.com</a>, click <strong>Go to app list</strong> > <strong>Add an app</strong> and use "Mattermost - your-company-name" as the <strong>Application Name</strong>.</li><li>Under <strong>Application Secrets</strong>, click <strong>Generate New Password</strong> and paste it to the <strong>Application Secret Password</strong> field below.</li><li>Under <strong>Platforms</strong>, click <strong>Add Platform</strong>, choose <strong>Web</strong> and enter <strong>your-mattermost-url/signup/office365/complete</strong> (example: http://localhost:8065/signup/office365/complete) under <strong>Redirect URIs</strong>. Also uncheck <strong>Allow Implicit Flow</strong>.</li><li>Finally, click <strong>Save</strong> and then paste the <strong>Application ID</strong> below.</li></ol>'
                 />
             );
         }
diff --git a/webapp/components/post_view/components/new_message_indicator.jsx b/webapp/components/post_view/components/new_message_indicator.jsx
index 35a299462..f9bd17bd7 100644
--- a/webapp/components/post_view/components/new_message_indicator.jsx
+++ b/webapp/components/post_view/components/new_message_indicator.jsx
@@ -21,7 +21,7 @@ export default class NewMessageIndicator extends React.Component {
         }
     }
     render() {
-        let className = 'nav-pills__unread-indicator-bottom';
+        let className = 'new-messages__button';
         if (this.state.visible > 0) {
             className += ' visible';
         }
@@ -31,20 +31,19 @@ export default class NewMessageIndicator extends React.Component {
         return (
             <div
                 className={className}
-                onClick={this.props.onClick}
                 onTransitionEnd={this.setRendered.bind(this)}
                 ref='indicator'
             >
-                <span>
+                <div onClick={this.props.onClick}>
                     <i
-                        className='fa fa-arrow-circle-o-down'
+                        className='fa fa-angle-down'
                     />
                     <FormattedMessage
                         id='posts_view.newMsgBelow'
                         defaultMessage='{count} new {count, plural, one {message} other {messages}} below'
                         values={{count: this.props.newMessages}}
                     />
-                </span>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 8b5d56c01..c699fb353 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -166,49 +166,49 @@ export default class RhsComment extends React.Component {
             </li>
         );
 
-        if (isOwner) {
+        if (isOwner || isAdmin) {
             dropdownContents.push(
                 <li
                     role='presentation'
-                    key='edit-button'
+                    key='delete-button'
                 >
                     <a
                         href='#'
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#edit_post'
-                        data-refocusid='#reply_textbox'
-                        data-title={Utils.localizeMessage('rhs_comment.comment', 'Comment')}
-                        data-message={post.message}
-                        data-postid={post.id}
-                        data-channelid={post.channel_id}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            GlobalActions.showDeletePostModal(post, 0);
+                        }}
                     >
                         <FormattedMessage
-                            id='rhs_comment.edit'
-                            defaultMessage='Edit'
+                            id='rhs_comment.del'
+                            defaultMessage='Delete'
                         />
                     </a>
                 </li>
             );
         }
 
-        if (isOwner || isAdmin) {
+        if (isOwner) {
             dropdownContents.push(
                 <li
                     role='presentation'
-                    key='delete-button'
+                    key='edit-button'
                 >
                     <a
                         href='#'
                         role='menuitem'
-                        onClick={(e) => {
-                            e.preventDefault();
-                            GlobalActions.showDeletePostModal(post, 0);
-                        }}
+                        data-toggle='modal'
+                        data-target='#edit_post'
+                        data-refocusid='#reply_textbox'
+                        data-title={Utils.localizeMessage('rhs_comment.comment', 'Comment')}
+                        data-message={post.message}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
                     >
                         <FormattedMessage
-                            id='rhs_comment.del'
-                            defaultMessage='Delete'
+                            id='rhs_comment.edit'
+                            defaultMessage='Edit'
                         />
                     </a>
                 </li>
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index d871ad2a9..4a15127a0 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -185,46 +185,46 @@ export default class RhsRootPost extends React.Component {
             </li>
         );
 
-        if (isOwner && !isSystemMessage) {
+        if (isOwner || isAdmin) {
             dropdownContents.push(
                 <li
-                    key='rhs-root-edit'
+                    key='rhs-root-delete'
                     role='presentation'
                 >
                     <a
                         href='#'
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#edit_post'
-                        data-refocusid='#reply_textbox'
-                        data-title={type}
-                        data-message={post.message}
-                        data-postid={post.id}
-                        data-channelid={post.channel_id}
+                        onClick={() => GlobalActions.showDeletePostModal(post, this.props.commentCount)}
                     >
                         <FormattedMessage
-                            id='rhs_root.edit'
-                            defaultMessage='Edit'
+                            id='rhs_root.del'
+                            defaultMessage='Delete'
                         />
                     </a>
                 </li>
             );
         }
 
-        if (isOwner || isAdmin) {
+        if (isOwner && !isSystemMessage) {
             dropdownContents.push(
                 <li
-                    key='rhs-root-delete'
+                    key='rhs-root-edit'
                     role='presentation'
                 >
                     <a
                         href='#'
                         role='menuitem'
-                        onClick={() => GlobalActions.showDeletePostModal(post, this.props.commentCount)}
+                        data-toggle='modal'
+                        data-target='#edit_post'
+                        data-refocusid='#reply_textbox'
+                        data-title={type}
+                        data-message={post.message}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
                     >
                         <FormattedMessage
-                            id='rhs_root.del'
-                            defaultMessage='Delete'
+                            id='rhs_root.edit'
+                            defaultMessage='Edit'
                         />
                     </a>
                 </li>