updates to visual styling of category selection UI

[indirectlylit]

Observed behavior

Following up from #8703 (comment) (cc @jtamiace @marcellamaki)

Notes on the current styling of category selection:

1. Icons are small
2. Side nav hover states have no transition, and modal clickable item hover states have a very slow transition
3. Modal clickable items have a low-contrast hover styling and don't reflect current filter state

Expected behavior

1. Icons should be bigger

2. Standard transitions on hover states

See our common hover timing functions:

https://github.com/learningequality/kolibri-design-system/blob/da045a48f9bb76a72b37565cb9b9f1386e48a83d/lib/styles/definitions.scss#L22-L30

and Material Design guidance on easing curves:

https://material.io/design/motion/speed.html#easing

3. Updates to modal clickable items

• Similar feedback as library side-nav items don't look like clickable folder nav items #8631 – propose that we use hover states similar to other nav and menu items for higher contrast and consistency
• When a filter item is already selected, this should be reflected in the modal. Clicking it again should remove that filter.

User-facing consequences

Category selection modals are a bit less polished than than they could be.

Context

0.15.0-beta2

[StarTrooper08]

Hey @indirectlylit , can I try to solve this issue?
I probably need some help at some point!!

[sharifmaryam]

hello, I thought I could solve the first issue of the icons being too small by making a change to the width and height in a index.vue file inside of the node_modules folder but I noticed that the node_modules folder is in the gitignore file so I was wondering if there was a different place in which these elements can be changed?

[indirectlylit]

Hi @StarTrooper08 and @sharifmaryam – we've just added a new 'codebase contributions' section of our community forum!

https://community.learningequality.org/c/connections-contributions/kolibri-codebase-contributions/31

if you'd like some help understanding how the code base works, feel free to post your questions there, and thank you in advance for your contributions!

[marcellamaki]

Icons improved with #8938

[rtibbles]

Remaining feedback was resolved with updates in #10986