re-skin the notification bar

src/skins/vector/css/molecules/MatrixToolbar.css

@@ -15,20 +15,40 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
-    text-align: center;
-    background-color: #ff0064;
+    background-color: #76cfa6;
     color: #fff;
-    font-weight: bold;
-    padding: 6px;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
 }
 
-.mx_MatrixToolbar button {
-    margin-left: 12px;
+.mx_MatrixToolbar_warning {
+    margin-left: 16px;
+    margin-right: 8px;
+    margin-top: -2px;
+}
+
+.mx_MatrixToolbar_link
+{
+    color: #fff ! important;
+    text-decoration: underline ! important;
+    cursor: pointer;
 }
 
 .mx_MatrixToolbar_close {
-    float: right;
-    margin-top: 3px;
-    margin-right: 12px;
+    -webkit-flex: 1;
+    flex: 1;
     cursor: pointer;
-}
+    text-align: right;
+}
+
+.mx_MatrixToolbar_close img {
+    display: block;
+    float: right;
+    margin-right: 10px;
+}

src/skins/vector/css/pages/MatrixChat.css

@@ -35,7 +35,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    height: 21px;
+    height: 40px;
 }
 
 .mx_MatrixChat_toolbarShowing {

src/skins/vector/views/molecules/MatrixToolbar.js

@@ -28,12 +28,20 @@ module.exports = React.createClass({
         Notifier.setToolbarHidden(true);
     },
 
+    onClick: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
+        Notifier.setEnabled(true);
+    },
+
     render: function() {
         var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton");
         return (
             <div className="mx_MatrixToolbar">
-                You are not receiving desktop notifications. <EnableNotificationsButton />
-                <div className="mx_MatrixToolbar_close"><img src="img/close-white.png" width="16" height="16" onClick={ this.hideToolbar } /></div>
+                <img className="mx_MatrixToolbar_warning" src="img/warning.png" width="28" height="28" alt="/!\"/>
+                <div>
+                    You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
+                </div>
+                <div className="mx_MatrixToolbar_close"><img src="img/cancel-black2.png" width="23" height="23" onClick={ this.hideToolbar } /></div>
             </div>
         );
     }