Merge pull request #1415 from asaadmahmoodspin/ui-improvements

Multiple UI improvements

web/react/components/login.jsx

@@ -125,7 +125,7 @@ export default class Login extends React.Component {
         let emailSignup;
         if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
             emailSignup = (
-                <div>
+                <div className='signup__email-container'>
                     <div className={'form-group' + errorClass}>
                         <input
                             autoFocus={focusEmail}
@@ -206,7 +206,7 @@ export default class Login extends React.Component {
                             href='/'
                             className='signup-team-login'
                         >
-                            {'Sign up now'}
+                            {'Create one now'}
                         </a>
                     </span>
                 </div>
@@ -215,11 +215,11 @@ export default class Login extends React.Component {
 
         return (
             <div className='signup-team__container'>
-                {verifiedBox}
                 <h5 className='margin--less'>{'Sign in to:'}</h5>
                 <h2 className='signup-team__name'>{teamDisplayName}</h2>
                 <h2 className='signup-team__subdomain'>{'on '}{global.window.mm_config.SiteName}</h2>
                 <form onSubmit={this.handleSubmit}>
+                    {verifiedBox}
                     <div className={'form-group' + errorClass}>
                         {serverError}
                     </div>

web/react/components/settings_sidebar.jsx

@@ -1,14 +1,10 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
-var utils = require('../utils/utils.jsx');
 
 export default class SettingsSidebar extends React.Component {
     componentDidUpdate() {
         $('.settings-modal').find('.modal-body').scrollTop(0);
         $('.settings-modal').find('.modal-body').perfectScrollbar('update');
-        if (utils.isSafari()) {
-            $('.settings-modal .settings-links .nav').addClass('absolute');
-        }
     }
     constructor(props) {
         super(props);

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

@@ -18,14 +18,15 @@
 	margin-left: 220px;
 	position: relative;
 	background: #fff;
-    display: flex;
+    @include display-flex;
+    @include flex-direction(column);
     flex-direction: column;
 	.channel__wrap & {
 		padding-top: 0;
 	}
 }
 #post-create {
-    flex: 0 0 auto;
+    @include flex(0 0 auto);
 	background: #fff;
 	width: 100%;
 	z-index: 3;

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

@@ -2,6 +2,7 @@
     padding: 3px 0;
     height: 58px;
     flex: 0 0 58px;
+    @include flex(0 0 50px);
 }
 .row {
 	&.header {

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

@@ -46,7 +46,6 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height: 36px;
 	.textbox-preview-area {
 		position: absolute;
 		z-index: 2;
@@ -62,6 +61,7 @@ body.ios {
 		font-size: 13px;
 		cursor: pointer;
 	}
+	min-height:36px;
 }
 
 .date-separator, .new-separator {
@@ -197,7 +197,7 @@ body.ios {
 }
 
 #post-list {
-	flex: 1 1 auto;
+	@include flex(1 1 auto);
 	position: relative;
 	overflow-y: hidden;
 	.post-list-holder-by-time {
@@ -544,9 +544,13 @@ body.ios {
 		}
 		&.post-info {
 			.post-profile-time {
-				width: 150px;
+				color: #a8adb7;
-				display: inline-block;
+				vertical-align: top;
-				margin-left: 50px;
+				max-width: 220px;
+				overflow: hidden;
+				display: block;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
 		}
 		.post-header-col {
@@ -554,6 +558,8 @@ body.ios {
 			display: inline-block;
 			margin-right: 10px;
 			&.post-header__reply {
+				position: relative;
+				top: -1px;
 				min-width: 70px;
 				.dropdown-menu {
 					right: 0;

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

@@ -80,7 +80,7 @@
     }
 
     .inner__content {
-        padding: 0 15px;
+        padding: 0 1rem;
         margin: 30px 0 20px;
     }
 
@@ -133,17 +133,18 @@
     .or__container {
         height: 1px;
         background: #dddddd;
-        text-align: center;
+        text-align: left;
         margin: 2em 0;
         span {
-            width: 33px;
+            width: 40px;
             top: -10px;
             position: relative;
-            font-size: em(16px);
+            font-size: 1.14286em;
             line-height: 20px;
             font-weight: 600;
             background: #fff;
             display: inline-block;
+            text-align: center;
         }
     }
 
@@ -152,6 +153,10 @@
         padding-left: 18px;
     }
 
+    .signup__email-container {
+        margin-left: 1rem;
+    }
+
     .btn {
         font-size: 1em;
         padding: em(7px) em(15px);
@@ -173,7 +178,7 @@
             min-width: 200px;
             width: 200px;
             padding: 0 1em;
-            margin: 1em auto;
+            margin: 1em 1rem;
             height: 40px;
             line-height: 34px;
             color: #fff;