adds Typography to metadata panel for themeability

__tests__/src/components/WindowSideBarInfoPanel.test.js

@@ -52,15 +52,17 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders canvas metadata in LabelValueMetadata component', () => {
       expect(
-        wrapper.find(LabelValueMetadata).at(0).matchesElement(
-          <LabelValueMetadata labelValuePairs={metadata} />,
+        wrapper.find(Typography).at(3).matchesElement(
+          <Typography>
+            <LabelValueMetadata labelValuePairs={metadata} />
+          </Typography>,
         ),
       ).toBe(true);
     });
 
     it('renders manifest label', () => {
       expect(
-        wrapper.find(Typography).at(3).matchesElement(
+        wrapper.find(Typography).at(4).matchesElement(
           <Typography>The Manifest Label</Typography>,
         ),
       ).toBe(true);
@@ -68,7 +70,7 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders manifest description in SanitizedHtml component', () => {
       expect(
-        wrapper.find(Typography).at(4).matchesElement(
+        wrapper.find(Typography).at(5).matchesElement(
           <Typography>
             <SanitizedHtml htmlString="The Manifest Description" ruleSet="iiif" />
           </Typography>,
@@ -78,8 +80,10 @@ describe('WindowSideBarInfoPanel', () => {
 
     it('renders manifest metadata in LabelValueMetadata component', () => {
       expect(
-        wrapper.find(LabelValueMetadata).at(1).matchesElement(
-          <LabelValueMetadata labelValuePairs={metadata} />,
+        wrapper.find(Typography).at(6).matchesElement(
+          <Typography>
+            <LabelValueMetadata labelValuePairs={metadata} />
+          </Typography>,
         ),
       ).toBe(true);
     });

src/components/WindowSideBarInfoPanel.js

@@ -48,7 +48,9 @@ class WindowSideBarInfoPanel extends Component {
         )}
 
         {canvasMetadata.length > 0 && (
+          <Typography variant="body2">
             <LabelValueMetadata labelValuePairs={canvasMetadata} />
+          </Typography>
         )}
 
         <Divider />
@@ -66,7 +68,9 @@ class WindowSideBarInfoPanel extends Component {
         )}
 
         {manifestMetadata.length > 0 && (
+          <Typography variant="body2">
             <LabelValueMetadata labelValuePairs={manifestMetadata} />
+          </Typography>
         )}
 
       </div>