Allow theming message composer buttons

res/css/views/rooms/_MessageComposer.scss

@@ -180,27 +180,36 @@ limitations under the License.
     color: $accent-color;
 }
 
-.mx_MessageComposer_upload,
+.mx_MessageComposer_button {
-.mx_MessageComposer_hangup,
+    margin-right: 12px;
-.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall,
-.mx_MessageComposer_apps,
-.mx_MessageComposer_stickers {
-    /*display: table-cell;*/
-    /*vertical-align: middle;*/
-    /*padding-left: 10px;*/
-    padding-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_upload {
-.mx_MessageComposer_hangup object,
+    mask-image: url('$(res)/img/feather-icons/paperclip.svg');
-.mx_MessageComposer_voicecall object,
+}
-.mx_MessageComposer_videocall object,
+
-.mx_MessageComposer_apps object,
+.mx_MessageComposer_hangup {
-.mx_MessageComposer_stickers object {
+    mask-image: url('$(res)/img/hangup.svg');
-    pointer-events: none;
+}
+
+.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 {

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;
 

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;
 

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}>
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_hangup"
-                    <img src={require("../../../../res/img/hangup.svg")} alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
+                    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')}>
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_voicecall"
-                    <TintableSvg src={require("../../../../res/img/feather-icons/phone.svg")} width="20" height="20" />
+                    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')}>
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_videocall"
-                    <TintableSvg src={require("../../../../res/img/feather-icons/video.svg")} width="20" height="20" />
+                    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"
+                <AccessibleButton className="mx_MessageComposer_button mx_MessageComposer_upload"
-                        onClick={this.onUploadClick} title={_t('Upload file')}>
+                    key="controls_upload"
-                    <TintableSvg src={require("../../../../res/img/feather-icons/paperclip.svg")} width="20" height="20" />
+                    onClick={this.onUploadClick}
+                    title={_t('Upload file')}
+                >
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple

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")}>
+                    title={_t("Hide Stickers")}
-                    <TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
+                >
                 </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")}>
+                    title={_t("Show Stickers")}
-                    <TintableSvg src={require("../../../../res/img/feather-icons/face.svg")} width="20" height="20" />
+                >
                 </AccessibleButton>;
         }
         return <div>