Merge pull request #1637 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

9 files changed, 55 insertions, 19 deletions

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 926c289e6..61ad186e0 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -145,6 +145,7 @@ select {
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
   cursor: auto;
   background: rgba(#fff, 0.1);
+  color: inherit;
 }
 
 .form-group {
@@ -210,6 +211,7 @@ select {
 
 .alert {
   padding: 8px 12px;
+  @include border-radius(2px);
 }
 
 .emoji {
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 166995632..da75bc61b 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -36,9 +36,13 @@
 #archive-link-home {
 	@include flex(0 0 auto);
 	cursor: pointer;
-	padding: 10px;
+	padding: 10px 20px;
 	font-size: 13px;
 
+	.fa {
+		@include opacity(0.7);
+	}
+
 	a {
 		color: inherit;
 	}
diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss
index 8910ff115..d4365d1e6 100644
--- a/web/sass-files/sass/partials/_get-link.scss
+++ b/web/sass-files/sass/partials/_get-link.scss
@@ -4,5 +4,5 @@
 	display: inline-block;
 	float: left;
 	padding: 4px 10px;
-	margin: 3px 0 0 10px;
+	margin: 1px 0 0 10px;
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index f8c7a65af..bd0392a52 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -293,6 +293,7 @@
 }
 
 .channel-header__links {
+	font-family: 'Open Sans', sans-serif;
 	height: 30px;
 	width: 24px;
 	line-height: 26px;
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 08d1d8a75..55725abe0 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -35,6 +35,9 @@
 		text-align: right;
 		padding-right: 0;
 	}
+	.team-member-list {
+		width: 100%;
+	}
 	.remove__member {
 		float: right;
 		color: #999;
@@ -95,6 +98,7 @@
 				background: rgba(0, 0, 0, 0.1);
 			}
 			span {
+			    font-family: 'Open Sans', sans-serif;
 				line-height: 10px;
 			}
 		}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 3b7184550..2ddde0c50 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -369,9 +369,9 @@ body.ios {
 		}
 	}
 
-    &.post--highlight {
-        background-color: beige;
-    }
+	&.post--highlight {
+		background-color: beige;
+	}
 
 	&.post--system .post__header .col__name {
 		display: none;
@@ -551,7 +551,23 @@ body.ios {
 			position: absolute;
 			right: 0;
 			top: 30px;
-			width: 60px;
+			width: 65px;
+		}
+
+		.permalink-popover {
+			min-width: 0;
+
+			.popover-content {
+				padding: 5px;
+			}
+
+			.form-control, .btn {
+				font-size: 13px;
+				height: 30px;
+				padding: 0 8px;
+				line-height: 30px;
+			}
+
 		}
 
 	}
@@ -569,6 +585,8 @@ body.ios {
 	.dropdown {
 		display: inline-block;
 		visibility: hidden;
+		position: absolute;
+		right: 0;
 		top: -1px;
 
 		.dropdown-menu {
@@ -602,11 +620,11 @@ body.ios {
 		word-wrap: break-word;
 		padding: 0.2em 0.5em 0em;
 		@include legacy-pie-clearfix;
-		width: calc(100% - 70px);
+		width: calc(100% - 75px);
 
 		img {
-            max-height: 400px;
-        }
+			max-height: 400px;
+		}
 
 		ul {
 			padding: 5px 0 0 20px;
@@ -679,11 +697,11 @@ body.ios {
 		color: #999;
 	}
 
-    .permalink-icon {
+	.permalink-icon {
 		display: inline-block;
 		color: $primary-color;
 		visibility: hidden;
-    }
+	}
 
 	.comment-icon__container {
 		fill: $primary-color;
@@ -828,10 +846,10 @@ body.ios {
 }
 
 .permalink-text {
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .permalink-popover {
-    min-width: 320px;
-    margin-left: 50px !important;
+	min-width: 320px;
+	margin-left: 50px !important;
 }
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index ba2fe2ffe..bdf04ff82 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -107,7 +107,8 @@
 
             &:after {
                 font-size: 20px;
-                content: '...'
+                content: '...';
+                top: -3px;
             }
 
         }
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 8c6214224..ee0c40067 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -40,7 +40,7 @@
         font-weight: 600;
     }
 
-	.no-padding--left {
+    .no-padding--left {
         padding-left: 0;
     }
     .padding-top {
@@ -313,17 +313,23 @@
     .member-name {
         font-weight:500;
         display: block;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .member-email {
         color:darkgrey;
         display: block;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .member-role, .member-drop {
         position:absolute;
-        right:15px;
-        top:13px;
+        right: 15px;
+        top: 8px;
     }
 }
 
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 7b3b8fdf9..d5bf0e503 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -110,6 +110,7 @@
                         }
                     }
                     .btn-close {
+                        font-family: 'Open Sans', sans-serif;
                         position: absolute;
                         right: 15px;
                         top: -1px;
@@ -142,7 +143,6 @@
                     }
                 }
                 a, a:hover, a:focus {
-                    padding-right: 10px;
                     background-color: rgba(black, 0.1);
                     border-radius: 0;
                     font-weight: 400;