From 6e2362e8a958a452fc06ac39394ae05101b1e046 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 23 Oct 2015 17:43:40 +0100
Subject: [PATCH] reskin file upload UI

---
 src/skins/vector/css/organisms/RoomView.css  |  19 +++++++++++--------
 src/skins/vector/img/cancel.png              | Bin 1209 -> 316 bytes
 src/skins/vector/img/fileicon.png            | Bin 1193 -> 658 bytes
 src/skins/vector/views/organisms/RoomView.js |   4 ++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css
index b168afca..c1971c61 100644
--- a/src/skins/vector/css/organisms/RoomView.css
+++ b/src/skins/vector/css/organisms/RoomView.css
@@ -218,8 +218,9 @@ limitations under the License.
 
 .mx_RoomView_uploadProgressOuter {
     width: 100%;
-    background-color: rgba(169, 219, 244, 0.5);
     height: 4px;
+    margin-left: 54px;
+    margin-top: -1px;
 }
 
 .mx_RoomView_uploadProgressInner {
@@ -228,27 +229,29 @@ limitations under the License.
 }
 
 .mx_RoomView_uploadFilename {
-    margin-top: 15px;
+    margin-top: 5px;
     margin-left: 56px;
+    opacity: 0.5;
+    color: #4a4a4a;
 }
 
 .mx_RoomView_uploadIcon {
     float: left;
-    margin-top: 6px;
-    margin-left: 5px;
+    margin-top: 1px;
+    margin-left: 14px;
 }
 
 .mx_RoomView_uploadCancel {
     float: right;
-    margin-top: 6px;
+    margin-top: 5px;
     margin-right: 10px;
 }
 
 .mx_RoomView_uploadBytes {
     float: right;    
-    opacity: 0.5;
-    margin-top: 15px;
-    margin-right: 10px;
+    margin-top: 5px;
+    margin-right: 30px;
+    color: #76cfa6;
 }
 
 .mx_RoomView_ongoingConfCallNotification {
diff --git a/src/skins/vector/img/cancel.png b/src/skins/vector/img/cancel.png
index c963a4b7b37a630c1be331c78156614cc0705094..2bda8ff5bf06fba1732f30cdec0745d78f3e15a0 100644
GIT binary patch
literal 316
zcmV-C0mJ@@P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px#_DMuRR5%fp)V&JAFc1J>lN3Y{1YaQm!N~`3QJ1za+-@#DgHr}^)<JM><6R-a
z=06!ylFNOh$+e_y+rv1H>%Q-Ai}FV5x;|4%-&85JWsL1%;#lZR2;_3y2$NDigb*8;
z*m2HRFn(r$1{sFoj&H*-sStAzG$yD3^CB}S0}CP!6v3hh<`L{XjWkVjf@>9cm=Is$
z?dXH`tPeuC)?he@AsDCFg&NdYXva>9xiu>?I}?a~Qg!BoW(XErPMz71gXo>6uzx6s
z<X{>~A}I`^Y$S#ua!D1N2CS#4GpsRMRn;q1Y!;x0s_VKd{EH-f0pB0^Qt-BgyatQ_
O0000<MNUMnLSTZKgndH*

literal 1209
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEk|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=GT+PkgjGPP|%`A+Z4GmpQ9o<}woXp&e
zT`Y}FER8HIVR~KilS^|`^GaZPQxJNcaOwpmh};68%`T}$nPsUdZbkXI3Sf_0W#V>=
z1y1vzdQ)(_#S*7peV}9XLD7p8-7q0w8Uiuli5JL$C;!wuV45!iChn>q3c!59sP5_F
z7*cWT&5gZWha7kq9?Y?Ibv)`S5L3f6-_cxM{+g@0{Gp2{m(FgExS(|HhDeK&tA4tl
z$fUK0x5mF$=S&w6th3De@OYsEt5!fG*PkSnm#oc9*FQ>%?-u@5^I}GS<gx3IWaku4
z`~3a4NaF02qn}F{Ze*JEXy;9RoROp5rNA-4V6&pa5r)~#)|+~yzbnn)$&pZSo!(h<
z%(r;X>owJkmL8mQ#4oUFwti;Y=X6PM>Y-YeH7?I~ePK(o;8MQ$Y5MdjPF&x`m!9)F
zCwDex*2hmN0SQ+#b<KQq+P6&F!G2`<qYkF~Pj{|Mj}&3trIx6<gtu|B%cfhp^SJ_B
z=k!Y@-dbB{?ELDv+8LD?w{5TY<Yw%vtaMp@;BK>9{&tZSU|-1}jcs6Lm~~9@g_@Lg
Q9H=nyboFyt=akR{0GueCmH+?%

diff --git a/src/skins/vector/img/fileicon.png b/src/skins/vector/img/fileicon.png
index be277a1c8afe9c15815f2c63fc277cf20f66f3d6..af018efa6dffa94c5988e7a6e9ca222643699c89 100644
GIT binary patch
literal 658
zcmV;D0&V??P)<h;3K|Lk000e1NJLTq000pH000&U1^@s6CTMp;00001b5ch_0Itp)
z=>Px%Oi4sRR5%gcRL`ptQ51H5h>cMAdYV0G@!I$z$b9{9A>^WkprWWCEkq&^{|s^A
z&aHod4}u6G!Jk32tVM2Yml-MVO+i7W7&@6V_MK=RGxMfr>n@D<-0ytnyXTyHy^IAT
zolXn$`TQ!&vfJzR+D4dR$bulesMTsy1O9u-kbopfcMv>sI-N(=YE?24W3kv>MNzE4
zU$xuqZ$>{$8IVA$)f$=!P=MR*=Dc3-5lnwFncO}hLM0$o(df{wd7fvp+3apEmwUHd
zE^i@wm)6fx4^Znu3!2#s!*Gd2;!2@V7$N%`@p#;=@>tb4ZFV>uKYP6%QCPp<zgI4o
zKghD|OQljf1oHH=X#|78x9Hh^x7)R#G@@U&+wBTv6pcn-ZW3Wbp^y-XL`0N58;{33
z=;3kpl}cr6Fc=7b70KuGR#6nw=*2FM_z~t2GSJ-<;J1NWj#afKg~MSR1Tw%b;zRlJ
zJv4Gp%hB2=M4)a*#`p1kM+r}{(^rn;9<NrbB+9y`4OVTP2zEP*T^}I$BO3X{YPHHl
zY&M%CU=JZ2Mk8;k!Ro9N0dWhvzV387Ef5ryL^DoCgvbFn=e0Q5y2fJ1Ltylojz**L
z365t*r!Ett^IzBhn+Wc~4|<r)>bKc!hd7PrW<J93P@Mrs;$eJQEEbo54UObKPsDp8
zPU}o2b8a%3*pa}L^Z9%eT(IjNkB1Ee0`q>qzcLF_v0|~vyIigdv)ODP|L8ZRQfb1F
slgiofP^%g=%eZt?T*_g+UjIzMFOv=K$8TJ#SpWb407*qoM6N<$f=&xD!T<mO

literal 1193
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEk|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=GT+PkgjGPS3%q)zY4GmpQ9o<}woXp&e
zT`Y}FER8HIVR~KilS^|`^GaZPQxJO1aq0ynh};68%`T}$nPsUdZbkXI3Sf_0WnyuQ
zrKPi>k+FfLnYoKGcDF$EreJXkRIejWz4}1M=!2pcDY{`oz%&G6!V@o$15f^`dB8MZ
z1WepozUk%+42<HQE{-7;x03$+|8IXdfz5}fS*FLT;7a3SJ{5)tkHDCyD6b7ZK|z6u
z9X)-i0uLT0E!oZNxM0z;zQ&oXySK3xry18&{GXTj^U_fT_kYXVls)^BCOl@@VJW#W
z(M`>bO<&%g&CIN9gR*_i&u{e?mO84XskL4Bz_H45lG@Cc{_f_9QGH7y^_ERj&Wt(}
zaCoALKD%bA3inpoEw!i9+G?xIk}V$HzrUa7{5(5WYa?UZ+60*wPamKD@c20YoKN+Q
zeKETV7!NnJE?BjQ>0Z;%!`I(8>+|+)OLLR8cy%C<y$|A(C3(pYZ%sYT<KuHCWozI6
zzrVes*;i#}8OH3cnz~4Uai$|zf{d)ZOzDFa%<i%lhh#Yf5*T{bQ?x&Z?~w-;9-gj#
JF6*2UngB0|lp+8C

diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js
index 929285ca..322a3016 100644
--- a/src/skins/vector/views/organisms/RoomView.js
+++ b/src/skins/vector/views/organisms/RoomView.js
@@ -159,8 +159,8 @@ module.exports = React.createClass({
                         <div className="mx_RoomView_uploadProgressOuter">
                             <div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
                         </div>
-                        <img className="mx_RoomView_uploadIcon" src="img/fileicon.png" width="40" height="40"/>
-                        <img className="mx_RoomView_uploadCancel" src="img/cancel.png" width="40" height="40"/>
+                        <img className="mx_RoomView_uploadIcon" src="img/fileicon.png" width="17" height="22"/>
+                        <img className="mx_RoomView_uploadCancel" src="img/cancel.png" width="18" height="18"/>
                         <div className="mx_RoomView_uploadBytes">
                             { uploadedSize } / { totalSize }
                         </div>