From 62940fb72f8ba89b97bbbd2bdc484fd42f5e09ce Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Tue, 8 Sep 2015 21:12:36 +0500
Subject: [PATCH 1/5] UI changes for various tickets

---
 web/react/components/setting_upload.jsx          |  6 +++---
 web/react/components/team_import_tab.jsx         |  6 +-----
 web/sass-files/sass/partials/_modal.scss         |  4 ++--
 web/sass-files/sass/partials/_post.scss          |  2 +-
 web/sass-files/sass/partials/_responsive.scss    |  9 +++++++++
 web/sass-files/sass/partials/_settings.scss      | 16 +++++++++-------
 web/sass-files/sass/partials/_sidebar--left.scss |  4 ++++
 7 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx
index 5979091c4c..fad27b3550 100644
--- a/web/react/components/setting_upload.jsx
+++ b/web/react/components/setting_upload.jsx
@@ -64,9 +64,9 @@ export default class SettingsUpload extends React.Component {
         }
         return (
             <ul className='section-max'>
-                <li className='col-xs-12 section-title'>{this.props.title}</li>
-                <li className='col-xs-offset-3'>{this.props.helpText}</li>
-                <li className='col-xs-offset-3 col-xs-8'>
+                <li className='col-sm-12 section-title'>{this.props.title}</li>
+                <li className='col-sm-offset-3 col-sm-9'>{this.props.helpText}</li>
+                <li className='col-sm-offset-3 col-sm-9'>
                     <ul className='setting-list'>
                         <li className='setting-list-item'>
                             <span className='btn btn-sm btn-primary btn-file sel-btn'>
diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index 1ab348465a..ce0e812999 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -34,11 +34,7 @@ export default class TeamImportTab extends React.Component {
     render() {
         var uploadHelpText = (
             <div>
-                <br/>
-                Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels.
-                <br/><br/>
-                The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import.
-                <br/><br/>
+                <p>Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels. </p> <p>The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import. </p>
             </div>
         );
         var uploadSection = (
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index dec08b567b..29e05f6bf7 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -63,7 +63,6 @@
 			margin: 0;
 		}
 		button.close {
-			margin: -2px -2px 0 0;
 			color: #fff;
 			@include opacity(1);
 			z-index: 5;
@@ -71,7 +70,8 @@
 			height: 30px;
 			line-height: 30px;
 			@include single-transition(all, 0.25s, ease-in);
-			position: relative;
+			position: absolute;
+			right: 10px;
 			&:hover {
 				background: rgba(0, 0, 0, 0.1);
 			}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 231e6fe3f2..9a6e6e4c7f 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -140,7 +140,7 @@ body.ios {
 		padding: 1em 0 0;
 		position: relative;
 		-webkit-overflow-scrolling: touch;
-		&.hide-scroll::-webkit-scrollbar {
+		&::-webkit-scrollbar {
 			width: 0px !important;
 		}
 	}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index c56625b883..a850d5a7fb 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -365,6 +365,9 @@
                     width: 100%;
                     z-index: 5;
                 }
+                .modal-title {
+                    padding-left: 15px;
+                }
                 .user-settings {
                     .tab-header {
                         display: none;
@@ -513,6 +516,12 @@
             height: 45px;
             position: relative;
             @include single-transition(all, 0.2s, linear);
+            .glyphicon-refresh-animate {
+                right: 33px;
+                top: 15px;
+                color: #fff;
+                color: rgba(255,255,255,0.5);
+            }
             .form-control {
                 border: none;
                 padding: 0 10px 0 31px;
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 8d743dfe23..25c093957e 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -14,13 +14,15 @@
     width:800px;
     max-width: 100%;
     .modal-back {
-        width: 8px;
-        height: 13px;
-        background: url("../images/arrow-left.png");
-        @include background-size(100% 100%);
-        margin-right: 10px;
-        display: inline-block;
+        width: 40px;
+        height: 56px;
+        background: url("../images/arrow-left.png") no-repeat;
+        @include background-size(8px 13px);
+        background-position: center;
+        top: 0;
+        left: 0;
         cursor: pointer;
+        position: absolute;
     }
     .modal-body {
         padding: 0;
@@ -59,7 +61,7 @@
 
             .section-max {
                 background: #f2f2f2;
-                padding: 1em 0;
+                padding: 1em 0 1.3em;
                 margin-bottom: 0;
                 @include clearfix;
                 .section-title {
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 432b8eb462..933be96ff6 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -10,6 +10,10 @@
     &.sidebar--padded {
         padding-top: 44px;
     }
+    .dropdown-menu {
+        max-height: 300px;
+        overflow: auto;
+    }
     .search__form {
         margin: 0;
         padding: 1em 1em 0;

From 8c9c6de97041f8b2d646a7b4f03852c74e8e8fab Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Tue, 8 Sep 2015 21:22:52 +0500
Subject: [PATCH 2/5] Improving formatting in team_import_tab.jsx

---
 web/react/components/team_import_tab.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index ce0e812999..07dc3dc6db 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -34,9 +34,11 @@ export default class TeamImportTab extends React.Component {
     render() {
         var uploadHelpText = (
             <div>
-                <p>Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team's public channels. </p> <p>The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import. </p>
+                <p>{'Slack does not allow you to export files, images, private groups or direct messages stored in Slack. Therefore, Slack import to Mattermost only supports importing of text messages in your Slack team\'\s public channels.'}</p>
+                <p>{'The Slack import to Mattermost is in "Preview". Slack bot posts and channels with underscores do not yet import.'}</p>
             </div>
         );
+
         var uploadSection = (
             <SettingUpload
                 title='Import from Slack'
@@ -54,7 +56,7 @@ export default class TeamImportTab extends React.Component {
             break;
         case 'in-progress':
             messageSection = (
-                <p className='confirm-import alert alert-warning'><i className='fa fa-spinner fa-pulse'></i> Importing...</p>
+                <p className='confirm-import alert alert-warning'><i className='fa fa-spinner fa-pulse'></i>{' Importing...'}</p>
             );
             break;
         case 'done':
@@ -95,18 +97,18 @@ export default class TeamImportTab extends React.Component {
                         data-dismiss='modal'
                         aria-label='Close'
                     >
-                        <span aria-hidden='true'>&times;</span>
+                        <span aria-hidden='true'>{'&times;'}</span>
                     </button>
                     <h4
                         className='modal-title'
                         ref='title'
-                    ><i className='modal-back'></i>Import</h4>
+                    ><i className='modal-back'></i>{'Import'}</h4>
                 </div>
                 <div
                     ref='wrapper'
                     className='user-settings'
                 >
-                    <h3 className='tab-header'>Import</h3>
+                    <h3 className='tab-header'>{'Import'}</h3>
                     <div className='divider-dark first'/>
                     {uploadSection}
                     <div className='divider-dark'/>

From 2a876f33006497f35dff18272088d373bdd07805 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Wed, 9 Sep 2015 11:02:46 +0500
Subject: [PATCH 3/5] Removing jsx container from &times; in
 team_import_tab.jsx

---
 web/react/components/team_import_tab.jsx      | 2 +-
 web/sass-files/sass/partials/_responsive.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index 07dc3dc6db..63ba7278ec 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -97,7 +97,7 @@ export default class TeamImportTab extends React.Component {
                         data-dismiss='modal'
                         aria-label='Close'
                     >
-                        <span aria-hidden='true'>{'&times;'}</span>
+                        <span aria-hidden='true'>&times;</span>
                     </button>
                     <h4
                         className='modal-title'
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index a850d5a7fb..5f516704d2 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -366,7 +366,7 @@
                     z-index: 5;
                 }
                 .modal-title {
-                    padding-left: 15px;
+                    padding-left: 20px;
                 }
                 .user-settings {
                     .tab-header {

From 9d3f67dddb96d851f5cf448d7ba85e24c7949451 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Wed, 9 Sep 2015 18:59:25 +0500
Subject: [PATCH 4/5] Adding symbol instead of &times; for close icon

---
 web/react/components/team_import_tab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index 63ba7278ec..031abc36a0 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -97,7 +97,7 @@ export default class TeamImportTab extends React.Component {
                         data-dismiss='modal'
                         aria-label='Close'
                     >
-                        <span aria-hidden='true'>&times;</span>
+                        <span aria-hidden='true'>{'×'}</span>
                     </button>
                     <h4
                         className='modal-title'

From d30426ce17a6aa611c8712d3315d5249cbbeee92 Mon Sep 17 00:00:00 2001
From: JoramWilander <jwawilander@gmail.com>
Date: Wed, 9 Sep 2015 11:28:53 -0400
Subject: [PATCH 5/5] Fix race condition where switching between two channels
 that both had new messages sometimes caused improper scrolling.

---
 web/react/components/post_list.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index d7c0d48629..9d95887d97 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -152,6 +152,10 @@ export default class PostList extends React.Component {
         postHolder.off('scroll');
     }
     componentDidUpdate(prevProps, prevState) {
+        if (!this.props.isActive) {
+            return;
+        }
+
         $('.post-list__content div .post').removeClass('post--last');
         $('.post-list__content div:last-child .post').addClass('post--last');
 
@@ -219,8 +223,8 @@ export default class PostList extends React.Component {
     scrollToBottom(force) {
         this.isUserScroll = false;
         var postHolder = $(React.findDOMNode(this.refs.postlist));
-        if ($('#new_message')[0] && !this.userHasSeenNew && !force) {
-            $('#new_message')[0].scrollIntoView();
+        if ($('#new_message_' + this.props.channelId)[0] && !this.userHasSeenNew && !force) {
+            $('#new_message_' + this.props.channelId)[0].scrollIntoView();
         } else {
             postHolder.addClass('hide-scroll');
             postHolder[0].scrollTop = postHolder[0].scrollHeight;
@@ -539,7 +543,7 @@ export default class PostList extends React.Component {
                 // Temporary fix to solve ie10/11 rendering issue
                 let newSeparatorId = '';
                 if (!utils.isBrowserIE()) {
-                    newSeparatorId = 'new_message';
+                    newSeparatorId = 'new_message_' + this.props.channelId;
                 }
                 postCtls.push(
                     <div