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

3 files changed, 35 insertions, 21 deletions

diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx
index cc5d2ee6d..7d4d0ebc2 100644
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -243,7 +243,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
             return (
                 <FormattedMessage
                     id='user.settings.advance.embed_preview'
-                    defaultMessage='Show preview snippet of links below message'
+                    defaultMessage='Show experimental previews of link content, when available'
                 />
             );
         default:
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index 1b6ce3343..78a499b51 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -189,7 +189,7 @@ export default class UserSettingsDisplay extends React.Component {
                         <br/>
                         <FormattedMessage
                             id='user.settings.display.collapseDesc'
-                            defaultMessage='Toggle whether to automatically collapse all image previews.'
+                            defaultMessage='Expand links to show a preview of content, when available.'
                         />
                     </div>
                 </div>
@@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component {
                     title={
                         <FormattedMessage
                             id='user.settings.display.collapseDisplay'
-                            defaultMessage='Auto Collapse Previews'
+                            defaultMessage='Link previews'
                         />
                     }
                     inputs={inputs}
@@ -518,6 +518,13 @@ export default class UserSettingsDisplay extends React.Component {
                                 id='user.settings.display.messageDisplayClean'
                                 defaultMessage='Standard'
                             />
+                            {': '}
+                            <span className='font-weight--normal'>
+                                <FormattedMessage
+                                    id='user.settings.display.messageDisplayCleanDes'
+                                    defaultMessage='Easy to scan and read.'
+                                />
+                            </span>
                         </label>
                         <br/>
                     </div>
@@ -533,6 +540,13 @@ export default class UserSettingsDisplay extends React.Component {
                                 id='user.settings.display.messageDisplayCompact'
                                 defaultMessage='Compact'
                             />
+                            {': '}
+                            <span className='font-weight--normal'>
+                                <FormattedMessage
+                                    id='user.settings.display.messageDisplayCompactDes'
+                                    defaultMessage='Fit as many messages on the screen as we can.'
+                                />
+                            </span>
                         </label>
                         <br/>
                     </div>
@@ -599,7 +613,7 @@ export default class UserSettingsDisplay extends React.Component {
 
         if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) {
             const channelDisplayMode = [false, false];
-            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) {
+            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
                 channelDisplayMode[0] = true;
             } else {
                 channelDisplayMode[1] = true;
@@ -613,11 +627,11 @@ export default class UserSettingsDisplay extends React.Component {
                                 type='radio'
                                 name='channelDisplayMode'
                                 checked={channelDisplayMode[0]}
-                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)}
                             />
                             <FormattedMessage
-                                id='user.settings.display.fixedWidthCentered'
-                                defaultMessage='Fixed width, centered'
+                                id='user.settings.display.fullScreen'
+                                defaultMessage='Full width'
                             />
                         </label>
                         <br/>
@@ -628,11 +642,11 @@ export default class UserSettingsDisplay extends React.Component {
                                 type='radio'
                                 name='channelDisplayMode'
                                 checked={channelDisplayMode[1]}
-                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)}
                             />
                             <FormattedMessage
-                                id='user.settings.display.fullScreen'
-                                defaultMessage='Full width'
+                                id='user.settings.display.fixedWidthCentered'
+                                defaultMessage='Fixed width, centered'
                             />
                         </label>
                         <br/>
@@ -666,18 +680,18 @@ export default class UserSettingsDisplay extends React.Component {
             );
         } else {
             let describe;
-            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) {
+            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
                 describe = (
                     <FormattedMessage
-                        id='user.settings.display.fixedWidthCentered'
-                        defaultMessage='Fixed width, centered'
+                        id='user.settings.display.fullScreen'
+                        defaultMessage='Full width'
                     />
                 );
             } else {
                 describe = (
                     <FormattedMessage
-                        id='user.settings.display.fullScreen'
-                        defaultMessage='Full width'
+                        id='user.settings.display.fixedWidthCentered'
+                        defaultMessage='Fixed width, centered'
                     />
                 );
             }
diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx
index 4ceb85bb8..de4745aac 100644
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -211,15 +211,15 @@ class UserSettingsModal extends React.Component {
         }
         var tabs = [];
 
-        tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'});
-        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'});
-        tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'});
+        tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'});
+        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'});
+        tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'});
         if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
-            tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'});
+            tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'});
         }
 
-        tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'});
-        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'});
+        tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'});
+        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'});
 
         return (
             <Modal