The client's "Annotations / Page Notes / Orphans" tabs have usability issues

The sidebar has a set of 2-3 of what our code calls "selection tabs" at the top for switching the view between annotations, page notes and orphans:


(The orphans tab only appears when there are orphans, the other two tabs are there all the time whether there are annotations or page notes or not.)

A number of usability issues have been identified with these, including:

* The buttons are small and hard to click (not good for people with fine pointer control issues, or for touch or mobile)

* Not immediately familiar or recognisable, which may make the interface harder to use and slower to learn. The tabs don't look like tabs or buttons, and they don't look like links either (they aren't blue or purple or underlined like most links on the web, or bold like other links in our sidebar).

* Because bold text is used to indicate the currently selected tab, when you click on a different tab the other tabs jump around horizontally (as can be seen in the gif above).

* It's not compatible with the customisable branding feature that we're developing for the client. Since the background colour of the client is now customisable, these tabs don't play well with other background colours. eLife explicitly called out that the tabs are awkward with their white background. The team on our side agreed. This addresses that problem as the centered button group makes less assumptions about the background and would play better with branding.

A solution might be to make the tabs look more like a common "view switcher" control, which should look better, be more immediately recognisable as a familiar type of control that's used for this purpose, be more consistent / fit in with the rest of the sidebar UI, and be easier to click especially on touch screens and mobile. Some examples of what this could look like:



There's a pull request with more detailed notes about this suggestion: https://github.com/hypothesis/client/pull/429

Start by reviewing the sidebar's selection tabs and the linked pull request #429, which contains more detailed notes about the proposed view-switcher control. Done means replacing the small, shifting controls with a recognizable, larger button group that works with customizable backgrounds and touch or mobile use.

Written by the indexing model from the issue text.