Implement Viewer Control Buttons Styling Updates

[lynwilhelm]

Use Case

Users have struggled understanding what is on vs off
Button state styling could be improved
icons have inconsistent line weights and sizes

Acceptance Criteria

1. Increase all icons to 26x26px
2. Replace all icons with new ones (need to ensure they render in the browser at intended size and have proper line weights)
3. Update vertical spacing of stacked buttons
4. Implement outlined new style state updates

Details

Design Link: https://xd.adobe.com/view/75b6a3c8-f650-443b-bccc-d1fcd134a35e-20e5/
Ticket is dev implementation work for #279

[lynwilhelm]

@blairlyons @interim17 @frasercl This ticket might fit nicely in tandem with the new orthographic camera setting work!

[lynwilhelm]

@thao-do Weren't there new icons that went along with this ticket? The updated ones are used in my XD file, but not sure if we have a link to a folder with the exported SVGs somewhere???

[thao-do]

There is a Google drive folder for simularium icons in the Simularium drive that I deposited the icons. I just looked quickly and there seems to be repeated in 2 folders UX/Assets/Icons and Specifications/Image Assets. This might be a good opportunity to make sure the icons are standardized (correct dimensions, correct line thickness at expected size, etc.)