Fix group invites such that they look similar to room invites

- Change GroupInviteTile to use RoomTile CSS
 - Give group invites their own sub list, with heading "Community Invites"

src/components/views/groups/GroupInviteTile.js

@@ -44,21 +44,21 @@ export default React.createClass({
 
         const label = <EmojiText
             element="div"
-            title={groupName}
+            title={this.props.group.groupId}
-            className="mx_GroupInviteTile_name"
+            className="mx_RoomTile_name"
             dir="auto"
         >
             { groupName }
         </EmojiText>;
 
-        const badge = <div className="mx_GroupInviteTile_badge">!</div>;
+        const badge = <div className="mx_RoomSubList_badge mx_RoomSubList_badgeHighlight">!</div>;
 
         return (
-            <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
+            <AccessibleButton className="mx_RoomTile mx_RoomTile_highlight" onClick={this.onClick}>
-                <div className="mx_GroupInviteTile_avatarContainer">
+                <div className="mx_RoomTile_avatar">
                     { av }
                 </div>
-                <div className="mx_GroupInviteTile_nameContainer">
+                <div className="mx_RoomTile_nameContainer">
                     { label }
                     { badge }
                 </div>

src/components/views/rooms/RoomList.js

@@ -555,13 +555,23 @@ module.exports = React.createClass({
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
 
-        const inviteSectionExtraTiles = this._makeGroupInviteTiles();
-
         const self = this;
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
                  autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
             <div className="mx_RoomList">
+                <RoomSubList list={[]}
+                             extraTiles={this._makeGroupInviteTiles()}
+                             label={_t('Community Invites')}
+                             editable={false}
+                             order="recent"
+                             isInvite={true}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms}
+                />
+
                 <RoomSubList list={self.state.lists['im.vector.fake.invite']}
                              label={_t('Invites')}
                              editable={false}
@@ -573,7 +583,6 @@ module.exports = React.createClass({
                              searchFilter={self.props.searchFilter}
                              onHeaderClick={self.onSubListHeaderClick}
                              onShowMoreRooms={self.onShowMoreRooms}
-                             extraTiles={inviteSectionExtraTiles}
                 />
 
                 <RoomSubList list={self.state.lists['m.favourite']}

src/i18n/strings/en_EN.json

@@ -326,6 +326,7 @@
     "Drop here to tag %(section)s": "Drop here to tag %(section)s",
     "Press <StartChatButton> to start a chat with someone": "Press <StartChatButton> to start a chat with someone",
     "You're not in any rooms yet! Press <CreateRoomButton> to make a room or <RoomDirectoryButton> to browse the directory": "You're not in any rooms yet! Press <CreateRoomButton> to make a room or <RoomDirectoryButton> to browse the directory",
+    "Community Invites": "Community Invites",
     "Invites": "Invites",
     "Favourites": "Favourites",
     "People": "People",