ui: table - add a visual indicator when the global filter is enabled

[christophercr]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

When the global filter is enabled in the table component, there is no indicator whatsoever about such filtering, which might be confusing for the end user when the data in the table is refreshed and he might expect to see all the rows but he will only see the filtered ones.

Expected behavior

A visual indicator should be in place so the user knows that he as the global filter enabled. This is already the case for column filters: the filter icon is gray or black when it is disabled or enabled.

Something similar can be applied to the global filter button, but in that case it could be blue when enabled and black when disabled. Like in the Network tab in Chrome Dev tools:

Minimal reproduction of the problem with instructions

1. Go to https://stark.nbb.be/showcase/latest/demo-ui/table and enable the global filter in any of the tables.
2. Click on any action, paginate the data, etc. There is no clear indication that the global filter is enabled.

What is the motivation / use case for changing the behavior?

Better UX.

Environment

Stark version: 10.0.0-beta.7

[christophercr]

As discussed with @SuperITMan, to keep consistency, we will apply the same color change as we do with the filter icon in the columns (black when the filter is applied and gray when it is not).