Multiple UI improvements

6 files changed, 98 insertions, 113 deletions

diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index f7f5bd23d..423ba9067 100644
--- a/web/react/components/login.jsx
+++ b/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>
diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx
index 68d9cea48..212bcb22f 100644
--- a/web/react/components/settings_sidebar.jsx
+++ b/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);
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index d86e225f3..6228cc45e 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/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;
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 74a7cecff..67c938b8c 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/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 {
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 33748052d..6fa671a41 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -46,22 +46,7 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height: 36px;
-	.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;
-	}
+	min-height:37px;
 }
 
 .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;
-			line-height: 25px;
-			display: block;
+			min-height: 20px;
+			line-height: 18px;
+			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;
 			}
@@ -630,80 +612,79 @@ body.ios {
 }
 
 .attachment {
-	.attachment__content {
-		border-width: 1px;
-		border-style: solid;
-		border-radius: 4px;
-		padding: 2px 5px;
-		margin: 0 0 5px 0;
-	}
-	.attachment__thumb-pretext {
-		border: 0 none;
-		background: transparent;
-	}
-	.attachment__container {
-		border-left-width: 4px;
-		border-left-style: solid;
-		padding: 2px 0 2px 10px;
-		&.attachment__container--good {
-			border-left-color: #00C100;
-		}
-		&.attachment__container--warning {
-			border-left-color: #DEDE01;
-		}
-		&.attachment__container--danger {
-			border-left-color: #E40303;
-		}
-	}
-	.attachment__body {
-		float: left;
-		width: 80%;
-		padding-right: 5px;
-		overflow-x: auto;
-		&.attachment__body--no_thumb {
-			width: 100%;
-		}
-	}
-	.attachment__text p:last-of-type {
-		display: inline-block;
-	}
-	.attachment__thumb-pretext {
-		margin-left: 5px;
-	}
-	.attachment__title {
-		margin: 5px 0;
-		padding: 0;
-		line-height: 16px;
-		font-size: 16px;
-		a {
-			font-size: 16px;
-		}
-	}
-	.attachment__author-icon {
-		@include border-radius(50px);
-		margin-right: 5px;
-		width: 14px;
-		height: 14px;
-	}
-	.attachment__image {
-		max-width: 100%;
-		margin-bottom: 1em;
-	}
-	.attachment__thumb-container {
-		width: 20%;
-		float: right;
-		img {
-			max-height: 75px;
-			max-width: 100%;
-		}
-	}
-	.attachment___fields {
-		width: 100%;
-		.attachment___field-caption {
-			font-weight: 700;
-		}
-		.attachment___field p {
-			margin: 0;
-		}
-	}
-}
+    .attachment__content {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        padding: 2px 5px;
+        margin: 0 0 5px 0;
+    }
+    .attachment__thumb-pretext {
+        border: 0 none;
+        background: transparent;
+    }
+    .attachment__container {
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding: 2px 0 2px 10px;
+        &.attachment__container--good {
+            border-left-color: #00C100;
+        }
+        &.attachment__container--warning {
+            border-left-color: #DEDE01;
+        }
+        &.attachment__container--danger {
+            border-left-color: #E40303;
+        }
+    }
+    .attachment__body {
+        float: left;
+        width: 80%;
+        padding-right: 5px;
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+    .attachment__thumb-pretext {
+        margin-left: 5px;
+    }
+    .attachment__title {
+        margin: 5px 0;
+        padding: 0;
+        line-height: 16px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+        }
+    }
+    .attachment__author-icon {
+        @include border-radius(50px);
+        margin-right: 5px;
+        width: 14px;
+        height: 14px;
+    }
+    .attachment__image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    .attachment__thumb-container {
+        width: 20%;
+        float: right;
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+    .attachment___fields {
+        width: 100%;
+        .attachment___field-caption {
+            font-weight: 700;
+        }
+        .attachment___field p {
+            margin: 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
index b9486e254..6216dd9ae 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/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;