Updated that RightPanel members icon, highlight and numbers

src/components/structures/RightPanel.js

@@ -136,8 +136,8 @@ module.exports = React.createClass({
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                             { membersBadge }
+                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -43,7 +43,7 @@ limitations under the License.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 25px;
+    margin-top: 10px;
     float: left;
     background-color: #fff;
     margin-left: -4px;
@@ -55,34 +55,27 @@ limitations under the License.
     vertical-align: middle;
     padding-left: 15px;
     padding-right: 15px;
+    text-align: center;
     position: relative;
 }
 
 .mx_RightPanel_headerButton object {
     pointer-events: none;
+    padding-bottom: 2px;
 }
 
 .mx_RightPanel_headerButton_highlight {
-    position: absolute;
-    bottom: -2px;
-    left: 10px;
     width: 25px;
-    height: 4px;
+    height: 5px;
-    background-color: #76cfa6;
+    border-radius: 5px;
+    background-color: rgba(118, 207, 166, 0.2);
 }
 
 .mx_RightPanel_headerButton_badge {
-    position: absolute;
+    font-size: 11px;
-    top: 4px;
+    color: #76cfa6;
-    left: 28px;
-    font-size: 12px;
-    background-color: #76cfa6;
-    color: #fff;
     font-weight: bold;
-    border-radius: 20px;
+    padding-bottom: 2px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 0px;
 }
 
 .mx_RightPanel .mx_MemberList,

src/skins/vector/img/icons-people.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>00B600B3-7C80-417D-9C3F-89072AE3B227</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M12.5,11 C13.8807119,11 15,9.88071187 15,8.5 C15,7.11928813 13.8807119,6 12.5,6 C11.1192881,6 10,7.11928813 10,8.5 C10,9.88071187 11.1192881,11 12.5,11 Z" id="path-1"></path>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="7" height="7">
+            <rect x="9" y="5" width="7" height="7" fill="white"></rect>
+            <use xlink:href="#path-1" fill="black"></use>
+        </mask>
+        <path d="M17.8898251,19 C17.8898251,15.1340068 17.8898253,12 12.4446367,12 C6.99944805,12 6.99944826,15.1340068 6.99944826,19 C10.784589,19 13.066792,19 17.8898251,19 Z" id="path-3"></path>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="10.8903768" height="7" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Right-panel/Header" transform="translate(-32.000000, -23.000000)">
+            <g id="icons_people" transform="translate(32.000000, 23.000000)">
+                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
+                <use id="Oval-39" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="2" opacity="0.8" xlink:href="#path-1"></use>
+                <use id="Oval-40" stroke="#FFFFFF" mask="url(#mask-4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8" xlink:href="#path-3"></use>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/members.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_people</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-978.000000, -32.000000)" fill="#76CFA6">
-            <g id="icons_people" sketch:type="MSLayerGroup" transform="translate(978.000000, 32.000000)">
-                <path d="M7.79396172,11.1845854 C10.8910264,11.1845854 13.4110283,8.6755122 13.4110283,5.59121951 C13.4110283,2.50853659 10.8910264,0 7.79396172,0 C4.69851351,0 2.18012797,2.50853659 2.18012797,5.59121951 C2.18012797,8.6755122 4.69851351,11.1845854 7.79396172,11.1845854 L7.79396172,11.1845854 Z M7.79396172,0.804878049 C10.4454327,0.804878049 12.6028173,2.95229268 12.6028173,5.59121951 C12.6028173,8.2317561 10.4454327,10.3797073 7.79396172,10.3797073 C5.14410719,10.3797073 2.98833899,8.2317561 2.98833899,5.59121951 C2.98833899,2.95229268 5.14410719,0.804878049 7.79396172,0.804878049 L7.79396172,0.804878049 Z M0.885806936,21.4634146 C1.33849039,19.4978231 2.46183493,15.4298815 3.13651101,14.4663415 C4.32835286,12.76 6.45287023,12.8072195 6.48358225,12.8034634 L9.03699027,12.8013171 C9.06393064,12.7980976 11.7369539,12.5421463 12.9228689,14.5377073 C12.9320286,14.5532683 12.9422659,14.5682927 12.9535809,14.5827805 C13.6376414,15.4425239 14.755176,19.1307382 15.2598605,21.1908293 L15.2598605,21.1908293 L14.9096797,21.1908293 L1.53746094,21.1908293 L1.15172387,21.1908293 L1.15172387,21.9957073 L1.53746094,21.9957073 L14.9096797,21.9957073 L15.2954167,21.9957073 L15.2954167,21.3375005 C15.3143567,21.416496 15.3322794,21.4927245 15.3491183,21.5659024 C15.3922229,21.7520976 15.5587144,21.8781951 15.7429865,21.8781951 C15.7726209,21.8781951 15.8027941,21.8749756 15.8335061,21.8685366 C16.0506455,21.8186341 16.1869638,21.6029268 16.1368547,21.3856098 C15.7844747,19.8558049 14.5355192,15.312 13.6044602,14.1052195 C12.144831,11.6825366 9.08063366,11.9857073 8.99388568,11.9985854 L6.49759124,11.9985854 C6.38767454,11.996439 3.92209212,11.9320488 2.47323917,14.0059512 C1.66987741,15.1531707 0.489889321,19.5553171 0.0750076642,21.3872195 C0.0254373883,21.6045366 0.162294454,21.8197073 0.379972623,21.8685366 C0.460649718,21.8870317 0.541104777,21.8798767 0.61291652,21.8524806 L0.61291652,22 L1.15172387,22 L1.15172387,21.4634146 L0.885804128,21.4634146 Z" id="Fill-92" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>