From 37417eaba1a4cfbbe78672ddc044fca7c8410b54 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 9 Feb 2022 14:58:46 +0100
Subject: [PATCH] feat(ui) - metric filter button hover color

---
 .../app/components/shared/FilterDropdown/filterDropdown.css   | 4 ++++
 .../components/shared/MetricsFilters/FilterItem/FilterItem.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/FilterDropdown/filterDropdown.css b/frontend/app/components/shared/FilterDropdown/filterDropdown.css
index 976a0d233..5ebcbcb65 100644
--- a/frontend/app/components/shared/FilterDropdown/filterDropdown.css
+++ b/frontend/app/components/shared/FilterDropdown/filterDropdown.css
@@ -3,6 +3,10 @@
   padding: 0 10px;
   &:hover {
     background-color: $gray-light;
+    color: white;
+    & svg {
+      fill: white;
+    }
   }
 }
 
diff --git a/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js b/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
index aa235f2fe..249eb6ae6 100644
--- a/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
+++ b/frontend/app/components/shared/MetricsFilters/FilterItem/FilterItem.js
@@ -55,7 +55,7 @@ const FilterItem = props => {
           <div className="bg-white rounded-full p-1 px-3 mr-2">
             <div className="flex items-center">
               <span className="mr-2 color-gray-darkest">{f.text || f.value}</span>
-              <Icon className="cursor-pointer" size="18" name="close" onClick={() => props.removeFilter(f)} />
+              <Icon className="cursor-pointer" size="12" name="close" onClick={() => props.removeFilter(f)} />
             </div>
           </div>
         ))}