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

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

* Fixing error

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'