CSS for notif & file panel

src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css

@@ -29,26 +29,68 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
 .mx_NotificationPanel .mx_RoomView_MessageList h2 {
     margin-left: 0px;
 }
 
-.mx_NotificationPanel .mx_EventTile_avatar {
-    display: none;
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
 }
 
-.mx_NotificationPanel .mx_EventTile .mx_SenderProfile {
-    padding: 0px;
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: #4a4a4a;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: #000;
+    opacity: 0.3;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     visibility: visible;
     position: initial;
+    display: inline;
 }
 
 .mx_NotificationPanel .mx_EventTile_line {
     margin-right: 0px;
-    padding-left: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
 }
 
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {