Merge pull request #1540 from matrix-org/luke/fix-dark-theme-cancel-icon

Use correct icon for group room deletion and make themeable

src/components/structures/UserSettings.js

@@ -1332,8 +1332,11 @@ module.exports = React.createClass({
 
                     <div className="mx_UserSettings_avatarPicker">
                         <div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                            <img src="img/cancel.svg" width="15" height="15"
-                                 alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                            <img src="img/cancel.svg"
+                                width="15" height="15"
+                                className="mx_filterFlipColor"
+                                alt={_t("Remove avatar")}
+                                title={_t("Remove avatar")} />
                         </div>
                         <div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">
                             <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}

src/components/views/groups/GroupMemberInfo.js

@@ -173,7 +173,7 @@ module.exports = withMatrixClient(React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbar autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" />
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         { avatar }

src/components/views/groups/GroupRoomTile.js

@@ -120,8 +120,11 @@ const GroupRoomTile = React.createClass({
                 <div className="mx_GroupRoomTile_name">
                     { this.state.name }
                 </div>
-                <AccessibleButton className="mx_GroupRoomTile_delete" onClick={this.onDeleteClick}>
-                    <img src="img/cancel-small.svg" />
+                <AccessibleButton className="mx_GroupRoomTile_delete"
+                    onClick={this.onDeleteClick}
+                    tooltip={_t("Remove this room from the community")}
+                >
+                    <img src="img/cancel.svg" width="15" height="15" className="mx_filterFlipColor" />
                 </AccessibleButton>
             </AccessibleButton>
         );

src/components/views/rooms/LinkPreviewWidget.js

@@ -133,8 +133,9 @@ module.exports = React.createClass({
                         { p["og:description"] }
                     </div>
                 </div>
-                <img className="mx_LinkPreviewWidget_cancel" src="img/cancel.svg" width="18" height="18"
-                     onClick={this.props.onCancelClick} />
+                <img className="mx_LinkPreviewWidget_cancel mx_filterFlipColor"
+                    src="img/cancel.svg" width="18" height="18"
+                    onClick={this.props.onCancelClick} />
             </div>
         );
     },

src/components/views/rooms/PinnedEventsPanel.js

@@ -95,7 +95,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_PinnedEventsPanel">
                 <div className="mx_PinnedEventsPanel_body">
-                    <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                    <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}>
+                        <img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18" />
+                    </AccessibleButton>
                     <h3 className="mx_PinnedEventsPanel_header">{ _t("Pinned Messages") }</h3>
                     { tiles }
                 </div>

src/components/views/rooms/RoomHeader.js

@@ -281,8 +281,11 @@ module.exports = React.createClass({
                         <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                     </div>
                     <div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                        <img src="img/cancel.svg" width="10"
-                             alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                        <img src="img/cancel.svg"
+                            className="mx_filterFlipColor"
+                            width="10"
+                            alt={_t("Remove avatar")}
+                            title={_t("Remove avatar")} />
                     </div>
                 </div>
             );

src/i18n/strings/en_EN.json

@@ -239,6 +239,7 @@
     "Unignore": "Unignore",
     "Ignore": "Ignore",
     "Jump to read receipt": "Jump to read receipt",
+    "Invite": "Invite",
     "User Options": "User Options",
     "Direct chats": "Direct chats",
     "Unmute": "Unmute",
@@ -249,7 +250,6 @@
     "Level:": "Level:",
     "and %(count)s others...|other": "and %(count)s others...",
     "and %(count)s others...|one": "and one other...",
-    "Invite": "Invite",
     "Invited": "Invited",
     "Filter room members": "Filter room members",
     "%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)",
@@ -495,6 +495,7 @@
     "Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?",
     "Removing a room from the community will also remove it from the community page.": "Removing a room from the community will also remove it from the community page.",
     "Remove": "Remove",
+    "Remove this room from the community": "Remove this room from the community",
     "Unknown Address": "Unknown Address",
     "NOTE: Apps are not end-to-end encrypted": "NOTE: Apps are not end-to-end encrypted",
     "Do you want to load widget from URL:": "Do you want to load widget from URL:",