Merge pull request #625 from asaadmahmoodspin/ui-changes

UI changes for various tickets

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'>

web/react/components/team_import_tab.jsx

@@ -34,13 +34,11 @@ 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 = (
             <SettingUpload
                 title='Import from Slack'
@@ -58,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':
@@ -99,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'>{'×'}</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'/>

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);
 			}

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;
 		}
         &.inactive {

web/sass-files/sass/partials/_responsive.scss

@@ -365,6 +365,9 @@
                     width: 100%;
                     z-index: 5;
                 }
+                .modal-title {
+                    padding-left: 20px;
+                }
                 .user-settings {
                     .tab-header {
                         display: none;
@@ -526,6 +529,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;

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 {

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;