Consolidate all the work thus far

src/components/structures/NotificationPanel.js

@@ -17,14 +17,21 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from "prop-types";
+
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
+import BaseCard from "../views/right_panel/BaseCard";
 
 /*
  * Component which shows the global notification list using a TimelinePanel
  */
 class NotificationPanel extends React.Component {
+    static propTypes = {
+        onClose: PropTypes.func.isRequired,
+    };
+
     render() {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
@@ -35,28 +42,27 @@ class NotificationPanel extends React.Component {
             <p>{_t('You have no visible notifications in this room.')}</p>
         </div>);
 
+        let content;
         const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
-            return (
-                <div className="mx_NotificationPanel" role="tabpanel">
-                    <TimelinePanel
-                        manageReadReceipts={false}
-                        manageReadMarkers={false}
-                        timelineSet={timelineSet}
-                        showUrlPreview={false}
-                        tileShape="notif"
-                        empty={emptyState}
-                    />
-                </div>
+            content = (
+                <TimelinePanel
+                    manageReadReceipts={false}
+                    manageReadMarkers={false}
+                    timelineSet={timelineSet}
+                    showUrlPreview={false}
+                    tileShape="notif"
+                    empty={emptyState}
+                />
             );
         } else {
             console.error("No notifTimelineSet available!");
-            return (
-                <div className="mx_NotificationPanel" role="tabpanel">
-                    <Loader />
-                </div>
-            );
+            content = <Loader />;
         }
+
+        return <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose}>
+            { content }
+        </BaseCard>;
     }
 }