Allow theming right panel header buttons

res/css/structures/_RightPanel.scss

@@ -25,9 +25,7 @@ limitations under the License.
 
 .mx_RightPanel_header {
     order: 1;
-
     border-bottom: 1px solid $primary-hairline-color;
-
     flex: 0 0 52px;
 }
 
@@ -45,16 +43,35 @@ limitations under the License.
     cursor: pointer;
     flex: 0 0 auto;
     vertical-align: top;
-    margin-top: 4px;
+    margin-left: 5px;
-    padding-left: 5px;
+    margin-right: 5px;
-    padding-right: 5px;
     text-align: center;
-    position: relative;
     border-bottom: 2px solid transparent;
+    height: 20px;
+    width: 20px;
+    background-color: $rightpanel-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RightPanel_headerButton object {
+.mx_RightPanel_membersButton {
-    pointer-events: none;
+    mask-image: url('$(res)/img/feather-icons/user.svg');
+}
+
+.mx_RightPanel_filesButton {
+    mask-image: url('$(res)/img/feather-icons/files.svg');
+}
+
+.mx_RightPanel_notifsButton {
+    mask-image: url('$(res)/img/feather-icons/notifications.svg');
+}
+
+.mx_RightPanel_groupMembersButton {
+    mask-image: url('$(res)/img/icons-people.svg');
+}
+
+.mx_RightPanel_roomsButton {
+    mask-image: url('$(res)/img/icons-room-nobg.svg');
 }
 
 .mx_RightPanel_headerButton_highlight {

res/themes/dark/css/_dark.scss

@@ -77,6 +77,7 @@ $roomheader-color: $text-primary-color;
 $roomheader-addroom-color: $header-panel-text-primary-color;
 $tagpanel-button-color: $header-panel-text-primary-color;
 $roomheader-button-color: $header-panel-text-primary-color;
+$rightpanel-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
 $eventtile-meta-color: $roomtopic-color;
 

res/themes/dharma/css/_dharma.scss

@@ -147,6 +147,7 @@ $roomheader-color: #45474a;
 $roomheader-addroom-color: #91A1C0;
 $tagpanel-button-color: #91A1C0;
 $roomheader-button-color: #91A1C0;
+$rightpanel-button-color: #91A1C0;
 $roomtopic-color: #9fa9ba;
 $eventtile-meta-color: $roomtopic-color;
 

src/components/views/right_panel/GroupHeaderButtons.js

@@ -65,12 +65,14 @@ export default class GroupHeaderButtons extends HeaderButtons {
         ];
 
         return [
-            <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
+            <HeaderButton key="groupMembersButton" name="groupMembersButton"
+                title={_t('Members')}
                 isHighlighted={this.isPhase(groupPhases)}
                 clickPhase={RightPanel.Phase.GroupMemberList}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
-            <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
+            <HeaderButton key="roomsButton" name="roomsButton"
+                title={_t('Rooms')}
                 isHighlighted={this.isPhase(roomPhases)}
                 clickPhase={RightPanel.Phase.GroupRoomList}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}

src/components/views/right_panel/HeaderButton.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import dis from '../../../dispatcher';
 import Analytics from '../../../Analytics';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 
 export default class HeaderButton extends React.Component {
     constructor() {
@@ -44,6 +43,7 @@ export default class HeaderButton extends React.Component {
         const classes = classNames({
             mx_RightPanel_headerButton: true,
             mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+            [`mx_RightPanel_${this.props.name}`]: true,
         });
 
         return <AccessibleButton
@@ -51,9 +51,8 @@ export default class HeaderButton extends React.Component {
             aria-expanded={this.props.isHighlighted}
             title={this.props.title}
             className={classes}
-            onClick={this.onClick} >
+            onClick={this.onClick}>
-                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
+        </AccessibleButton>;
-            </AccessibleButton>;
     }
 }
 
@@ -62,14 +61,14 @@ HeaderButton.propTypes = {
     isHighlighted: PropTypes.bool.isRequired,
     // The phase to swap to when the button is clicked
     clickPhase: PropTypes.string.isRequired,
-    // The source file of the icon to display
-    iconSrc: PropTypes.string.isRequired,
 
     // The badge to display above the icon
     badge: PropTypes.node,
     // The parameters to track the click event
     analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
 
+    // Button name
+    name: PropTypes.string.isRequired,
     // Button title
     title: PropTypes.string.isRequired,
 };

src/components/views/right_panel/RoomHeaderButtons.js

@@ -52,17 +52,20 @@ export default class RoomHeaderButtons extends HeaderButtons {
         ];
 
         return [
-            <HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
+            <HeaderButton key="membersButton" name="membersButton"
+                title={_t('Members')}
                 isHighlighted={this.isPhase(membersPhases)}
                 clickPhase={RightPanel.Phase.RoomMemberList}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
-            <HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
+            <HeaderButton key="filesButton" name="filesButton"
+                title={_t('Files')}
                 isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
                 clickPhase={RightPanel.Phase.FilePanel}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
-            <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
+            <HeaderButton key="notifsButton" name="notifsButton"
+                title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
                 clickPhase={RightPanel.Phase.NotificationPanel}
                 analytics={['Right Panel', 'Notification List Button', 'click']}