message: Modify text align
  modify text align
  text -> styled text
  spacing_number -> spacing.spacingNumber
diff: @@ -3,22 +3,19 @@ import { useTranslation } from 'react-i18next'
  import { LEFT, RIGHT } from '@opentrons/shared-data'
  import {
  Flex,
  - Text,
  ALIGN_CENTER,
  ALIGN_FLEX_START,
  DIRECTION_COLUMN,
  - FONT_SIZE_BODY_1,
  - FONT_SIZE_BODY_2,
  - FONT_WEIGHT_SEMIBOLD,
  JUSTIFY_CENTER,
  SIZE_3,
  - SPACING_2,
  - SPACING_3,
  + SPACING,
  WRAP,
  JUSTIFY_START,
  DIRECTION_ROW,
  + TYPOGRAPHY,
  } from '@opentrons/components'
  +import { StyledText } from '../../atoms/text'
  import { ModuleCard } from './ModuleCard'
  import {
  useAttachedModules,
  @@ -46,18 +43,19 @@ export function PipettesAndModules({
  flexDirection={DIRECTION_COLUMN}
  width="100%"
  >
  - <Text
  - fontWeight={FONT_WEIGHT_SEMIBOLD}
  - fontSize={FONT_SIZE_BODY_2}
  - marginBottom={SPACING_3}
  + <StyledText
  + as="h3"
  + fontWeight={TYPOGRAPHY.fontWeightSemiBold}
  + marginBottom={SPACING.spacing4}
  id="PipettesAndModules_title"
  >
  {t('pipettes_and_modules')}
  - </Text>
  + </StyledText>
  <Flex
  alignItems={ALIGN_CENTER}
  + justifyContent={JUSTIFY_CENTER}
  minHeight={SIZE_3}
  - padding={SPACING_2}
  + padding={SPACING.spacing3}
  width="100%"
  >
  {/* TODO(jr, 4/15/22): This needs to be refactored to get a combined array of pipettes and modules so it can display with widths matching each column as the design shows */}
  @@ -97,13 +95,9 @@ export function PipettesAndModules({
  </Flex>
  </Flex>
  ) : (
  - <Text
  - justifyContent={JUSTIFY_CENTER}
  - fontSize={FONT_SIZE_BODY_1}
  - id="PipettesAndModules_offline"
  - >
  + <StyledText as="p" id="PipettesAndModules_offline">
  {t('offline_pipettes_and_modules')}
  - </Text>
  + </StyledText>
  )}
  </Flex>
  </Flex>
  