From 31682b61ce8686548f3b258de25ccd7925570e4a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 10 Sep 2019 10:58:44 +0200
Subject: [PATCH] make filter feed transparent when not focussed

---
 res/css/structures/_SearchBox.scss     | 4 ++++
 src/components/structures/SearchBox.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss
index 7d13405478..23ee06f7b3 100644
--- a/res/css/structures/_SearchBox.scss
+++ b/res/css/structures/_SearchBox.scss
@@ -18,6 +18,10 @@ limitations under the License.
     flex: 1 1 0;
     min-width: 0;
 
+    &.mx_SearchBox_blurred:not(:hover) {
+        background-color: transparent;
+    }
+
     .mx_SearchBox_closeButton {
         cursor: pointer;
         background-image: url('$(res)/img/icons-close.svg');
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 34efb5b50f..a95cb74a8d 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -139,7 +139,7 @@ module.exports = React.createClass({
             this.props.placeholder;
         const className = this.props.className || "";
         return (
-            <div className="mx_SearchBox mx_textinput">
+            <div className={classNames("mx_SearchBox", "mx_textinput", {"mx_SearchBox_blurred": this.state.blurred})}>
                 <input
                     key="searchfield"
                     type="text"