[Feature] Clean up filterbar appearance in transitional styles

[zackkrida]

The current filterbar is particularly unpleasant with odd font sizes. As this is such a commonly-used feature, we should clean it up a bit to better reflect the mockup.

Mockup

• Figma: https://www.figma.com/file/Eaed5TMmqTrscI6WbjeJxP/Transitional-styles-(Copy)?node-id=0%3A1

Current appearance

Tasks

• Filter heading size
• Filter heading spacing
• " Filter results by " and "hide filters" should be vertically centered
• Remove horizontal dividers between filters
• New sidebar icon (use SVGs please)
• Increase checkbox size
  • optional and related: [Feature] Use css accent-color for ui control styling #222
• Related: [Bug] Fix transitional button style #226

Sizes

Additionally, the filter headings should be:

font-size: 1rem;
font-weight: 600;

[DillonKyleDev]

Hi!
I'm new to contributing to open source and want to help. Forgive the silly question but how do I find the specific scss file for the filter bar?
Thank you!

[zackkrida]

Hi @DillonKyleDev, and welcome! 🎉 I think you'll have to use a bit of trial and error. The Filter sidebar uses some global styles as well as styles within the component.

This is the main Vue file for the filters, and might be a good place for you to start exploring:

https://github.com/WordPress/openverse-frontend/blob/db693f08f2046c24808addf9f2636352d010e062/src/components/Filters/FiltersList.vue

Also, if you do not have the project running locally, this would be a great thing to read: https://github.com/WordPress/openverse-frontend#local-development

[DillonKyleDev]

@zackkrida you are so right, I'll figure it out! Thanks for the nudge in the right direction :)

[zackkrida]

@DillonKyleDev have fun 😄 If you need help, we also have a slack channel that you'll be able to view after signing up here where other contributors can help you out!

[DillonKyleDev]

Good morning!
I was wondering if you could somehow give me access to the figma links that are posted in both this issue and in the issue linked in task number 7? For some reason I'm not able to view either of them, but I'm not familiar with figma.

Also I was curious about the task:

New sidebar icon (use SVGs please)

Which icon needs replacing?

Thanks for your patience!