fix: Apply linter <span> rule

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

plugins/git-release-manager/src/components/Differ.tsx

@@ -16,6 +16,7 @@
 
 import React, { ReactNode } from 'react';
 import { grey } from '@material-ui/core/colors';
+import Typography from '@material-ui/core/Typography';
 import CallSplitIcon from '@material-ui/icons/CallSplit';
 import ChatIcon from '@material-ui/icons/Chat';
 import DynamicFeedIcon from '@material-ui/icons/DynamicFeed';
@@ -35,29 +36,31 @@ export const Differ = ({ current, next, icon }: DifferProps) => {
   return (
     <>
       {icon && (
-        <span>
+        <Typography component="span">
           <Icon icon={icon} />{' '}
-        </span>
+        </Typography>
       )}
 
       {!!current && (
-        <span
+        <Typography
+          component="span"
           data-testid={TEST_IDS.components.differ.current}
           style={{ color: grey[700] }}
         >
           {current ?? 'None'}
-        </span>
+        </Typography>
       )}
 
-      {current && next && <span>{'  →  '}</span>}
+      {current && next && <Typography component="span">{'  →  '}</Typography>}
 
       {next && (
-        <span
+        <Typography
+          component="span"
           data-testid={TEST_IDS.components.differ.next}
           style={{ fontWeight: 'bold' }}
         >
           {next}
-        </span>
+        </Typography>
       )}
     </>
   );

plugins/git-release-manager/src/components/ResponseStepDialog/LinearProgressWithLabel.tsx

@@ -50,8 +50,9 @@ export function LinearProgressWithLabel(props: {
 
   const CompletionEmoji = () => {
     if (status === STATUSES.ONGOING) return null;
-    if (status === STATUSES.FAILURE) return <span>{` ${ICONS.FAILURE} `}</span>;
-    return <span>{` ${ICONS.SUCCESS} `}</span>;
+    if (status === STATUSES.FAILURE)
+      return <Typography component="span">{` ${ICONS.FAILURE} `}</Typography>;
+    return <Typography component="span">{` ${ICONS.SUCCESS} `}</Typography>;
   };
 
   return (

plugins/git-release-manager/src/hooks/useResponseSteps.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 
 import { ResponseStep } from '../types/types';
@@ -30,9 +31,9 @@ export function useResponseSteps() {
       message: (
         <b>
           Something went wrong{' '}
-          <span role="img" aria-label="fire">
+          <Typography component="span" role="img" aria-label="fire">
             🔥
-          </span>
+          </Typography>
         </b>
       ),
       secondaryMessage: `Error message: ${