From c811c30c0dd525aafa91409a19c3d3982535f200 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 14 Jun 2018 11:36:04 +0100
Subject: [PATCH 1/2] fix styling of clearButton when its not there

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_TagPanel.scss     | 2 +-
 src/components/structures/TagPanel.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index ab1d4feac3..a76c04805d 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -25,7 +25,7 @@ limitations under the License.
     justify-content: space-between;
 }
 
-.mx_TagPanel .mx_TagPanel_clearButton {
+.mx_TagPanel .mx_TagPanel_clearButton_container {
     /* Constant height within flex mx_TagPanel */
     height: 70px;
     width: 60px;
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 77259c863d..6b6b09c5dc 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -127,7 +127,9 @@ const TagPanel = React.createClass({
         }
 
         return <div className="mx_TagPanel">
-            { clearButton }
+            <div className="mx_TagPanel_clearButton_container">
+                { clearButton }
+            </div>
             <div className="mx_TagPanel_divider" />
             <GeminiScrollbarWrapper
                 className="mx_TagPanel_scroller"

From 3b501137a58f5f08a5c3e08c0249a114d7a87026 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 14 Jun 2018 11:42:21 +0100
Subject: [PATCH 2/2] change cursor:pointer iff clicking TagPanel background
 does something

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_TagPanel.scss     |  5 ++++-
 src/components/structures/TagPanel.js | 13 ++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index a76c04805d..415aafd924 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_TagPanel {
     flex: 0 0 60px;
     background-color: $tertiary-accent-color;
-    cursor: pointer;
 
     display: flex;
     flex-direction: column;
@@ -25,6 +24,10 @@ limitations under the License.
     justify-content: space-between;
 }
 
+.mx_TagPanel_items_selected {
+    cursor: pointer;
+}
+
 .mx_TagPanel .mx_TagPanel_clearButton_container {
     /* Constant height within flex mx_TagPanel */
     height: 70px;
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 6b6b09c5dc..652211595b 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 2018 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +26,7 @@ import dis from '../../dispatcher';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
 
 const TagPanel = React.createClass({
     displayName: 'TagPanel',
@@ -116,8 +117,10 @@ const TagPanel = React.createClass({
             />;
         });
 
+        const itemsSelected = this.state.selectedTags.length > 0;
+
         let clearButton;
-        if (this.state.selectedTags.length > 0) {
+        if (itemsSelected) {
             clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
                 <TintableSvg src="img/icons-close.svg" width="24" height="24"
                              alt={_t("Clear filter")}
@@ -126,7 +129,11 @@ const TagPanel = React.createClass({
             </AccessibleButton>;
         }
 
-        return <div className="mx_TagPanel">
+        const classes = classNames('mx_TagPanel', {
+            mx_TagPanel_items_selected: itemsSelected,
+        });
+
+        return <div className={classes}>
             <div className="mx_TagPanel_clearButton_container">
                 { clearButton }
             </div>