From 3554fe9eb4f68cc166f21a64365855a7c5a15252 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 20 Oct 2019 21:55:00 +0200
Subject: [PATCH] Show Searchbar clear button only when text is entered

---
 client/modules/IDE/components/Searchbar.jsx | 2 +-
 client/styles/components/_searchbar.scss    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Searchbar.jsx b/client/modules/IDE/components/Searchbar.jsx
index 4f5f350e..771bdf82 100644
--- a/client/modules/IDE/components/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar.jsx
@@ -46,7 +46,7 @@ class Searchbar extends React.Component {
   render() {
     const { searchValue } = this.state;
     return (
-      <div className="searchbar">
+      <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
         <button
           type="submit"
           className="searchbar__button"
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 62156743..93e9bbe9 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -68,3 +68,7 @@ button[type="submit"].searchbar__button {
     }
   }
 }
+
+.searchbar--is-empty .searchbar__clear-button {
+  display: none;
+}