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

src/skins/vector/img/search-icon-vector.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="19px" viewBox="0 0 17 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>3F331F6F-C5B8-4F4E-B05C-61DD280A5298</title>
+    <title>2EFF6BB8-D2CC-44E6-85E9-D057E4AE9DF2</title>
     <desc>Created with sketchtool.</desc>
     <defs>
         <ellipse id="path-1" cx="7.68292683" cy="15.4246795" rx="1.35501355" ry="1.40224359"></ellipse>
@@ -21,8 +21,9 @@
         </mask>
     </defs>
     <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Chat-People-2a-Invite-modal" transform="translate(-318.000000, -400.000000)">
+        <g id="Chat-People-2a-Invite-modal-HOVER" transform="translate(-314.000000, -391.000000)">
-            <g id="search_icon_vector" transform="translate(313.500000, 397.000000)">
+            <g id="search_icon_vector" transform="translate(314.000000, 391.000000)">
+                <circle id="Oval-2-Copy" fill="#FFFFFF" cx="12.5" cy="12.5" r="12.5"></circle>
                 <g id="Mark" transform="translate(5.000000, 4.000000)">
                     <ellipse id="large-circ-copy-42" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="8.50694444" rx="6.77506775" ry="7.01121795"></ellipse>
                     <ellipse id="Oval-1-Copy-200" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="1.40224359" rx="1.35501355" ry="1.40224359"></ellipse>