Improve styling of hypothes.is plugin - Githubissues

mozilla / internet-health-report

MIT License

5 stars 9 forks source link

Improve styling of hypothes.is plugin #32

Closed kristinashu closed 7 years ago

kristinashu commented 7 years ago

hypothes.is plugin is an annotation and note plugin used on Report v0.1

We would like to continue to use it on our landing page and the next report but want to improve it's usability (current styling is not noticeable enough).

To do this we will:

[ ] review current feedback and critique of the tool
[ ] design an improved version
[ ] build it
[ ] test it

kristinashu commented 7 years ago

Design recommendations:

https://redpen.io/og6a82f5320eead856

update highlight color and side panel color so they both have the same color, in order to correlate the two
make sure the tool color is different than page's CTA colors (e.g both highlight color and link underline color in v0.1 is yellow which is confusing)
increase size and style of icons
add copy below the title to point our how many annotations there are (clicking on it would open the side panel) - probably not technically possible

Mavis looked into technical side of it:

we can update styling via our own CSS (not the plugin's config)
icons, icon sizes, and highlight color can be updated (color can definitely be updated http://h.readthedocs.io/projects/client/en/latest/publishers/config/#cmdoption-arg-branding)
we should avoid changing the order of the icons because that would involve hacky JS
reference http://h.readthedocs.io/projects/client/en/latest/publishers/config/