Left filters - Organise filters and make them visually consistent

[yochannah]

Can we re-order the filters? Right now we have:

1. GO
2. Dataset
3. Pathway
4. Clear filters
5. Organism Short Name

Ideally all buttons that have the same behaviour should have the same colouring and format, and buttons that behave differently should be visually distinct. In this case, GO, dataset, pathway, and organism all have filtering behaviour, whereas Clear filter removes filters.

Could we do something more like:

1. GO
2. Dataset
3. Pathway
4. Organism Short Name
   ================== <-- some sort of visual separator here, e.g. a thicker border perhaps
5. Clear filters <-- this button should probably be a slightly different colour. NOT red or orange as these will draw the eye more than the other buttons, which is not our intent. Slightly more grey would perhaps be a better option.

[AdrianBZG]

@yochannah What about now? http://im-browser-prototype.herokuapp.com/

[yochannah]

The order is better and I like the colouring of the clear filters button!

A few things to improve:

• let's make organism be the same font and colour as the rest of the filters (you can read more about why consistency matters if you like)
• the gap between the clear filter button and the others looks like a text input field to me so I tried clicking on it 😆 in case anyone else is as silly as me, maybe have the whole gap be ~3px high or just remove the border and make it the same colour as the main sidebar background colour below.
• Please try to avoid inline styles in the code; they are much harder to maintain than a separate stylesheet.
• Also don't forget to check how it works in smaller screens:

Overall it does already look much better, though!

[AdrianBZG]

@yochannah What about now? Im not very good with this consistency things because I'm more a back-end person 🤣 🤣

http://im-browser-prototype.herokuapp.com/

[yochannah]

This is much better! The only thing I'd change is the rounded corners of the separator - just remove the border-radius entirely or set it to 0 and it'd be great.

And you're learning front-end stuff very nicely! After this you'll be able to add your L33t front-end skills to your CV ;)

[AdrianBZG]

@yochannah hahahaha 😆 thanks!

Done: http://im-browser-prototype.herokuapp.com/

If everything is ok, you can close this issue 😉