Fixes #3019 converts toggle switch to a button

__tests__/src/components/AnnotationSettings.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { AnnotationSettings } from '../../../src/components/AnnotationSettings';
 
 /** */
@@ -18,62 +18,18 @@ function createWrapper(props) {
 }
 
 describe('AnnotationSettings', () => {
-  let control;
   let wrapper;
   const toggleAnnotationDisplayMock = jest.fn();
 
-
-  it('renders a FormControlLabel and a Switch', () => {
-    wrapper = createWrapper();
-    control = shallow(
-      wrapper.find(FormControlLabel).props().control,
-    );
-    expect(wrapper.find(FormControlLabel).length).toBe(1);
-    expect(control.find('ForwardRef(Switch)').length).toBe(1);
-  });
-
-  describe('control', () => {
-    it('is not checked when the displayAll prop is false', () => {
-      wrapper = createWrapper();
-      control = shallow(
-        wrapper.find(FormControlLabel).props().control,
-      );
-
-      expect(control.find('ForwardRef(Switch)').props().checked).toBe(false);
-    });
-
-    it('is checked when the displayAll prop is true', () => {
-      wrapper = createWrapper({ displayAll: true });
-      control = shallow(
-        wrapper.find(FormControlLabel).props().control,
-      );
-
-      expect(control.find('ForwardRef(Switch)').props().checked).toBe(true);
-    });
-
-    it('is disabled based on the displayAllDisabled prop', () => {
+  it('renders a MiradorMenuButton', () => {
     wrapper = createWrapper();
-      control = shallow(
-        wrapper.find(FormControlLabel).props().control,
-      );
-      expect(control.find('ForwardRef(Switch)').props().disabled).toBe(false);
-
-      wrapper = createWrapper({ displayAllDisabled: true });
-      control = shallow(
-        wrapper.find(FormControlLabel).props().control,
-      );
-      expect(control.find('ForwardRef(Switch)').props().disabled).toBe(true);
+    expect(wrapper.find(MiradorMenuButton).length).toBe(1);
   });
 
-    it('calls the toggleAnnotationDisplay prop function on change', () => {
+  it('calls the toggleAnnotationDisplay prop function on click', () => {
     wrapper = createWrapper({ toggleAnnotationDisplay: toggleAnnotationDisplayMock });
-      control = shallow(
-        wrapper.find(FormControlLabel).props().control,
-      );
-
-      control.find('ForwardRef(Switch)').props().onChange(); // trigger the onChange prop
+    wrapper.find(MiradorMenuButton).simulate('click');
 
     expect(toggleAnnotationDisplayMock).toHaveBeenCalledTimes(1);
   });
 });
-});

src/components/AnnotationSettings.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
+import VisibilityIcon from '@material-ui/icons/VisibilitySharp';
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
 
 /**
  * AnnotationSettings is a component to handle various annotation
@@ -17,19 +18,14 @@ export class AnnotationSettings extends Component {
     } = this.props;
 
     return (
-      <FormControlLabel
-        control={(
-          <Switch
-            checked={displayAll}
+      <MiradorMenuButton
+        aria-label={t(displayAll ? 'displayNoAnnotations' : 'displayAllAnnotations')}
+        onClick={toggleAnnotationDisplay}
         disabled={displayAllDisabled}
-            onChange={toggleAnnotationDisplay}
-            value={displayAll ? 'all' : 'select'}
-            color="secondary"
-          />
-        )}
-        label={t('displayAllAnnotations')}
-        labelPlacement="start"
-      />
+        size="small"
+      >
+        { displayAll ? <VisibilityIcon /> : <VisibilityOffIcon /> }
+      </MiradorMenuButton>
     );
   }
 }

src/locales/en/translation.json

@@ -36,6 +36,7 @@
     "dark": "Dark theme",
     "dismiss": "Dismiss",
     "displayAllAnnotations": "Highlight all",
+    "displayNoAnnotations": "Highlight none",
     "downloadExport": "Export workspace",
     "downloadExportWorkspace": "Export workspace",
     "elastic": "Elastic",