Make filtered state of columns more apparent

Summary: People complained about barely noticeable filtered state indication multiple times

Reviewed By: antonk52

Differential Revision: D45394233

fbshipit-source-id: 60a3531b1808ae8f95ce8cd405a20b74bad0ed46

desktop/flipper-plugin/src/ui/data-table/ColumnFilter.tsx

@@ -20,6 +20,7 @@ import {
   Switch,
 } from 'antd';
 import {
+  FilterFilled,
   FilterOutlined,
   MinusCircleOutlined,
   PlusCircleOutlined,
@@ -198,7 +199,7 @@ export function FilterIcon({
   return (
     <Dropdown overlay={menu} trigger={['click']}>
       <FilterButton isActive={isActive}>
-        <FilterOutlined />
+        {isActive ? <FilterFilled /> : <FilterOutlined />}
       </FilterButton>
     </Dropdown>
   );
@@ -207,7 +208,7 @@ export function FilterIcon({
 export const FilterButton = styled.div<{isActive?: boolean}>(({isActive}) => ({
   backgroundColor: theme.backgroundWash,
   visibility: isActive ? 'visible' : 'hidden',
-  color: isActive ? theme.textColorActive : theme.disabledColor,
+  color: isActive ? theme.primaryColor : theme.disabledColor,
   cursor: 'pointer',
   marginRight: 4,
   zIndex: 1,

desktop/flipper-plugin/src/ui/data-table/TableHead.tsx

@@ -194,7 +194,13 @@ function TableHeadColumn({
   let children = (
     <Layout.Right center>
       <div {...divProps}>
-        <Text type="secondary">
+        <Text
+          type="secondary"
+          style={
+            column.filters?.filter(({enabled}) => enabled).length
+              ? {color: theme.primaryColor, fontWeight: 'bold'}
+              : {}
+          }>
           {column.title === undefined ? (
             toFirstUpper(column.key)
           ) : column.title === '' ? (