From 647bc06f3ad9661c30990e21aca3a52d5945d1b5 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Fri, 28 Apr 2023 12:19:45 -0700
Subject: [PATCH] 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 | 5 +++--
 desktop/flipper-plugin/src/ui/data-table/TableHead.tsx    | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/ColumnFilter.tsx b/desktop/flipper-plugin/src/ui/data-table/ColumnFilter.tsx
index 06f9def16..e696e5699 100644
--- a/desktop/flipper-plugin/src/ui/data-table/ColumnFilter.tsx
+++ b/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,
diff --git a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx
index aa646a361..fc0dd9085 100644
--- a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx
+++ b/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 === '' ? (