MM-1461 - Updating Mattermost UI

5 files changed, 90 insertions, 41 deletions

diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 971ed0935..637f908ca 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -2,6 +2,7 @@
 	padding: 20px 15px;
 }
 .modal {
+	width: 100%;
 	&.image_modal {
 		.modal-backdrop.in {
 			@include opacity(0.7);
@@ -148,7 +149,7 @@
 		.image-wrapper {
 			background: #FFF;
 			position: relative;
-			max-width: 80%;
+			max-width: 90%;
 			min-width: 280px;
 			@include border-radius(3px);
 			display: table;
@@ -261,6 +262,9 @@
 				color:white;
 				margin-left:5px;
 			}
+			.public-link {
+				margin-right: 5px;
+			}
 		}
 	}
 }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 769cb1091..e35979b64 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -166,7 +166,7 @@ body.ios {
 			color: #999;
 			@include single-transition(all, 0.15s);
 			font-size: 16px;
-			padding: 9px;
+			padding: 7px 9px 6px;
 			&:hover, &:active {
 				color: #444;
 				box-shadow: none;
@@ -192,7 +192,7 @@ body.ios {
 
 .post {
 	word-wrap: break-word;
-	padding: 0.4em 1em;
+	padding: 8px 1em;
 	position: relative;
 	max-width: 100%;
 	@include legacy-pie-clearfix;
@@ -204,19 +204,37 @@ body.ios {
 		}
 		background: #f6f6f6;
 	}
+	&.current--user {
+		.post-body {
+			@include border-radius(4px);
+			background: #f5f5f5;
+		}
+		&:hover {
+			.post-body {
+				background: #fff;
+			}
+		}
+	}
 	&.post--comment {
 		&.other--root {
 			.post-comment {
 				border-left: 4px solid #EEE;
-				margin-left: 30px;
-				padding: 2px 0 2px 10px;
+				padding: 4px 0 6px 10px;
+				background: #F5F5F5;
+				margin: 0 0 0 30px;
+				@include border-radius(0 4px 4px 0);
+			}
+			.post-body {
+				background: transparent;
+				margin: 0;
+				padding: 1px 0px;
+			}
+			&:hover {
+				background: #f5f5f5;
+				.post-comment {
+					background: #fff;
+				}
 			}
-		}
-	}
-	&.current--user {
-		.post-body {
-			@include border-radius(0 4px 4px 0);
-			background: #f5f5f5;
 		}
 	}
 	&.same--root {
@@ -224,6 +242,7 @@ body.ios {
 			@include opacity(0);
 		}
 		div.post-profile-img__container {
+			height: 1px;
 			.post-profile-img {
 				visibility: hidden;
 			}
@@ -260,6 +279,7 @@ body.ios {
 		white-space: pre-wrap;
 	}
 	.comment-icon__container {
+		margin-left: 7px;
 		fill: $primary-color;
 		.comment-icon {
 			display: inline-block;
@@ -346,7 +366,6 @@ body.ios {
 				}
 				.dropdown {
 					min-width: 18px;
-					margin-right: 7px;
 					display: inline-block;
 					@include opacity(0);
 				}
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 972aef29b..0d3e75689 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -11,7 +11,8 @@
 
 	.post {
 		&.post--root {
-			padding: 1em;
+			padding: 1em 1em 0;
+			margin: 1em 0;
 			hr {
 				border-color: #DDD;
 				margin: 1em 0 0 0;
@@ -20,6 +21,7 @@
 	}
 
 	.post-create__container {
+		margin-top: 1em;
 		.custom-textarea {
 			min-height: 100px;
 		}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 0037879cf..e2c89a6f2 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -2,13 +2,6 @@
     .inner__wrap {
         &.move--left {
             .post {
-                &.post--comment {
-                    &.other--root {
-                        .post-comment {
-                            margin-left: -7px;
-                        }
-                    }
-                }
                 &.same--root {
                     margin-left: 60px;
                     padding-left: 10px;
@@ -24,13 +17,24 @@
                     .post-body {
                         width: 736px;
                         border: none;
-                        margin: 0;
+                        margin: 3px 0 0;
+                    }
+                }
+                &.post--comment {
+                    &.other--root {
+                        .post-comment {
+                            margin-left: 0;
+                        }
+                    }
+                    &.same--root {
+                        margin-top: 10px;
+                        margin-bottom: 10px;
                     }
                 }
                 .post-body {
                     float: none;
                     width: 750px;
-                    margin: 0;
+                    margin: 3px 0 0;
                 }
                 .post__content {
                     width: 920px;
@@ -79,18 +83,10 @@
         }
     }
     .post {
-        &.post--comment {
-            &.other--root {
-                .post-comment {
-                    margin-left: -7px;
-                }
-            }
-        }
         &.same--root {
             margin-left: 60px;
             padding-left: 10px;
             border-left: 4px solid #EEE;
-            margin-bottom: 10px;
             div.post-profile-img__container {
                 .post-profile-img {
                     display: none;
@@ -102,7 +98,18 @@
             .post-body {
                 width: 736px;
                 border: none;
-                margin: 0;
+                margin: 3px 0 0;
+            }
+        }
+        &.post--comment {
+            &.other--root {
+                .post-comment {
+                    margin-left: 0;
+                }
+            }
+            &.same--root {
+                margin-top: 5px;
+                margin-bottom: 5px;
             }
         }
         .post__content {
@@ -137,7 +144,7 @@
             }
         }
         .post-body {
-            margin: 0;
+            margin: 3px 0 0;
             float: none;
             width: 750px;
         }
@@ -166,16 +173,9 @@
 
 @media screen and (max-width: 960px) {
     .post {
-        &:hover {
-            .post-header .post-header-col.post-header__reply {
-                .comment-icon__container__hide {
-                    @include opacity(0);
-                }
-            }
-        }
         .post-header .post-header-col.post-header__reply {
             .comment-icon__container__hide {
-                @include opacity(0);
+                display: none;
             }
             .dropdown {
                 @include opacity(1);
@@ -208,7 +208,7 @@
 
 @media screen and (max-width: 768px) {
     #post-list {
-        .date-seperator {
+        .date-seperator, .new-separator {
             &.hovered--after {
                 background: none;
             }
@@ -224,6 +224,26 @@
         &:hover {
             background: none;
         }
+        &.current--user {
+            &:hover {
+                .post-body {
+                    background: #f5f5f5;
+                }
+            }
+        }
+        &.post--comment {
+            &.other--root {
+                &:hover {
+                    background: none;
+                    .post-body {
+                        background: none;
+                        .post-comment {
+                            background: #f5f5f5;
+                        }
+                    }
+                }
+            }
+        }
     }
     .signup-team__container {
         padding: 30px 0;
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
index d6000a515..7a91caec9 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -23,8 +23,12 @@
                 }
             }
         }
+        .post-body {
+            margin: 3px 0 0;
+        }
     }
     .post-create__container {
+        margin-top: 10px;
         .post-create-footer {
             padding-top: 10px;
         }