Merge pull request #234 from asaadmahmoodspin/master

Profile pic changes in LHS Header

5 files changed, 29 insertions, 12 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>
                     );
                 }
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 7315266e6..3a5be4e08 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -351,6 +351,7 @@ module.exports = React.createClass({
         $(".post-right__scroll").css("height", height + "px");
         $(".post-right__scroll").scrollTop(100000);
         $(".post-right__scroll").perfectScrollbar();
+        $(".post-right__scroll").perfectScrollbar('update');
     },
     render: function() {
 
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index bab2897b6..7a7e92854 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -115,7 +115,11 @@ module.exports = React.createClass({
         return (
             <div className="team__header theme">
                 <a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1">
+                    { me.last_picture_update ?
                     <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
+                    :
+                    <div />
+                    }
                     <div className="header__info">
                         <div className="user__name">{ '@' + me.username}</div>
                         <div className="team__name">{ teamDisplayName }</div>
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index adeaa70d7..eab4becac 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -44,14 +44,16 @@
 			white-space: normal;
 		}
 	}
+
 }
 
 .channel-intro {
 	padding-bottom:5px;
 	margin: 0 1em 35px;
+	max-width: 850px;
 	border-bottom: 1px solid lightgrey;
 	.intro-links {
-		margin: 0.5em 1.5em 0 0;
+		margin: 0 1.5em 10px 0;
 		display: inline-block;
 		.fa {
 			margin-right: 5px;
@@ -64,8 +66,15 @@
 	.channel-intro-img {
 		float:left;
 	}
-	.channel-intro-title {
+	.channel-intro__title {
 		font-weight:600;
+		font-size: 20px;
+		margin-bottom: 15px;
+	}
+	.channel-intro__content {
+		background: #f7f7f7;
+		padding: 10px 15px;
+		@include border-radius(3px);
 	}
 	.channel-intro-text {
 		margin-top:35px;
@@ -106,9 +115,9 @@
 			height: 36px;
 			float: left;
 			@include border-radius(36px);
+			margin-right: 6px;
 		}
 		.header__info {
-			padding-left: 42px;
 			color: #fff;
 		}
 		.team__name, .user__name {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 10e1d6c0f..d8a8fd982 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -89,6 +89,9 @@
             max-width: 810px;
         }
     }
+    .channel-intro {
+        max-width: 810px;
+    }
     .date-separator, .new-separator {
         &.hovered--comment {
             &:before, &:after {