From 05d921256fbe5de4f1aa3476d190ff89b2d888a0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 8 Nov 2015 23:37:14 +0000
Subject: [PATCH] re-skin the notification bar

---
 .../vector/css/molecules/MatrixToolbar.css    |  40 +++++++++++++-----
 src/skins/vector/css/pages/MatrixChat.css     |   2 +-
 src/skins/vector/img/cancel-black2.png        | Bin 0 -> 1182 bytes
 src/skins/vector/img/warning.png              | Bin 0 -> 1478 bytes
 .../vector/views/molecules/MatrixToolbar.js   |  12 +++++-
 5 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/skins/vector/img/cancel-black2.png
 create mode 100644 src/skins/vector/img/warning.png

diff --git a/src/skins/vector/css/molecules/MatrixToolbar.css b/src/skins/vector/css/molecules/MatrixToolbar.css
index 99c2824082..b545b1ad3a 100644
--- a/src/skins/vector/css/molecules/MatrixToolbar.css
+++ b/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;
-}
\ No newline at end of file
+    text-align: right;
+}
+
+.mx_MatrixToolbar_close img {
+    display: block;
+    float: right;
+    margin-right: 10px;
+}
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
index f649aa2454..e74eb6c880 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/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 {
diff --git a/src/skins/vector/img/cancel-black2.png b/src/skins/vector/img/cancel-black2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a928c61b0967e83932676228efd004bc9cbf1705
GIT binary patch
literal 1182
zcmeAS@N?(olHy`uVBq!ia0vp^;vmey1SIo4oWBDp$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%o>>?5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYFX0Bjvsb^?v
zZf;_(qhMrUXsT~utZ!_fYh-L?Vqj%rqyPm<K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4mih)p`bI{&Koz>hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83
zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0<RzFwUtj!6b93RUi%Wu15$?rmaB)aw
zL8^XGYH@yPQ8F;%(v(3~6<9eJr6!i-7lq{K=fFZSAS1sdzc?emK*8A=9BK+0zKO}1
zc_2Yeur6O;E6=>*lEl2^R8JRMC7?NanVBh8E{;a7Mow;K<}NNShK8=Dj*f=rPR`~=
zW^NYF=7tvLFugAM$)&lec_lEtDG0shIQ4=OL~a4lW|!2W%(B!Jx1#)91+d4hGI6`b
z1gCjWy(zfeVv19*KF~4xpy)-4ZkP}-4S|^O#0%uWlYeR+FwGYM6ZZwf-<KH}7<oKh
z978H@CFxl2?`cdraKwSvVVUOt|NoCCom#DYeO{hzuUb3zpWnaVf86!hLAO9qtmB}4
zeC>~lw}umRpQau<aiZgXhq|<1&8~klS|{@!6<J`GS<kKT`0vl^AG}S{iWw_ZUS{?r
zah*s$<HN%1WX9yn$gR}!L8|3Ahe+@TiI)2uCBYk{zWl#m|Hm!CkoE3@|2*~e|BmIe
zlm!Ry>|!VqtW)M#68q?qLf&=-_UHTO@8?{mEcVCE!D)IzQ;On@EfO<1m*<Ej1*spL
za@Hy3)scJwZbLT#6OJe&0TZUxj+gE&(@<qz-omh94?|knpH}Woj%)thd0{8C^_tSc
qDXD3bIJdZL>pxQ@e)c2-BOAlr`8PUuEETZ_l^C9`elF{r5}E*JrIHB%

literal 0
HcmV?d00001

diff --git a/src/skins/vector/img/warning.png b/src/skins/vector/img/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5553530a8478d549139c265bec0492be4252d7e
GIT binary patch
literal 1478
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1SJ3FdmIK*k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+m^Cs(B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuU%v{0TQqR!T
z+}y-mN5ROz&{W^RSl`${*T~q)#K6kLNC66zfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr7I$IMft0d=ry1
z^FV@{U|qhxR-SpqC5d^-sh%#jN<ee;GBZ=GTpW#Djhx(!%w1eu3=LgP9UTqLot({$
z%-k%T%?&NgVR~KilS^|`^GaZPQxJNMaq0ynh};68%`T}$nPsUdZbkXI3Sf_0WnyuQ
zvw@qjp|gRdInYtq-2%~@g2gRRy^c8b>H{644~kx-=!OXa(-4RWPrN`5Jo%^Q0n>aD
zFma1kbOSRMlZmH`V@SoVBpvJhJ&m^-Ivd#<)Y>))EcW>FFMR$zYo-4Eu|<Nn=dS$G
z-`W}ETp9oWjECLv&;QIPyft~Rc>Z^M_G=T(ulw@9=XP`oBy9V)^U}-jB9dCgUnk#t
z7oO2{Pxzg|pa1^*7S0oXZ*<7AkBO&hj>7D9wa2z}MmS&X+Z)>WE2QD!%aXR*yF7n?
z321&_`F+N}KgxG6{QqyOcCWS2LZaeeVAWH`7X42zcHg{}t|Fba;qTHfYxQ3&dh@1W
z+37dGbMF72l%VnXeZ2#}kVjU2{cXKEm!^ectLJgq{&qCjdQ-pV$lrJ3fo+>=|2{VP
z&baCZKU+@NhWg*HO`bCbwlTeR_j{Z0q4D88^*41<e?vaJEN5!_wC8VXyXlgM!j#YU
z{|%kx?*>et`Tb_yALW%kOv{8%&YoW=rS<2-?3-3HEBi%f%=l*@Q`w=(e5Pog@VkdP
zOKq0jOa9lb9Q=B!k%f`Lo8x*b>mIHBw6eVXY|DjME*<NV!e<$bZQiClx1%JUt$xJC
zqMz`sd8!eIv#q+~RN0IJ_oq3A_cS*5A9P|)uPl4J`Q5zh8f{F@QBOtQ1%0{~tnv7<
zxs4&)`GgAwp;n(6<5}YEjxUHmz2Nw{4Nny1LW`!`GkQ12&p8v|{C}f?kcY+eID;6a
z1yAgi58JD$ypJyv`>SxyFHyD1#^)Emwebp@P3Jh+g7)u-(A(AhdCzZNo%t5_|I$>B
zu9+`$rhn_tKDX2F&V{-8FQ4yvGkjYH@4aIz4h@V9Yt2rEe*eW<3@TYYUHx3vIVCg!
E0HiWF6951J

literal 0
HcmV?d00001

diff --git a/src/skins/vector/views/molecules/MatrixToolbar.js b/src/skins/vector/views/molecules/MatrixToolbar.js
index 4a299f1415..361e39d6f0 100644
--- a/src/skins/vector/views/molecules/MatrixToolbar.js
+++ b/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>
         );
     }