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

@@ -6,9 +6,6 @@ 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,22 +46,7 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height: 36px;
+	min-height:37px;
-	.textbox-preview-area {
-		position: absolute;
-		z-index: 2;
-		top: 0;
-		left: 0;
-		box-shadow: none;
-	}
-	.textbox-preview-link {
-		position: absolute;
-		z-index: 3;
-		bottom: -23px;
-		right: 0;
-		font-size: 13px;
-		cursor: pointer;
-	}
 }
 
 .date-separator, .new-separator {
@@ -197,7 +182,7 @@ body.ios {
 }
 
 #post-list {
-	flex: 1 1 auto;
+	@include flex(1 1 auto);
 	position: relative;
 	overflow-y: hidden;
 	.post-list-holder-by-time {
@@ -339,9 +324,9 @@ body.ios {
 			}
 		}
 		.msg-typing {
-			min-height: 25px;
+			min-height: 20px;
-			line-height: 25px;
+			line-height: 18px;
-			display: block;
+			display: inline-block;
 			font-size: 13px;
 			@include opacity(0.7);
 		}
@@ -511,9 +496,6 @@ body.ios {
 				border-bottom-left-radius: 4px;
 				@include opacity(.3);
 			}
-			&.tex .katex-display {
-				text-align: left;
-			}
 			code {
 				white-space: pre;
 			}
@@ -659,7 +641,6 @@ body.ios {
         float: left;
         width: 80%;
         padding-right: 5px;
-		overflow-x: auto;
         &.attachment__body--no_thumb {
             width: 100%;
         }

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;