Improving mentions list and other UI improvements

web/react/components/invite_member_modal.jsx

@@ -162,25 +162,31 @@ module.exports = React.createClass({
                 invite_sections[index] = (
                     <div key={"key" + index}>
                     <div>
-                        <button type="button" className="btn remove__member" onClick={this.removeInviteFields.bind(this, index)}>×</button>
+                        <button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></button>
                     </div>
                     <div className={ email_error ? "form-group invite has-error" : "form-group invite" }>
                         <input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" />
                         { email_error }
                     </div>
+                    <div className="row--invite">
                     { config.AllowInviteNames ?
-                    <div className={ first_name_error ? "form-group invite has-error" : "form-group invite" }>
+                    <div className="col-sm-6">
-                        <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
+                        <div className={ first_name_error ? "form-group has-error" : "form-group" }>
-                        { first_name_error }
+                            <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
+                            { first_name_error }
+                        </div>
                     </div>
                     : "" }
                     { config.AllowInviteNames ?
-                    <div className={ last_name_error ? "form-group invite has-error" : "form-group invite" }>
+                    <div className="col-sm-6">
-                        <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
+                        <div className={ last_name_error ? "form-group has-error" : "form-group" }>
-                        { last_name_error }
+                            <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
+                            { last_name_error }
+                        </div>
                     </div>
                     : "" }
                     </div>
+                    </div>
                 );
             }
 
@@ -203,7 +209,7 @@ module.exports = React.createClass({
                                 <button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button>
                                 <br/>
                                 <br/>
-                                <label className='control-label'>People invited automatically join Town Square channel.</label>
+                                <span>People invited automatically join Town Square channel.</span>
                             </div>
                             <div className="modal-footer">
                               <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>

web/react/components/mention_list.jsx

@@ -129,7 +129,7 @@ module.exports = React.createClass({
 
         if (numMentions < 1) return (<div/>);
 
-        var height = (numMentions*37) + 2;
+        var height = (numMentions*36) + 4;
         var width = $('#'+this.props.id).parent().width();
         var bottom = $(window).height() - $('#'+this.props.id).offset().top;
         var left = $('#'+this.props.id).offset().left;

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

@@ -154,9 +154,4 @@ div.theme {
     text-decoration: none;
     padding: 0 10px;
   }
-}
+}
-
-.invite {
-  width: 90%;
-}
-

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-x: hidden;
-        overflow-y: scroll;
+		overflow-y: scroll;
-        bottom:0;
+		bottom:0;
 	}
 }
 
@@ -24,13 +25,15 @@
 	position:relative;
 	width:100%;
 	background-color:#fff;
-	height:37px;
+	height:36px;
 	padding:2px;
 	z-index:101;
-    cursor: pointer;
+	line-height: 36px;
-    &:hover {
+	font-size: 13px;
-        background-color:#e8eaed;
+	cursor: pointer;
-    }
+	&:hover {
+		background-color: #E6F2FA;
+	}
 }
 
 .mentions-text {
@@ -38,15 +41,20 @@
 }
 
 .mention-img {
-	margin-right:10px;
+	margin-right: 6px;
-	height:32px;
+	height: 32px;
-	width:32px;
+	width: 32px;
-	border-radius: 10%;
+	line-height: 36px;
+	display: block;
+	font-size: 20px;
+	text-align: center;
+	color: #555;
+	@include border-radius(3px);
 }
 
 .mention-fullname {
-    color: grey;
+	color: grey;
-    padding-left: 10px;
+	padding-left: 10px;
 }
 
 .mention-highlight {
@@ -55,9 +63,4 @@
 
 .mention-link {
 	color:$primary-color;
-}
+}
-
-.mention-align {
-	position:relative;
-	top:5px;
-}

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;
+		}
+	}
+}

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;

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

@@ -276,6 +276,11 @@
             }
         }
     }
+    .row--invite {
+        .col-sm-6 {
+            padding: 0;
+        }
+    }
     .settings-modal {
         &.display--content {
             .modal-header {