MM-1426 - Updating UI

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

@@ -3,7 +3,7 @@ html, body {
 }
 
 body {
-  font-family: 'Lato', sans-serif;
+  font-family: 'Open Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   background: #e9e9e9;
   position: relative;
@@ -30,6 +30,10 @@ body {
   }
 }
 
+b, strong {
+  font-weight: 600;
+}
+
 a {
   word-break: break-word;
 }
@@ -146,7 +150,7 @@ div.theme {
     top: 0;
     color: #FFF;
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 600;
     text-decoration: none;
     padding: 0 10px;
   }

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

@@ -8,7 +8,7 @@
 		}
 	}
 	.info__label {
-		font-weight: bold;
+		font-weight: 600;
 		text-align: right;
 		padding-right: 0;
 	}
@@ -120,7 +120,7 @@
 		}
 		.more-channel-name {
 			color: #444;
-			font-weight: bold;
+			font-weight: 600;
 			font-size: 0.95em;
 		}
 		tbody {

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

@@ -86,10 +86,11 @@ body.ios {
 			background: #FFF;
 			display: inline-block;
 			padding: 0 1em;
-			font-weight: 900;
+			font-weight: 700;
 			@include border-radius(50px);
 			position: relative;
 			z-index: 5;
+			font-size: 13px;
 		}
 	}
 	.new-separator {
@@ -212,6 +213,11 @@ body.ios {
 			}
 		}
 	}
+	&.current--user {
+		.post-body {
+			background: #f5f5f5;
+		}
+	}
 	&.same--root {
 		.comment-icon__container {
 			@include opacity(0);
@@ -269,7 +275,7 @@ body.ios {
 			float: left;
 			.post-profile-img {
 				margin-right: 10px;
-				@include border-radius(3px);
+				@include border-radius(50px);
 			}
 		}
 		&.post__content {
@@ -290,6 +296,8 @@ body.ios {
 		width: 600px;
 		float: left;
 		word-wrap: break-word;
+		padding: 0.3em 0 0.1em;
+		margin: -0.3em 0 0;
 		.post-link {
 			@include clearfix;
 			text-overflow: ellipsis;
@@ -359,7 +367,7 @@ body.ios {
 		.embed-title {
 			margin: 3px 0 1px;
 			color: #555;
-			font-weight: bold;
+			font-weight: 600;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;

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

@@ -22,11 +22,17 @@
                         width: 825px;
                     }
                     .post-body {
-                        padding-left: 0;
                         border: none;
                         margin: 0;
                     }
                 }
+                .post-body {
+                    float: none;
+                    width: 750px;
+                    padding-left: 0.5em;
+                    padding-right: 0.5em;
+                    margin: 0;
+                }
                 .post__content {
                     width: 920px;
                 }
@@ -63,10 +69,6 @@
                         }
                     }
                 }
-                .post-body {
-                    float: none;
-                    width: 750px;
-                }
             }
         }
     }
@@ -89,6 +91,7 @@
             margin-left: 60px;
             padding-left: 10px;
             border-left: 4px solid #EEE;
+            margin-bottom: 10px;
             div.post-profile-img__container {
                 .post-profile-img {
                     display: none;
@@ -98,7 +101,6 @@
                 width: 825px;
             }
             .post-body {
-                padding-left: 0;
                 border: none;
                 margin: 0;
             }
@@ -135,6 +137,9 @@
             }
         }
         .post-body {
+            margin: 0;
+            padding-left: 0.5em;
+            padding-right: 0.5em;
             float: none;
             width: 750px;
         }

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

@@ -77,7 +77,7 @@
 		border: none;
 	}
 	.search-channel__name {
-		font-weight: bold;
+		font-weight: 600;
 		margin: 0 0 10px 0;
 	}
 }

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

@@ -56,7 +56,7 @@
 
             .section-title {
                 margin-bottom: 5px;
-                font-weight: bold;
+                font-weight: 600;
             }
 
             .section-edit {
@@ -172,7 +172,7 @@
         border-top:1px solid lightgrey;
     }
     .post-profile-img {
-        @include border-radius(3px);
+        @include border-radius(50px);
         margin-right: 8px;
     }
     .member-name {

web/sass-files/sass/partials/_sidebar--left.scss

@@ -59,7 +59,7 @@
                 color: #999;
                 &.unread-title {
                     color: #333;
-                    font-weight: bold;
+                    font-weight: 600;
                 }
                 &:hover, &:focus {
                     background: #e6f2fa;
@@ -70,6 +70,7 @@
                     color: #111;
                     background-color: #e1e1e1;
                     border-radius: 0;
+                    font-weight: 600;
                 }
             }
         }

web/templates/head.html

@@ -14,7 +14,7 @@
 
     <link id="favicon" rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
-    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="/static/css/styles.css">
 
     <script src="/static/js/min/perfect-scrollbar.min.js"></script>