From 6c954dadc852dcccd8a46d1e8d3527d7d52985cb Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 12 Feb 2019 18:05:19 +0000
Subject: [PATCH] Allow theming message composer buttons

---
 res/css/views/rooms/_MessageComposer.scss     | 43 +++++++++++--------
 res/themes/dark/css/_dark.scss                |  1 +
 res/themes/dharma/css/_dharma.scss            |  1 +
 src/components/views/rooms/MessageComposer.js | 30 ++++++++-----
 src/components/views/rooms/Stickerpicker.js   | 13 +++---
 5 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 7ee7efcaff..db8eb4995d 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -180,27 +180,36 @@ limitations under the License.
     color: $accent-color;
 }
 
-.mx_MessageComposer_upload,
-.mx_MessageComposer_hangup,
-.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall,
-.mx_MessageComposer_apps,
-.mx_MessageComposer_stickers {
-    /*display: table-cell;*/
-    /*vertical-align: middle;*/
-    /*padding-left: 10px;*/
-    padding-right: 12px;
+.mx_MessageComposer_button {
+    margin-right: 12px;
     cursor: pointer;
     padding-top: 4px;
+    height: 20px;
+    width: 20px;
+    background-color: $composer-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-position: center;
 }
 
-.mx_MessageComposer_upload object,
-.mx_MessageComposer_hangup object,
-.mx_MessageComposer_voicecall object,
-.mx_MessageComposer_videocall object,
-.mx_MessageComposer_apps object,
-.mx_MessageComposer_stickers object {
-    pointer-events: none;
+.mx_MessageComposer_upload {
+    mask-image: url('$(res)/img/feather-icons/paperclip.svg');
+}
+
+.mx_MessageComposer_hangup {
+    mask-image: url('$(res)/img/hangup.svg');
+}
+
+.mx_MessageComposer_voicecall {
+    mask-image: url('$(res)/img/feather-icons/phone.svg');
+}
+
+.mx_MessageComposer_videocall {
+    mask-image: url('$(res)/img/feather-icons/video.svg');
+}
+
+.mx_MessageComposer_stickers {
+    mask-image: url('$(res)/img/feather-icons/face.svg');
 }
 
 .mx_MessageComposer_formatting {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 41aaeae50a..a8f1ae49e2 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -79,6 +79,7 @@ $tagpanel-button-color: $header-panel-text-primary-color;
 $roomheader-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
+$composer-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 7cc6a2ce88..b4626eb7c3 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -149,6 +149,7 @@ $tagpanel-button-color: #91A1C0;
 $roomheader-button-color: #91A1C0;
 $groupheader-button-color: #91A1C0;
 $rightpanel-button-color: #91A1C0;
+$composer-button-color: #91A1C0;
 $roomtopic-color: #9fa9ba;
 $eventtile-meta-color: $roomtopic-color;
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 7117825d76..10142b2b4b 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -306,7 +306,6 @@ export default class MessageComposer extends React.Component {
     render() {
         const uploadInputStyle = {display: 'none'};
         const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
         const controls = [];
@@ -335,17 +334,26 @@ export default class MessageComposer extends React.Component {
         // Call buttons
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
-                <AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
-                    <img src={require("../../../../res/img/hangup.svg")} alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
+                    key="controls_hangup"
+                    onClick={this.onHangupClick}
+                    title={_t('Hangup')}
+                >
                 </AccessibleButton>;
         } else {
             callButton =
-                <AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/phone.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_voicecall"
+                    key="controls_call"
+                    onClick={this.onVoiceCallClick}
+                    title={_t('Voice call')}
+                >
                 </AccessibleButton>;
             videoCallButton =
-                <AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/video.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_videocall"
+                    key="controls_videocall"
+                    onClick={this.onCallClick}
+                    title={_t('Video call')}
+                >
                 </AccessibleButton>;
         }
 
@@ -385,9 +393,11 @@ export default class MessageComposer extends React.Component {
             // check separately for whether we can call, but this is slightly
             // complex because of conference calls.
             const uploadButton = (
-                <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
-                        onClick={this.onUploadClick} title={_t('Upload file')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/paperclip.svg")} width="20" height="20" />
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_upload"
+                    key="controls_upload"
+                    onClick={this.onUploadClick}
+                    title={_t('Upload file')}
+                >
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 188b42622a..c9f3195b08 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -322,7 +322,6 @@ export default class Stickerpicker extends React.Component {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const ContextualMenu = sdk.getComponent('structures.ContextualMenu');
         const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
         let stickersButton;
@@ -348,11 +347,11 @@ export default class Stickerpicker extends React.Component {
                 <AccessibleButton
                     id='stickersButton'
                     key="controls_hide_stickers"
-                    className="mx_MessageComposer_stickers mx_Stickers_hideStickers"
+                    className="mx_MessageComposer_button mx_MessageComposer_stickers mx_Stickers_hideStickers"
                     onClick={this._onHideStickersClick}
                     ref='target'
-                    title={_t("Hide Stickers")}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
+                    title={_t("Hide Stickers")}
+                >
                 </AccessibleButton>;
         } else {
             // Show show-stickers button
@@ -360,10 +359,10 @@ export default class Stickerpicker extends React.Component {
                 <AccessibleButton
                     id='stickersButton'
                     key="controls_show_stickers"
-                    className="mx_MessageComposer_stickers"
+                    className="mx_MessageComposer_button mx_MessageComposer_stickers"
                     onClick={this._onShowStickersClick}
-                    title={_t("Show Stickers")}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
+                    title={_t("Show Stickers")}
+                >
                 </AccessibleButton>;
         }
         return <div>