Adjust typography in WindowwSideBarInfoPanel

__tests__/src/components/CompanionWindowFactory.test.js

@@ -23,7 +23,7 @@ describe('CompanionWindowFactory', () => {
         content: 'info',
       });
 
-      expect(wrapper.find('WithStyles(Connect(Connect(miradorWithPlugins(WindowSideBarInfoPanel))))').length).toBe(1);
+      expect(wrapper.find('Connect(Connect(miradorWithPlugins(WindowSideBarInfoPanel)))').length).toBe(1);
     });
   });
 

__tests__/src/components/WindowList.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
 import { WindowList } from '../../../src/components/WindowList';
 
 describe('WindowList', () => {
@@ -51,7 +52,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>untitled</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem><Typography>untitled</Typography></MenuItem>),
       ).toBe(true);
       wrapper.find('WithStyles(MenuItem)').simulate('click', {});
       expect(handleClose).toBeCalled();
@@ -80,7 +81,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>Some title</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem><Typography>Some title</Typography></MenuItem>),
       ).toBe(true);
     });
   });

src/components/WindowSideBarInfoPanel.js

@@ -21,7 +21,6 @@ export class WindowSideBarInfoPanel extends Component {
       canvasDescription,
       canvasLabel,
       canvasMetadata,
-      classes,
       manifestDescription,
       manifestLabel,
       manifestMetadata,
@@ -35,14 +34,14 @@ export class WindowSideBarInfoPanel extends Component {
         {canvasLabel && (
           <>
             <Typography variant="overline" id={`${id}-currentItem`}>{t('currentItem')}</Typography>
-            <Typography aria-labelledby={`${id}-currentItem`} variant="h4" className={classes.windowSideBarHeading}>
+            <Typography aria-labelledby={`${id}-currentItem`} variant="h4">
               {canvasLabel}
             </Typography>
           </>
         )}
 
         {canvasDescription && (
-          <Typography variant="body2">
+          <Typography variant="body1">
             <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
           </Typography>
         )}
@@ -55,8 +54,8 @@ export class WindowSideBarInfoPanel extends Component {
 
         {manifestLabel && (
           <>
-            <Typography variant="overline" id={`${id}-resource`} component="p" className={classes.sectionHeading}>{t('resource')}</Typography>
-            <Typography aria-labelledby={`${id}-resource`} variant="h4" className={classes.windowSideBarHeading}>
+            <Typography variant="overline" id={`${id}-resource`} component="p">{t('resource')}</Typography>
+            <Typography aria-labelledby={`${id}-resource`} variant="h4">
               {manifestLabel}
             </Typography>
           </>
@@ -81,7 +80,6 @@ WindowSideBarInfoPanel.propTypes = {
   canvasDescription: PropTypes.string,
   canvasLabel: PropTypes.string,
   canvasMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifestLabel: PropTypes.string,
   manifestDescription: PropTypes.string,
   manifestMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
@@ -94,7 +92,6 @@ WindowSideBarInfoPanel.defaultProps = {
   canvasDescription: null,
   canvasLabel: null,
   canvasMetadata: [],
-  classes: {},
   manifestLabel: null,
   manifestDescription: null,
   manifestMetadata: [],

src/containers/WindowSideBarInfoPanel.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import {
   getDestructuredMetadata,
@@ -31,18 +30,8 @@ const mapStateToProps = (state, { windowId }) => ({
   manifestMetadata: getDestructuredMetadata(getWindowManifest(state, windowId).manifestation),
 });
 
-/**
- *
- * @param theme
- * @returns {{windowSideBarHeading: *}}
- */
-const styles = theme => ({
-  windowSideBarHeading: theme.typography.h6,
-});
-
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, null),
   miradorWithPlugins,
 );