Implement New Icons to Indicate Filter State

[entrotech]

Overview

• In order to make the change requested by Design on Issue #1837, we need to change the filter icons that indicate the "state" of each column filter in the column heading

Action Items

• Replace the filters per the instructions in Issue #1837. Make sure to reference the theme for colors (instead of hard-coding hex values), and use the react-icons library to import the icons, e.g. import { MdFilterAlt } from "react-icons/md"; and import {MdOutlineFilterAlt } from "react-icons/md";
• This change should only require changes to the ProjectTableColumnHeader.jsx component.

Resources/Instructions

[roslynwythe]

Update: I completed the issue but when I brought in recent changes from the develop branch, I have a problem:

Module not found: Error: Can't resolve 'react-tiny-popover' in 'C:\Users\rosly\hfla\tdm-calc\client\src\components\Projects\ColumnHeaderPopups'

I ran npm i react-tiny-popover from the client folder and this is the result:

rosly@DESKTOP-IP18TPE MINGW64 ~/hfla/tdm-calc/client (develop)
$ npm i react-tiny-popover
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.8.1" from [email protected]
npm ERR!     node_modules/react-select
npm ERR!       react-select@"^5.2.2" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/use-insertion-effect-with-fallbacks
npm ERR!     @emotion/use-insertion-effect-with-fallbacks@"^1.0.1" from @emotion/[email protected]
npm ERR!     node_modules/@emotion/react
npm ERR!       @emotion/react@"^11.8.1" from [email protected]
npm ERR!       node_modules/react-select
npm ERR!         react-select@"^5.2.2" from the root project
npm ERR!   33 more (@react-pdf/renderer, @testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-loader
npm ERR!   react-loader@"^2.4.7" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR!   node_modules/react-loader
npm ERR!     react-loader@"^2.4.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!