From 59d405d4fa20bc9063449b1f0fd649709e9a20a5 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 15 Nov 2017 13:24:38 +0000
Subject: [PATCH] Use TintableSvgButtons for widget menubar icons.

---
 src/components/views/elements/AppTile.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index aa781c2d62..8b9f1f2cd9 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -22,6 +22,7 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
+import TintableSvgButton from './TintableSvgButton';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t, _td } from '../../../languageHandler';
@@ -371,8 +372,8 @@ export default React.createClass({
         // editing is done in scalar
         const showEditButton = Boolean(this._scalarClient && this._canUserModify());
         const deleteWidgetLabel = this._deleteWidgetLabel();
-        let deleteIcon = 'img/cancel.svg';
-        let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget';
+        let deleteIcon = 'img/cancel_green.svg';
+        let deleteClasses = 'mx_AppTileMenuBarWidget';
         if(this._canUserModify()) {
             deleteIcon = 'img/icon-delete-pink.svg';
             deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
@@ -384,22 +385,19 @@ export default React.createClass({
                     <b>{ this.formatAppTileName() }</b>
                     <span className="mx_AppTileMenuBarWidgets">
                         { /* Edit widget */ }
-                        { showEditButton && <img
+                        { showEditButton && <TintableSvgButton
                             src="img/edit_green.svg"
                             className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
-                            width="8" height="8"
-                            alt={_t('Edit')}
                             title={_t('Edit')}
                             onClick={this._onEditClick}
                         /> }
 
                         { /* Delete widget */ }
-                        <img src={deleteIcon}
-                        className={deleteClasses}
-                        width="8" height="8"
-                        alt={_t(deleteWidgetLabel)}
-                        title={_t(deleteWidgetLabel)}
-                        onClick={this._onDeleteClick}
+                        <TintableSvgButton
+                            src={deleteIcon}
+                            className={deleteClasses}
+                            title={_t(deleteWidgetLabel)}
+                            onClick={this._onDeleteClick}
                         />
                     </span>
                 </div>