Mouse actions on the queryList added, as well as better queryListElement styling

src/skins/vector/css/common.css

@@ -64,6 +64,11 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* Required by Firefox */
+textarea {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
 /* Prevent ugly dotted highlight around selected elements in Firefox */
 ::-moz-focus-inner {
     border: 0;

src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css

@@ -20,6 +20,7 @@ limitations under the License.
 {
     height: 26px;
     font-size: 14px;
+    font-family: font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     padding-left: 12px;
     padding-right: 12px;
     margin: 0 !important;
@@ -39,24 +40,26 @@ limitations under the License.
     line-height: 36px;
     padding-left: 4px;
     padding-right: 4px;
-    padding-top: 2px;
+    padding-top: 1px;
+    padding-bottom: 1px;
     overflow: hidden;
 }
 
 .mx_ChatInviteDialog_queryList {
     position: absolute;
     background-color: #fff;
-    width: 410px;
+    width: 470px;
     max-height: 116px;
     overflow-y: scroll;
 	border-radius: 3px;
 	background-color: #fff;
 	border: solid 1px #76cfa6;
+    cursor: pointer;
 }
 
 .mx_ChatInviteDialog_queryListElement .mx_AddressTile {
     background-color: #fff;
-    border: solid 1px #fff;
+    border: 0;
 }
 
 .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected {
@@ -65,7 +68,6 @@ limitations under the License.
 
 .mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile {
     background-color: #eaf5f0; /* selected colour */
-    border: solid 1px #eaf5f0; /* selected colour */
 }
 
 .mx_ChatInviteDialog_cancel {

src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css

@@ -25,12 +25,20 @@ limitations under the License.
     font-weight: normal;
 }
 
+.mx_AddressTile_network {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 4px;
+    vertical-align: middle;
+}
+
 .mx_AddressTile_avatar {
     display: inline-block;
     position: relative;
-    top: 1px;
     padding-left: 2px;
     padding-right: 7px;
+    vertical-align: middle;
 }
 
 .mx_AddressTile_name {
@@ -40,10 +48,11 @@ limitations under the License.
 }
 
 .mx_AddressTile_name.mx_AddressTile_justified {
-    width: 120px;
+    width: 180px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    vertical-align: middle;
 }
 
 .mx_AddressTile_id {
@@ -56,6 +65,7 @@ limitations under the License.
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    vertical-align: middle;
 }
 
 .mx_AddressTile_dismiss {

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -39,7 +39,7 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: rgba(118, 207, 166, 0.2);
+    background-color: rgba(118, 207, 166, 0.2); /* Should be #d3ede1, but not a magic colour */
     border-top: solid 2px #eaf5f0;
 }