Improve Room Directory Look & Feel

By adding an icon next to the title.
Requires https://github.com/matrix-org/matrix-react-sdk/pull/848

src/components/structures/RoomDirectory.js

@@ -548,7 +548,7 @@ module.exports = React.createClass({
         const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
         return (
             <div className="mx_RoomDirectory">
-                <SimpleRoomHeader title="Directory" />
+                <SimpleRoomHeader title="Directory" icon="img/icons-directory.svg"/>
                 <div className="mx_RoomDirectory_list">
                     <div className="mx_RoomDirectory_listheader">
                         <DirectorySearchBox

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss

@@ -96,6 +96,12 @@ limitations under the License.
     float: right;
 }
 
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+    margin-left: 14px;
+    margin-right: 24px;
+    vertical-align: -4px;
+}
+
 .mx_RoomHeader_name {
     vertical-align: middle;
     width: 100%;

src/skins/vector/css/vector-web/structures/_RoomDirectory.scss

@@ -28,6 +28,10 @@ limitations under the License.
     flex-direction: column;
 }
 
+.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
+    margin-left: 0px;
+}
+
 .mx_RoomDirectory_list {
     flex: 1;