From 7fdb82d87f811fadec9f0de1bf1744300da53831 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 25 Oct 2015 22:55:30 +0000
Subject: [PATCH] memberinfo look & feel

---
 src/skins/vector/css/molecules/MemberInfo.css |  41 +++++++++++++++++-
 src/skins/vector/css/molecules/MemberTile.css |   1 +
 src/skins/vector/img/cancel-black.png         | Bin 0 -> 1136 bytes
 .../vector/views/molecules/MemberInfo.js      |  14 +++---
 4 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/skins/vector/img/cancel-black.png

diff --git a/src/skins/vector/css/molecules/MemberInfo.css b/src/skins/vector/css/molecules/MemberInfo.css
index 31440e9e..6471a86c 100644
--- a/src/skins/vector/css/molecules/MemberInfo.css
+++ b/src/skins/vector/css/molecules/MemberInfo.css
@@ -18,6 +18,45 @@ limitations under the License.
     height: 100%;
 }
 
+.mx_MemberInfo h2 {
+    margin-top: 6px;
+}
+
 .mx_MemberInfo_cancel {
     float: right;
-}
\ No newline at end of file
+    margin-right: 18px;
+    cursor: pointer;
+}
+
+.mx_MemberInfo_avatar {
+    clear: both;
+}
+
+.mx_MemberInfo_avatar img {
+    border-radius: 48px;
+}
+
+.mx_MemberInfo_profileField {
+    opacity: 0.6;
+    font-size: 14px;
+}
+
+.mx_MemberInfo_buttons {
+    margin-top: 18px;
+}
+
+.mx_MemberInfo_field {
+    cursor: pointer;
+    width: 100px;
+    text-align: center;
+    font-size: 12px;    
+    background-color: #888;
+    color: #fff;
+    font-weight: bold;
+    border-radius: 20px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 4px;
+    padding-bottom: 2px;
+    margin-bottom: 4px;
+}
diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css
index 24dc5dba..cfeaeaee 100644
--- a/src/skins/vector/css/molecules/MemberTile.css
+++ b/src/skins/vector/css/molecules/MemberTile.css
@@ -18,6 +18,7 @@ limitations under the License.
     display: table-row;
     position: relative;
     color: #454545;
+    cursor: pointer;
 }
 
 .mx_MemberTile_avatar {
diff --git a/src/skins/vector/img/cancel-black.png b/src/skins/vector/img/cancel-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..87dcfd41a886006ad3763e59174eb56d3797643b
GIT binary patch
literal 1136
zcmaJ>TWHi+7>+CGTHAFi`cM@NsbCj6lVon0i8C!T$wbFBrA|j26|tG*bSBnZHaX*D
zDvPUvu;MPL6}uHt5&Gg?!52lv7x6{Zs-+bwc%csp6>s~xCu3*yVaGsD&iVPi@4ue>
z+1<6esbNV2hG9*qHGCR<7rO6{KcIE|Tnk#U7MRS!9-|MIBnx11#mE6XrAc{^29i?#
z?H-6?*z7hnlZ9Dv9V;7}S8_34M>AbI7VUIQN$v*_&w;$E$B60cw+LKSV#LOvNQou~
z3hJ5x3-k<hW#oZ=Iie7q9eC7Xk$?uEgge>}-DaH_QPE}5-Zhg1UV*^=81W^jtk{in
zh6V7TH{_A25Q8%jFCAo<0Mm~9C^|?|e$r2Qe10}Su>l`G^AO0JrS!3BUYPNPPBEeY
zp~;eDsZ{co{9eP#lXN5!At@i}^LY@$W0!R(IUe0^tt#-qmMztUs-feqqLed=Fh-zA
zzoej<HCf%BDHAFf=}0C?dnq@iDo_-^57o39+J<THHQxUfwlifDkZE8WMN3AF>uYsg
znJi}k2^v<$Fm_a{*j+H7VHXS&=eSDM@HSDBRoylIQelZAo6>D4=`u+1F#_p$RaIfb
zJS_-`kihuE37Sp@6Ev6L{2a}MBVi^K_f@&PAs02E!zx#)aT%&E*BuDWM4owIsXKup
zScZmI5@*%=vG8^EX1Ge-SVGCVToMICy6yd@-BlBsA$MCFUUaC9KhV+4TWGki&>J0e
zF(y-dJmX9p9HoB}s6}(%eLgGZF8{MEk+YgtnnU}cHSg;DY~zcc5BAXyr|%s*b@Jxj
z<HG~D0>AHmy<vkmItW^Jt$%iHak6>;X@4U(R=o77ZTHCZuCZcr>)6ZiHEn)gSpTtb
zc*XdF2b(Xx8J;Q+kAO|vx5W1izMr`L_ky7t$B#&lwm0rPHniu(s^G;7gL}vCJeewY
z<a?iXUSFHt()4)lQs%^I?$y=yUq=I<JNFC)4>g?0|CJJ^_N9cS>#nSpkKXwZZSQH_
scK>C#WAeZs`tyIEM@P9i@pp@RvA3UQ6_%VYEqDI`sbm*_A<?_{KeRT1Q~&?~

literal 0
HcmV?d00001

diff --git a/src/skins/vector/views/molecules/MemberInfo.js b/src/skins/vector/views/molecules/MemberInfo.js
index 030fb990..b5b2d358 100644
--- a/src/skins/vector/views/molecules/MemberInfo.js
+++ b/src/skins/vector/views/molecules/MemberInfo.js
@@ -71,7 +71,7 @@ module.exports = React.createClass({
         var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
         return (
             <div className="mx_MemberInfo">
-                <img className="mx_MemberInfo_cancel" src="img/cancel.png" width="18" height="18" onClick={this.onCancel}/>
+                <img className="mx_MemberInfo_cancel" src="img/cancel-black.png" width="18" height="18" onClick={this.onCancel}/>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar member={this.props.member} width={48} height={48} />
                 </div>
@@ -79,11 +79,13 @@ module.exports = React.createClass({
                 <div className="mx_MemberInfo_profileField">
                     { this.props.member.userId }
                 </div>
-                {interactButton}
-                {muteButton}
-                {kickButton}
-                {banButton}
-                {giveModButton}
+                <div className="mx_MemberInfo_buttons">
+                    {interactButton}
+                    {muteButton}
+                    {kickButton}
+                    {banButton}
+                    {giveModButton}
+                </div>
             </div>
         );
     }