Adjust layout and formatting of notifications / file cards

This follows some polish time with a designer.

The placeholder text on the two panels was tracking up/down when the width was changed. This is fixed by adjusting some of the flexbox properties to center it more safely. 

We also spent some time making the notifications panel more legible while we wait for the overhaul to land.

res/css/structures/_FilePanel.scss

@@ -23,6 +23,13 @@ limitations under the License.
 
 .mx_FilePanel .mx_RoomView_messageListWrapper {
     margin-right: 20px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList {
+    width: 100%;
 }
 
 .mx_FilePanel .mx_RoomView_MessageList h2 {

res/css/structures/_NotificationPanel.scss

@@ -22,7 +22,13 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_RoomView_messageListWrapper {
-    margin-right: 20px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList {
+    width: 100%;
 }
 
 .mx_NotificationPanel .mx_RoomView_MessageList h2 {
@@ -35,11 +41,32 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile {
     word-break: break-word;
+    position: relative;
+    padding-bottom: 18px;
+
+    &:not(.mx_EventTile_last)::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: $tertiary-fg-color;
+        height: 1px;
+        opacity: 0.4;
+        content: '';
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
     font-size: $font-14px;
+
+    > * {
+        vertical-align: middle;
+    }
+
+    > .mx_BaseAvatar {
+       margin-right: 8px;
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -47,8 +74,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
-    top: 8px;
+    display: none;
-    left: 0px;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
@@ -60,8 +86,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_senderDetails {
-    padding-left: 32px;
+    padding-left: 36px;
-    padding-top: 8px;
     position: relative;
 
     a {
@@ -82,7 +107,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_line {
     margin-right: 0px;
-    padding-left: 32px;
+    padding-left: 36px;
     padding-top: 0px;
     padding-bottom: 0px;
     padding-right: 0px;

res/css/structures/_RoomView.scss

@@ -185,13 +185,11 @@ limitations under the License.
 }
 
 .mx_RoomView_empty {
-    flex: 1 1 auto;
     font-size: $font-13px;
-    padding-left: 3em;
+    padding: 0 24px;
-    padding-right: 3em;
+    margin-right: 30px;
-    margin-right: 20px;
-    margin-top: 33%;
     text-align: center;
+    margin-bottom: 80px;
 }
 
 .mx_RoomView_MessageList {

src/components/views/rooms/EventTile.js

@@ -34,6 +34,7 @@ import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
@@ -821,6 +822,7 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_roomName">
+                            <RoomAvatar room={room} width={28} height={28} />
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
                             </a>