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

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>'
                 />
             );
         }

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>
         );
     }

webapp/components/rhs_comment.jsx

@@ -166,6 +166,29 @@ export default class RhsComment extends React.Component {
             </li>
         );
 
+        if (isOwner || isAdmin) {
+            dropdownContents.push(
+                <li
+                    role='presentation'
+                    key='delete-button'
+                >
+                    <a
+                        href='#'
+                        role='menuitem'
+                        onClick={(e) => {
+                            e.preventDefault();
+                            GlobalActions.showDeletePostModal(post, 0);
+                        }}
+                    >
+                        <FormattedMessage
+                            id='rhs_comment.del'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
         if (isOwner) {
             dropdownContents.push(
                 <li
@@ -192,29 +215,6 @@ export default class RhsComment extends React.Component {
             );
         }
 
-        if (isOwner || isAdmin) {
-            dropdownContents.push(
-                <li
-                    role='presentation'
-                    key='delete-button'
-                >
-                    <a
-                        href='#'
-                        role='menuitem'
-                        onClick={(e) => {
-                            e.preventDefault();
-                            GlobalActions.showDeletePostModal(post, 0);
-                        }}
-                    >
-                        <FormattedMessage
-                            id='rhs_comment.del'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
         if (dropdownContents.length === 0) {
             return '';
         }

webapp/components/rhs_root_post.jsx

@@ -185,6 +185,26 @@ export default class RhsRootPost extends React.Component {
             </li>
         );
 
+        if (isOwner || isAdmin) {
+            dropdownContents.push(
+                <li
+                    key='rhs-root-delete'
+                    role='presentation'
+                >
+                    <a
+                        href='#'
+                        role='menuitem'
+                        onClick={() => GlobalActions.showDeletePostModal(post, this.props.commentCount)}
+                    >
+                        <FormattedMessage
+                            id='rhs_root.del'
+                            defaultMessage='Delete'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
         if (isOwner && !isSystemMessage) {
             dropdownContents.push(
                 <li
@@ -211,26 +231,6 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
-        if (isOwner || isAdmin) {
-            dropdownContents.push(
-                <li
-                    key='rhs-root-delete'
-                    role='presentation'
-                >
-                    <a
-                        href='#'
-                        role='menuitem'
-                        onClick={() => GlobalActions.showDeletePostModal(post, this.props.commentCount)}
-                    >
-                        <FormattedMessage
-                            id='rhs_root.del'
-                            defaultMessage='Delete'
-                        />
-                    </a>
-                </li>
-            );
-        }
-
         var rootOptions = '';
         if (dropdownContents.length > 0) {
             rootOptions = (