PLT-3157 - Adding display width customisation to intro message (#3521)

* PLT-3157 - Adding display width customisation to intro message

* Fixing error

3 files changed, 35 insertions, 21 deletions

diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 17e29da2e..690cd96c7 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -18,11 +18,15 @@ import DelayedAction from 'utils/delayed_action.jsx';
 import Constants from 'utils/constants.jsx';
 const ScrollTypes = Constants.ScrollTypes;
 
+import PreferenceStore from 'stores/preference_store.jsx';
+
 import {FormattedDate, FormattedMessage} from 'react-intl';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+const Preferences = Constants.Preferences;
+
 export default class PostList extends React.Component {
     constructor(props) {
         super(props);
@@ -44,16 +48,17 @@ export default class PostList extends React.Component {
 
         this.scrollStopAction = new DelayedAction(this.handleScrollStop);
 
-        if (props.channel) {
-            this.introText = createChannelIntroMessage(props.channel);
-        } else {
-            this.introText = this.getArchivesIntroMessage();
-        }
-
         this.state = {
             isScrolling: false,
+            fullWidthIntro: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
             topPostId: null
         };
+
+        if (props.channel) {
+            this.introText = createChannelIntroMessage(props.channel, this.state.fullWidthIntro);
+        } else {
+            this.introText = this.getArchivesIntroMessage();
+        }
     }
 
     isAtBottom() {
@@ -395,7 +400,7 @@ export default class PostList extends React.Component {
 
     getArchivesIntroMessage() {
         return (
-            <div className='channel-intro'>
+            <div className={'channel-intro'}>
                 <h4 className='channel-intro__title'>
                     <FormattedMessage
                         id='post_focus_view.beginning'
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 56f7cd6e8..1e7046340 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -162,6 +162,10 @@
     margin: 0 auto 15px;
     padding: 0 15px;
 
+    &.channel-intro--centered {
+        max-width: 1020px;
+    }
+
     .intro-links {
         display: inline-block;
         margin: 0 1.5em 10px 0;
diff --git a/webapp/utils/channel_intro_messages.jsx b/webapp/utils/channel_intro_messages.jsx
index 50d12ed42..9a232dbc0 100644
--- a/webapp/utils/channel_intro_messages.jsx
+++ b/webapp/utils/channel_intro_messages.jsx
@@ -16,20 +16,25 @@ import Client from 'utils/web_client.jsx';
 import React from 'react';
 import {FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'react-intl';
 
-export function createChannelIntroMessage(channel) {
+export function createChannelIntroMessage(channel, fullWidthIntro) {
+    let centeredIntro = '';
+    if (!fullWidthIntro) {
+        centeredIntro = 'channel-intro--centered';
+    }
+
     if (channel.type === 'D') {
-        return createDMIntroMessage(channel);
+        return createDMIntroMessage(channel, centeredIntro);
     } else if (ChannelStore.isDefault(channel)) {
-        return createDefaultIntroMessage(channel);
+        return createDefaultIntroMessage(channel, centeredIntro);
     } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
-        return createOffTopicIntroMessage(channel);
+        return createOffTopicIntroMessage(channel, centeredIntro);
     } else if (channel.type === 'O' || channel.type === 'P') {
-        return createStandardIntroMessage(channel);
+        return createStandardIntroMessage(channel, centeredIntro);
     }
     return null;
 }
 
-export function createDMIntroMessage(channel) {
+export function createDMIntroMessage(channel, centeredIntro) {
     var teammate = Utils.getDirectTeammate(channel.id);
 
     if (teammate) {
@@ -39,7 +44,7 @@ export function createDMIntroMessage(channel) {
         }
 
         return (
-            <div className='channel-intro'>
+            <div className={'channel-intro ' + centeredIntro}>
                 <div className='post-profile-img__container channel-intro-img'>
                     <img
                         className='post-profile-img'
@@ -68,7 +73,7 @@ export function createDMIntroMessage(channel) {
     }
 
     return (
-        <div className='channel-intro'>
+        <div className={'channel-intro ' + centeredIntro}>
             <p className='channel-intro-text'>
                 <FormattedMessage
                     id='intro_messages.teammate'
@@ -79,9 +84,9 @@ export function createDMIntroMessage(channel) {
     );
 }
 
-export function createOffTopicIntroMessage(channel) {
+export function createOffTopicIntroMessage(channel, centeredIntro) {
     return (
-        <div className='channel-intro'>
+        <div className={'channel-intro ' + centeredIntro}>
             <FormattedHTMLMessage
                 id='intro_messages.offTopic'
                 defaultMessage='<h4 class="channel-intro__title">Beginning of {display_name}</h4><p class="channel-intro__content">This is the start of {display_name}, a channel for non-work-related conversations.<br/></p>'
@@ -95,7 +100,7 @@ export function createOffTopicIntroMessage(channel) {
     );
 }
 
-export function createDefaultIntroMessage(channel) {
+export function createDefaultIntroMessage(channel, centeredIntro) {
     let inviteModalLink = (
         <a
             className='intro-links'
@@ -122,7 +127,7 @@ export function createDefaultIntroMessage(channel) {
     }
 
     return (
-        <div className='channel-intro'>
+        <div className={'channel-intro ' + centeredIntro}>
             <FormattedHTMLMessage
                 id='intro_messages.default'
                 defaultMessage="<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>"
@@ -137,7 +142,7 @@ export function createDefaultIntroMessage(channel) {
     );
 }
 
-export function createStandardIntroMessage(channel) {
+export function createStandardIntroMessage(channel, centeredIntro) {
     var uiName = channel.display_name;
     var creatorName = '';
 
@@ -211,7 +216,7 @@ export function createStandardIntroMessage(channel) {
     }
 
     return (
-        <div className='channel-intro'>
+        <div className={'channel-intro ' + centeredIntro}>
             <h4 className='channel-intro__title'>
                 <FormattedMessage
                     id='intro_messages.beginning'