From 8652a094f35f985296210fa6ab055cde63b9565a Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 12 Feb 2019 16:42:11 +0000
Subject: [PATCH] Allow theming room header buttons

---
 res/css/views/rooms/_RoomHeader.scss          | 32 +++++++++++++++----
 res/themes/dark/css/_dark.scss                |  1 +
 res/themes/dharma/css/_dharma.scss            |  1 +
 .../views/elements/ManageIntegsButton.js      |  8 +++--
 src/components/views/rooms/RoomHeader.js      | 26 +++++++++------
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 1359bc5f57..2e3a5e5ef6 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -58,7 +58,6 @@ limitations under the License.
 
 .mx_RoomHeader_buttons {
     display: flex;
-    align-items: center;
     background-color: $primary-bg-color;
     padding-right: 5px;
 }
@@ -116,10 +115,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_settingsButton object {
-    pointer-events: none;
-}
-
 .mx_RoomHeader_name,
 .mx_RoomHeader_avatar,
 .mx_RoomHeader_avatarPicker,
@@ -199,10 +194,32 @@ limitations under the License.
 .mx_RoomHeader_button {
     margin-left: 10px;
     cursor: pointer;
+    height: 20px;
+    width: 20px;
+    background-color: $roomheader-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RoomHeader_button object {
-    pointer-events: none;
+.mx_RoomHeader_settingsButton {
+    mask-image: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_RoomHeader_forgetButton {
+    mask-image: url('$(res)/img/leave.svg');
+    width: 26px;
+}
+
+.mx_RoomHeader_searchButton {
+    mask-image: url('$(res)/img/feather-icons/search.svg');
+}
+
+.mx_RoomHeader_shareButton {
+    mask-image: url('$(res)/img/feather-icons/share.svg');
+}
+
+.mx_RoomHeader_manageIntegsButton {
+    mask-image: url('$(res)/img/feather-icons/grid.svg');
 }
 
 .mx_RoomHeader_showPanel {
@@ -219,6 +236,7 @@ limitations under the License.
 
 .mx_RoomHeader_pinnedButton {
     position: relative;
+    mask-image: url('$(res)/img/icons-pin.svg');
 }
 
 .mx_RoomHeader_pinsIndicator {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 74ce28d491..ab636e4218 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -76,6 +76,7 @@ $topleftmenu-color: $text-primary-color;
 $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;
 $roomtopic-color: $text-secondary-color;
 $eventtile-meta-color: $roomtopic-color;
 
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 86b90ff6d7..3a20cc8f0c 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -146,6 +146,7 @@ $topleftmenu-color: #212121;
 $roomheader-color: #45474a;
 $roomheader-addroom-color: #91A1C0;
 $tagpanel-button-color: #91A1C0;
+$roomheader-button-color: #91A1C0;
 $roomtopic-color: #9fa9ba;
 $eventtile-meta-color: $roomtopic-color;
 
diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js
index e5cc21d85e..3240050b6a 100644
--- a/src/components/views/elements/ManageIntegsButton.js
+++ b/src/components/views/elements/ManageIntegsButton.js
@@ -24,7 +24,6 @@ import ScalarMessaging from '../../../ScalarMessaging';
 import Modal from "../../../Modal";
 import { _t } from '../../../languageHandler';
 import AccessibleButton from './AccessibleButton';
-import TintableSvg from './TintableSvg';
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -76,6 +75,7 @@ export default class ManageIntegsButton extends React.Component {
         if (this.scalarClient !== null) {
             const integrationsButtonClasses = classNames({
                 mx_RoomHeader_button: true,
+                mx_RoomHeader_manageIntegsButton: true,
                 mx_ManageIntegsButton_error: !!this.state.scalarError,
             });
 
@@ -94,8 +94,10 @@ export default class ManageIntegsButton extends React.Component {
             }
 
             integrationsButton = (
-                <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
+                <AccessibleButton className={integrationsButtonClasses}
+                    onClick={this.onManageIntegrations}
+                    title={_t('Manage Integrations')}
+                >
                     { integrationsWarningTriangle }
                     { integrationsErrorPopup }
                 </AccessibleButton>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 6e5ccab7f9..5e56f59425 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -154,7 +154,6 @@ module.exports = React.createClass({
 
     render: function() {
         const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
         let searchStatus = null;
@@ -228,8 +227,10 @@ module.exports = React.createClass({
 
         if (this.props.onSettingsClick) {
             settingsButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/settings.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
+                    onClick={this.props.onSettingsClick}
+                    title={_t("Settings")}
+                >
                 </AccessibleButton>;
         }
 
@@ -245,7 +246,6 @@ module.exports = React.createClass({
                 <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
                                   onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
                     { pinsIndicator }
-                    <TintableSvg src={require("../../../../res/img/icons-pin.svg")} width="16" height="16" />
                 </AccessibleButton>;
         }
 
@@ -260,24 +260,30 @@ module.exports = React.createClass({
         let forgetButton;
         if (this.props.onForgetClick) {
             forgetButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
-                    <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20" />
+                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
+                    onClick={this.props.onForgetClick}
+                    title={_t("Forget room")}
+                >
                 </AccessibleButton>;
         }
 
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/search.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_searchButton"
+                    onClick={this.props.onSearchClick}
+                    title={_t("Search")}
+                >
                 </AccessibleButton>;
         }
 
         let shareRoomButton;
         if (this.props.inRoom) {
             shareRoomButton =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/share.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_shareButton"
+                    onClick={this.onShareRoomClick}
+                    title={_t('Share room')}
+                >
                 </AccessibleButton>;
         }