From fcf126c0cb8d445c4eb820a39d73678872aeeb04 Mon Sep 17 00:00:00 2001
From: Tabatha Zeitke <tzeitke@newrelic.com>
Date: Thu, 28 Apr 2022 17:07:09 -0700
Subject: [PATCH] feat: fix overlapping search bar icons

---
 src/components/IOBanner.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
index c97c5279..41c1812b 100644
--- a/src/components/IOBanner.js
+++ b/src/components/IOBanner.js
@@ -87,6 +87,12 @@ const BannerHeaderContent = ({ search, setSearch, setIsSearchInputEmpty }) => {
             padding-left: 0.5rem;
             margin: 0 auto 40px;
             height: 64px;
+            ${search.length > 0 &&
+            css`
+              > svg {
+                display: none;
+              }
+            `};
 
             input {
               height: 64px;
@@ -95,6 +101,7 @@ const BannerHeaderContent = ({ search, setSearch, setIsSearchInputEmpty }) => {
               background: #1d252c;
               border: 1px solid #f9fafa;
               border-radius: 4px;
+              color: #f9fafa;
               &::placeholder {
                 color: var(--color-neutrals-600);
               }