Improving formatting for Channel Intro

1 files changed, 9 insertions, 9 deletions

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index a2b2ae03f..7c5d36593 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -348,8 +348,8 @@ module.exports = React.createClass({
                 if (ChannelStore.isDefault(channel)) {
                     more_messages = (
                         <div className="channel-intro">
-                            <h4 className="channel-intro-title">Welcome</h4>
-                            <p>
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
                                 Welcome to {ui_name}!
                                 <br/><br/>
                                 {"This is the first channel " + strings.Team + "mates see when they"}
@@ -366,27 +366,27 @@ module.exports = React.createClass({
                 } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
                     more_messages = (
                         <div className="channel-intro">
-                            <h4 className="channel-intro-title">Welcome</h4>
-                            <p>
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
                                 {"This is the start of " + ui_name + ", a channel for conversations you’d prefer out of more focused channels."}
                                 <br/>
-                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
                             </p>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
                         </div>
                     );
                 } else {
                     var ui_type = channel.type === 'P' ? "private group" : "channel";
                     more_messages = (
                         <div className="channel-intro">
-                            <h4 className="channel-intro-title">Welcome</h4>
-                            <p>
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
                                 { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
                                 : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
                                 { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
                                 <br/>
-                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
-                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
                             </p>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
                         </div>
                     );
                 }