PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449)

Improving help text margins

Updating changes for get link and create post files

Fixing icon for select team screen

Fixing styles for select team button

Adding improvements to posts UI

Adding improvement to post layout

Updating changes for post controls

Updating z-index for sidebar--right

Updating help text position

Fixing code for posts

Fixing css for post view

Pushing improvements for posts view

Updating changes for post view

Updating post layout

Fixing system time css

Updating header for system posts

Updating post css

Removing opacity and changing color for system messages

Simplifying root post and system post behaviour

Removing images from compact view

Updating help text for display

Updating embed preview text for advanced option

PLT-3490 - Fixing RHS issue on Edge

7 files changed, 20 insertions, 15 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 69a464f9c..8f88afab4 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -157,7 +157,7 @@ export default class AdminSidebar extends React.Component {
         return (
             <AdminSidebarCategory
                 parentLink='/admin_console'
-                icon='fa-gear'
+                icon='fa-user'
                 title={
                     <FormattedMessage
                         id='admin.sidebar.teams'
@@ -275,7 +275,7 @@ export default class AdminSidebar extends React.Component {
                     <ul className='nav nav-pills nav-stacked'>
                         <AdminSidebarCategory
                             parentLink='/admin_console'
-                            icon='fa-gear'
+                            icon='fa-bar-chart'
                             title={
                                 <FormattedMessage
                                     id='admin.sidebar.reports'
@@ -608,7 +608,7 @@ export default class AdminSidebar extends React.Component {
                         {this.renderTeams()}
                         <AdminSidebarCategory
                             parentLink='/admin_console'
-                            icon='fa-gear'
+                            icon='fa-wrench'
                             title={
                                 <FormattedMessage
                                     id='admin.sidebar.other'
diff --git a/webapp/components/admin_console/brand_image_setting.jsx b/webapp/components/admin_console/brand_image_setting.jsx
index 74d0814a6..252328f25 100644
--- a/webapp/components/admin_console/brand_image_setting.jsx
+++ b/webapp/components/admin_console/brand_image_setting.jsx
@@ -105,9 +105,14 @@ export default class BrandImageSetting extends React.Component {
     }
 
     render() {
-        let btnClass = 'btn';
+        let btnPrimaryClass = 'btn';
         if (this.state.brandImage) {
-            btnClass += ' btn-primary';
+            btnPrimaryClass += ' btn-primary';
+        }
+
+        let letbtnDefaultClass = 'btn';
+        if (!this.props.disabled) {
+            letbtnDefaultClass += ' btn-default';
         }
 
         let img = null;
@@ -152,7 +157,7 @@ export default class BrandImageSetting extends React.Component {
                 <div className='col-sm-8'>
                     <div className='file__upload'>
                         <button
-                            className='btn btn-default'
+                            className={letbtnDefaultClass}
                             disabled={this.props.disabled}
                         >
                             <FormattedMessage
@@ -169,12 +174,12 @@ export default class BrandImageSetting extends React.Component {
                         />
                     </div>
                     <button
-                        className={btnClass}
+                        className={btnPrimaryClass}
                         disabled={this.props.disabled || !this.state.brandImage}
                         onClick={this.handleImageSubmit}
                         id='upload-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
-                        data-complete-text={'<span class=\'glyphicon glyphicon-ok\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
+                        data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
+                        data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
                     >
                         <FormattedMessage
                             id='admin.team.upload'
diff --git a/webapp/components/admin_console/email_connection_test.jsx b/webapp/components/admin_console/email_connection_test.jsx
index 87612e4d5..c90c80b99 100644
--- a/webapp/components/admin_console/email_connection_test.jsx
+++ b/webapp/components/admin_console/email_connection_test.jsx
@@ -85,7 +85,7 @@ export default class EmailConnectionTestButton extends React.Component {
         if (this.state.testing) {
             contents = (
                 <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                     {Utils.localizeMessage('admin.email.testing', 'Testing...')}
                 </span>
             );
diff --git a/webapp/components/admin_console/license_settings.jsx b/webapp/components/admin_console/license_settings.jsx
index 14934a3e5..94cd83c07 100644
--- a/webapp/components/admin_console/license_settings.jsx
+++ b/webapp/components/admin_console/license_settings.jsx
@@ -131,7 +131,7 @@ class LicenseSettings extends React.Component {
                         className='btn btn-danger'
                         onClick={this.handleRemove}
                         id='remove-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.removing)}
+                        data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.removing)}
                     >
                         <FormattedMessage
                             id='admin.license.keyRemove'
@@ -195,7 +195,7 @@ class LicenseSettings extends React.Component {
                         disabled={!this.state.fileSelected}
                         onClick={this.handleSubmit}
                         id='upload-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
+                        data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
                     >
                         <FormattedMessage
                             id='admin.license.upload'
diff --git a/webapp/components/admin_console/recycle_db.jsx b/webapp/components/admin_console/recycle_db.jsx
index cdabf3b2d..0a88e6a89 100644
--- a/webapp/components/admin_console/recycle_db.jsx
+++ b/webapp/components/admin_console/recycle_db.jsx
@@ -75,7 +75,7 @@ export default class RecycleDbButton extends React.Component {
         if (this.state.loading) {
             contents = (
                 <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                     {Utils.localizeMessage('admin.recycle.loading', ' Recycling...')}
                 </span>
             );
diff --git a/webapp/components/admin_console/reload_config.jsx b/webapp/components/admin_console/reload_config.jsx
index d6d3fb56a..a04a98690 100644
--- a/webapp/components/admin_console/reload_config.jsx
+++ b/webapp/components/admin_console/reload_config.jsx
@@ -78,7 +78,7 @@ export default class ReloadConfigButton extends React.Component {
         if (this.state.loading) {
             contents = (
                 <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                     {Utils.localizeMessage('admin.reload.loading', ' Loading...')}
                 </span>
             );
diff --git a/webapp/components/admin_console/save_button.jsx b/webapp/components/admin_console/save_button.jsx
index 18bb6e96d..fd7045605 100644
--- a/webapp/components/admin_console/save_button.jsx
+++ b/webapp/components/admin_console/save_button.jsx
@@ -26,7 +26,7 @@ export default class SaveButton extends React.Component {
         if (saving) {
             contents = (
                 <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='icon fa fa-refresh icon--rotate'/>
                     <FormattedMessage
                         id='admin.saving'
                         defaultMessage='Saving Config...'