Improving mentions list and other UI improvements

5 files changed, 51 insertions, 28 deletions

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index cf28e44e8..fd6225bdd 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -154,9 +154,4 @@ div.theme {
     text-decoration: none;
     padding: 0 10px;
   }
-}
-
-.invite {
-  width: 90%;
-}
-
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
index d6e2ab368..da46866c8 100644
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -11,12 +11,13 @@
 	position: absolute;
 	z-index: 1060;
 	.mentions-box {
+		max-height: 303px;
 		position:absolute;
 		background-color:#fff;
 		border: $border-gray;
-        overflow-x: hidden;
-        overflow-y: scroll;
-        bottom:0;
+		overflow-x: hidden;
+		overflow-y: scroll;
+		bottom:0;
 	}
 }
 
@@ -24,13 +25,15 @@
 	position:relative;
 	width:100%;
 	background-color:#fff;
-	height:37px;
+	height:36px;
 	padding:2px;
 	z-index:101;
-    cursor: pointer;
-    &:hover {
-        background-color:#e8eaed;
-    }
+	line-height: 36px;
+	font-size: 13px;
+	cursor: pointer;
+	&:hover {
+		background-color: #E6F2FA;
+	}
 }
 
 .mentions-text {
@@ -38,15 +41,20 @@
 }
 
 .mention-img {
-	margin-right:10px;
-	height:32px;
-	width:32px;
-	border-radius: 10%;
+	margin-right: 6px;
+	height: 32px;
+	width: 32px;
+	line-height: 36px;
+	display: block;
+	font-size: 20px;
+	text-align: center;
+	color: #555;
+	@include border-radius(3px);
 }
 
 .mention-fullname {
-    color: grey;
-    padding-left: 10px;
+	color: grey;
+	padding-left: 10px;
 }
 
 .mention-highlight {
@@ -55,9 +63,4 @@
 
 .mention-link {
 	color:$primary-color;
-}
-
-.mention-align {
-	position:relative;
-	top:5px;
-}
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 637f908ca..707e71cf0 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -15,6 +15,10 @@
 	}
 	.remove__member {
 		float: right;
+		color: #E56565;
+		font-size: 20px;
+		line-height: 0;
+		padding: 6px;
 	}
 	.modal-dialog {
 		max-width: 95%;
@@ -268,3 +272,19 @@
 		}
 	}
 }
+
+// Invite New Member
+.invite {
+	margin-right: 40px;
+}
+
+.row--invite {
+	margin-right: 40px;
+	@include clearfix;
+	.col-sm-6 {
+		padding: 0 0 0 15px;
+		&:first-child {
+			padding-left: 0;
+		}
+	}
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss
index f253d0792..f38c6062f 100755
--- a/web/sass-files/sass/partials/_perfect-scrollbar.scss
+++ b/web/sass-files/sass/partials/_perfect-scrollbar.scss
@@ -3,7 +3,7 @@
   .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
     display: block; }
   .ps-container.ps-in-scrolling {
-    pointer-events: none; }
+     }
     .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
       background-color: #eee;
       opacity: 0.9;
@@ -85,7 +85,7 @@
       /* there must be 'right' for ps-scrollbar-y */
       width: 8px; }
   .ps-container:hover.ps-in-scrolling {
-    pointer-events: none; }
+     }
     .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
       background-color: #eee;
       opacity: 0.9;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 0eeaa3615..9c0c09ee3 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -276,6 +276,11 @@
             }
         }
     }
+    .row--invite {
+        .col-sm-6 {
+            padding: 0;
+        }
+    }
     .settings-modal {
         &.display--content {
             .modal-header {