update StepInfo

Author: mjhuff

app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx

@@ -115,7 +115,7 @@ export function RunPausedSplash(
           <Flex width="49rem" justifyContent={JUSTIFY_CENTER}>
             <StepInfo
               {...props}
-              textStyle="level3HeaderBold"
+              oddStyle="level3HeaderBold"
               overflow="hidden"
               overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
               color={COLORS.white}
@@ -155,7 +155,6 @@ export function RunPausedSplash(
           <Flex
             gridGap={SPACING.spacing24}
             flexDirection={DIRECTION_COLUMN}
-            alignItems={ALIGN_FLEX_END}
             justifyContent={JUSTIFY_SPACE_BETWEEN}
           >
             <Flex
@@ -180,7 +179,7 @@ export function RunPausedSplash(
                 <StyledText desktopStyle="headingSmallBold">{title}</StyledText>
                 <StepInfo
                   {...props}
-                  textStyle="bodyDefaultRegular"
+                  desktopStyle="bodyDefaultRegular"
                   overflow="hidden"
                   overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
                   textAlign={TEXT_ALIGN_CENTER}

app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx

@@ -2,23 +2,25 @@ import * as React from 'react'
 
 import { useTranslation } from 'react-i18next'
 
-import { Flex, DISPLAY_INLINE, LegacyStyledText } from '@opentrons/components'
+import { Flex, DISPLAY_INLINE, StyledText } from '@opentrons/components'
 
 import { CommandText } from '../../../molecules/Command'
 
 import type { StyleProps } from '@opentrons/components'
 import type { RecoveryContentProps } from '../types'
 
 interface StepInfoProps extends StyleProps {
-  textStyle: React.ComponentProps<typeof LegacyStyledText>['as']
   stepCounts: RecoveryContentProps['stepCounts']
   failedCommand: RecoveryContentProps['failedCommand']
   robotType: RecoveryContentProps['robotType']
   protocolAnalysis: RecoveryContentProps['protocolAnalysis']
+  desktopStyle?: React.ComponentProps<typeof StyledText>['desktopStyle']
+  oddStyle?: React.ComponentProps<typeof StyledText>['oddStyle']
 }
 
 export function StepInfo({
-  textStyle,
+  desktopStyle,
+  oddStyle,
   stepCounts,
   failedCommand,
   robotType,
@@ -35,18 +37,27 @@ export function StepInfo({
   const currentCopy = currentStepNumber ?? '?'
   const totalCopy = totalStepCount ?? '?'
 
+  const desktopStyleDefaulted = desktopStyle ?? 'bodyDefaultRegular'
+  const oddStyleDefaulted = oddStyle ?? 'bodyTextRegular'
+
   return (
     <Flex display={DISPLAY_INLINE} {...styleProps}>
-      <LegacyStyledText as={textStyle} display={DISPLAY_INLINE}>
+      <StyledText
+        desktopStyle={desktopStyleDefaulted}
+        oddStyle={oddStyleDefaulted}
+        display={DISPLAY_INLINE}
+      >
         {`${t('at_step')} ${currentCopy}/${totalCopy}: `}
-      </LegacyStyledText>
+      </StyledText>
       {analysisCommand != null && protocolAnalysis != null ? (
         <CommandText
           command={analysisCommand}
           commandTextData={protocolAnalysis}
           robotType={robotType}
           display={DISPLAY_INLINE}
-          as={textStyle}
+          modernStyledTextDefaults={true}
+          desktopStyle={desktopStyleDefaulted}
+          oddStyle={oddStyleDefaulted}
         />
       ) : null}
     </Flex>

app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StepInfo.test.tsx

@@ -25,7 +25,7 @@ describe('StepInfo', () => {
         ...mockRecoveryContentProps,
         protocolAnalysis: { commands: [mockFailedCommand] } as any,
       },
-      textStyle: 'h4',
+      desktopStyle: 'h4',
       stepCounts: {
         currentStepNumber: 5,
         totalStepCount: 10,