New filter panel UX elements design

[lcd2yyz]

To do after implementation of functional element for the filter panel refactor

Comprehensive review of UX designs for the new filter panel, including but not limited to the following

• Color schemes, working with bootstrap theming
• Consistency in fonts and fontsizes
• UX behavior (eg. color highlights, mouse cursor change)
• Spatial arrangements of various UI elements (eg. margins, spacing)
• Buttons/icons

Collection of existing issues

• Add mouseover behavior for filter card when selected teal.slice#209
• Style the filter panel teal.slice#213
• Filter panel collapse icons can be incorrect teal.slice#239
• Enable bootstrap theming colors for all UI components of the filter panel teal.slice#252
• Update filter card css teal.slice#263
• Should filters be removable if filter panel is disabled? teal.slice#269
• Support only minimum version of Bootstrap teal#802
• Aesthetics of range selector and UX review teal.slice#320
• checkbox labels are not properly aligned in the center with respect to the checkboxes. teal.slice#338
• [Feature Request]: UX improvements on snapshot/filter manager teal#883
• [Feature Request Idea]: moving dataset selection to sidebar in tm_missing_data teal.modules.general#575

Update from Aug 2023
We will be getting an UX designer to conduct an UI/UX review for teal and teal modules within 2023/PI4 (Aug-Oct), so there may be more issues based on the finding from the review

[chlebowa]

disable filter card body is not a UX issue.

[donyunardi]

I moved the unfinished issue here to insightsengineering/teal#1289
Closing.