From e024267447099f6f2f70c32063f642a4a9f3742c Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Wed, 28 Oct 2020 19:44:39 -0700
Subject: [PATCH] fix: Unwinds icon fallout that came along with filters PR
 (#11474)

* Unwinds icon revamp that came along with filters PR.

* cleanup/linting

* removing unused import
---
 superset-frontend/src/components/Icon/index.tsx | 17 +----------------
 .../components/FiltersBadge/Styles.tsx          | 10 +++++++++-
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/components/Icon/index.tsx b/superset-frontend/src/components/Icon/index.tsx
index 2ba1aa2b9f..d733751e07 100644
--- a/superset-frontend/src/components/Icon/index.tsx
+++ b/superset-frontend/src/components/Icon/index.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import React, { SVGProps } from 'react';
-import { styled } from '@superset-ui/core';
 
 import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg';
 import { ReactComponent as AlertIcon } from 'images/icons/alert.svg';
@@ -380,18 +379,6 @@ interface IconProps extends SVGProps<SVGSVGElement> {
   name: IconName;
 }
 
-const IconWrapper = styled.span`
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  svg {
-    width: 100%;
-    height: 100%;
-    color: currentColor;
-    vertical-align: middle;
-  }
-`;
-
 const Icon = ({
   name,
   color = '#666666',
@@ -401,9 +388,7 @@ const Icon = ({
   const Component = iconsRegistry[name];
 
   return (
-    <IconWrapper>
-      <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
-    </IconWrapper>
+    <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
   );
 };
 
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index ba6e358e61..4039fdc033 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -20,8 +20,8 @@ import { styled } from '@superset-ui/core';
 
 export const Pill = styled.div`
   display: inline-block;
-  background: ${({ theme }) => theme.colors.grayscale.base};
   color: ${({ theme }) => theme.colors.grayscale.light5};
+  background: ${({ theme }) => theme.colors.grayscale.base};
   border-radius: 1em;
   vertical-align: text-top;
   padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`};
@@ -36,6 +36,11 @@ export const Pill = styled.div`
   svg {
     position: relative;
     top: -1px;
+    color: ${({ theme }) => theme.colors.grayscale.light5};
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    vertical-align: middle;
   }
 
   &:hover {
@@ -49,6 +54,9 @@ export const Pill = styled.div`
     &:hover {
       background: ${({ theme }) => theme.colors.alert.dark1};
     }
+    svg {
+      color: ${({ theme }) => theme.colors.grayscale.dark2};
+    }
   }
 
   &.filters-inactive {