fix: Apply linter <span> rule

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

plugins/lighthouse/src/components/AuditList/AuditListTable.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React, { useState, useEffect } from 'react';
+import Typography from '@material-ui/core/Typography';
 import { Website, lighthouseApiRef } from '../../api';
 import useInterval from 'react-use/lib/useInterval';
 import {
@@ -112,7 +113,9 @@ export const AuditListTable = ({ items }: { items: Website[] }) => {
       lastReport: (
         <>
           <AuditStatusIcon audit={website.lastAudit} />{' '}
-          <span>{website.lastAudit.status.toLocaleUpperCase('en-US')}</span>
+          <Typography component="span">
+            {website.lastAudit.status.toLocaleUpperCase('en-US')}
+          </Typography>
         </>
       ),
       lastAuditTriggered: formatTime(website.lastAudit.timeCreated),

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
+import Typography from '@material-ui/core/Typography';
 import { Audit, AuditCompleted, LighthouseCategoryId } from '../../api';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import AuditStatusIcon from '../AuditStatusIcon';
@@ -52,7 +53,7 @@ const LighthouseCategoryScoreStatus = (props: { score: number }) => {
         </>
       );
     default:
-      return <span>N/A</span>;
+      return <Typography component="span">N/A</Typography>;
   }
 };