fix(app): Fix various Error Recovery CSS bugs

app/src/assets/localization/en/drop_tip_wizard.json

@@ -1,15 +1,15 @@
 {
   "before_you_begin_do_you_want_to_blowout": "Before you begin, do you need to preserve aspirated liquid?",
   "begin_removal": "Begin removal",
-  "blowout_complete": "blowout complete",
+  "blowout_complete": "Blowout complete",
   "blowout_liquid": "Blow out liquid",
   "cant_safely_drop_tips": "Can't safely drop tips",
   "choose_blowout_location": "choose blowout location",
   "choose_drop_tip_location": "choose tip-drop location",
   "confirm_blowout_location": "Is the pipette positioned where the liquids should be blown out?",
   "confirm_drop_tip_location": "Is the pipette positioned where the tips should be dropped?",
   "confirm_removal_and_home": "Confirm removal and home",
-  "drop_tip_complete": "tip drop complete",
+  "drop_tip_complete": "Tip drop complete",
   "drop_tip_failed": "The drop tip could not be completed. Contact customer support for assistance.",
   "drop_tips": "drop tips",
   "error_dropping_tips": "Error dropping tips",

app/src/atoms/buttons/RadioButton.tsx

@@ -93,7 +93,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       />
       <SettingButtonLabel role="label" htmlFor={id}>
         <StyledText
-          oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+          oddStyle={isLarge ? 'level4HeaderSemiBold' : 'bodyTextRegular'}
           desktopStyle="bodyDefaultRegular"
         >
           {buttonLabel}

app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx

@@ -141,8 +141,8 @@ export function SimpleWizardBodyContent(props: Props): JSX.Element {
           <>
             {isSuccess ? (
               <img
-                width={robotType === FLEX_ROBOT_TYPE ? '170px' : '160px'}
-                height={robotType === FLEX_ROBOT_TYPE ? '141px' : '120px'}
+                width={robotType === FLEX_ROBOT_TYPE ? '250px' : '160px'}
+                height={robotType === FLEX_ROBOT_TYPE ? '208px' : '120px'}
                 src={SuccessIcon}
                 alt="Success Icon"
               />

app/src/organisms/DropTipWizardFlows/Success.tsx

@@ -1,19 +1,23 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 
 import {
-  COLORS,
+  StyledText,
   PrimaryButton,
   TEXT_TRANSFORM_CAPITALIZE,
   JUSTIFY_FLEX_END,
+  ALIGN_CENTER,
   Flex,
   SPACING,
+  DIRECTION_COLUMN,
+  RESPONSIVENESS,
+  JUSTIFY_CENTER,
 } from '@opentrons/components'
 
-import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { SmallButton } from '../../atoms/buttons'
+import SuccessIcon from '../../assets/images/icon_success.png'
 
 import type { DropTipWizardContainerProps } from './types'
+import { css } from 'styled-components'
 
 type SuccessProps = DropTipWizardContainerProps & {
   message: string
@@ -29,32 +33,58 @@ export const Success = (props: SuccessProps): JSX.Element => {
     issuedCommandsType,
   } = props
 
-  const { i18n } = useTranslation(['drop_tip_wizard', 'shared'])
-
   return (
-    <>
-      {issuedCommandsType === 'fixit' ? <Flex /> : null}
-      <SimpleWizardBody
-        iconColor={COLORS.green50}
-        header={i18n.format(message, 'capitalize')}
-        isSuccess
-        paddingX={SPACING.spacing32}
-        marginTop={
-          issuedCommandsType === 'fixit' && isOnDevice ? SPACING.spacing40 : 0
-        }
+    <Flex
+      css={WIZARD_CONTAINER_STYLE}
+      alignItems={ALIGN_CENTER}
+      padding={SPACING.spacing32}
+      gridGap={issuedCommandsType === 'fixit' ? SPACING.spacing24 : null}
+      height="100%"
+      marginBottom={
+        issuedCommandsType === 'setup' && isOnDevice ? SPACING.spacing80 : null
+      }
+      marginTop={
+        issuedCommandsType === 'fixit' && isOnDevice ? '3.125rem' : null
+      }
+    >
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_CENTER}
+        flex="1"
+        height="100%"
+        gridGap={SPACING.spacing24}
       >
+        <img
+          src={SuccessIcon}
+          alt="Success Icon"
+          width="170px"
+          height="141px"
+        />
+        <StyledText desktopStyle="headingSmallBold" oddStyle="level3HeaderBold">
+          {message}
+        </StyledText>
+      </Flex>
+      <Flex justifyContent={JUSTIFY_FLEX_END} width="100%" marginLeft="auto">
         {isOnDevice ? (
-          <Flex justifyContent={JUSTIFY_FLEX_END} width="100%">
-            <SmallButton
-              textTransform={TEXT_TRANSFORM_CAPITALIZE}
-              buttonText={proceedText}
-              onClick={handleProceed}
-            />
-          </Flex>
+          <SmallButton
+            textTransform={TEXT_TRANSFORM_CAPITALIZE}
+            buttonText={proceedText}
+            onClick={handleProceed}
+          />
         ) : (
           <PrimaryButton onClick={handleProceed}>{proceedText}</PrimaryButton>
         )}
-      </SimpleWizardBody>
-    </>
+      </Flex>
+    </Flex>
   )
 }
+
+const WIZARD_CONTAINER_STYLE = css`
+  min-height: 394px;
+  flex-direction: ${DIRECTION_COLUMN};
+  justify-content: ${JUSTIFY_CENTER};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: 472px;
+  }
+`

app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 
-import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
 import { RECOVERY_MAP } from './constants'
-import { Flex, ALIGN_CENTER, JUSTIFY_CENTER } from '@opentrons/components'
+import {
+  Flex,
+  ALIGN_CENTER,
+  JUSTIFY_CENTER,
+  RESPONSIVENESS,
+  DIRECTION_COLUMN,
+  SPACING,
+} from '@opentrons/components'
+
+import { InProgressModal } from '../../molecules/InProgressModal'
 
 import type { RobotMovingRoute, RecoveryContentProps } from './types'
 
@@ -43,12 +52,20 @@ export function RecoveryInProgress({
   const description = buildDescription()
 
   return (
-    <Flex
-      alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_CENTER}
-      width="100%"
-    >
+    <Flex css={CONTAINER_STYLE}>
       <InProgressModal description={description} />
     </Flex>
   )
 }
+
+const CONTAINER_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  justify-content: ${JUSTIFY_CENTER};
+  flex-direction: ${DIRECTION_COLUMN};
+  grid-gap: ${SPACING.spacing16};
+  width: 100%;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    grid-gap: ${SPACING.spacing24};
+  }
+`

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx

@@ -121,7 +121,7 @@ export function ODDRecoveryOptions({
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
-      gridGap={SPACING.spacing4}
+      gridGap={SPACING.spacing8}
       width="100%"
     >
       {validRecoveryOptions.map((recoveryOption: RecoveryRoute) => {
@@ -135,6 +135,7 @@ export function ODDRecoveryOptions({
               setSelectedRoute(recoveryOption)
             }}
             isSelected={recoveryOption === selectedRoute}
+            radioButtonType="large"
           />
         )
       })}

app/src/organisms/ErrorRecoveryFlows/RecoveryTakeover.tsx

@@ -1,19 +1,13 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 
 import {
-  DIRECTION_COLUMN,
   Flex,
   SPACING,
   COLORS,
   Icon,
   StyledText,
   AlertPrimaryButton,
-  ALIGN_CENTER,
-  JUSTIFY_CENTER,
-  TEXT_ALIGN_CENTER,
-  JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 import {
   RUN_STATUS_AWAITING_RECOVERY,
@@ -30,6 +24,10 @@ import type {
   UseUpdateClientDataRecoveryResult,
 } from '../../resources/client_data'
 import type { ErrorRecoveryFlowsProps } from '.'
+import {
+  BANNER_TEXT_CONTAINER_STYLE,
+  BANNER_TEXT_CONTENT_STYLE,
+} from './constants'
 
 // The takeover view, functionally similar to MaintenanceRunTakeover
 export function RecoveryTakeover(props: {
@@ -128,8 +126,8 @@ export function RecoveryTakeoverDesktop({
       desktopType={'desktop-small'}
       isOnDevice={false}
     >
-      <Flex css={CONTAINER_STYLE}>
-        <Flex css={CONTENT_STYLE}>
+      <Flex css={BANNER_TEXT_CONTAINER_STYLE}>
+        <Flex css={BANNER_TEXT_CONTENT_STYLE}>
           <Icon
             name="alert-circle"
             color={COLORS.red50}
@@ -152,20 +150,3 @@ export function RecoveryTakeoverDesktop({
     </RecoveryInterventionModal>
   )
 }
-
-const CONTAINER_STYLE = css`
-  flex-direction: ${DIRECTION_COLUMN};
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  align-items: ${ALIGN_CENTER};
-  padding-top: ${SPACING.spacing12};
-`
-
-const CONTENT_STYLE = css`
-  flex-direction: ${DIRECTION_COLUMN};
-  justify-content: ${JUSTIFY_CENTER};
-  align-items: ${ALIGN_CENTER};
-
-  text-align: ${TEXT_ALIGN_CENTER};
-  padding: ${SPACING.spacing40} ${SPACING.spacing40};
-  grid-gap: ${SPACING.spacing16};
-`

app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx

@@ -9,7 +9,6 @@ import {
   ALIGN_CENTER,
   SPACING,
   COLORS,
-  BORDERS,
   DIRECTION_COLUMN,
   POSITION_ABSOLUTE,
   TYPOGRAPHY,
@@ -18,20 +17,19 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   TEXT_ALIGN_CENTER,
   StyledText,
-  JUSTIFY_END,
   PrimaryButton,
   SecondaryButton,
 } from '@opentrons/components'
 
 import { useErrorName } from './hooks'
 import { getErrorKind } from './utils'
 import { LargeButton } from '../../atoms/buttons'
-import { RECOVERY_MAP } from './constants'
 import {
-  RecoveryInterventionModal,
-  RecoverySingleColumnContentWrapper,
-  StepInfo,
-} from './shared'
+  BANNER_TEXT_CONTAINER_STYLE,
+  BANNER_TEXT_CONTENT_STYLE,
+  RECOVERY_MAP,
+} from './constants'
+import { RecoveryInterventionModal, StepInfo } from './shared'
 
 import type { RobotType } from '@opentrons/shared-data'
 import type { ErrorRecoveryFlowsProps } from '.'
@@ -169,49 +167,32 @@ export function RunPausedSplash(
       <RecoveryInterventionModal
         desktopType="desktop-small"
         titleHeading={buildTitleHeadingDesktop()}
-        isOnDevice={isOnDevice}
+        isOnDevice={false}
       >
-        <RecoverySingleColumnContentWrapper>
-          <Flex
-            gridGap={SPACING.spacing24}
-            flexDirection={DIRECTION_COLUMN}
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-          >
+        <Flex css={BANNER_TEXT_CONTAINER_STYLE}>
+          <Flex css={BANNER_TEXT_CONTENT_STYLE}>
+            <Icon
+              name="ot-alert"
+              size={SPACING.spacing40}
+              color={COLORS.red50}
+            />
             <Flex
-              borderRadius={BORDERS.borderRadius8}
-              padding={`${SPACING.spacing40} ${SPACING.spacing16}`}
-              gridGap={SPACING.spacing16}
-              height="100%"
+              gridGap={SPACING.spacing8}
               flexDirection={DIRECTION_COLUMN}
-              justifyContent={JUSTIFY_CENTER}
               alignItems={ALIGN_CENTER}
+              width="100%"
             >
-              <Icon
-                name="ot-alert"
-                size={SPACING.spacing40}
-                color={COLORS.red50}
+              <StyledText desktopStyle="headingSmallBold">{title}</StyledText>
+              <StepInfo
+                {...props}
+                desktopStyle="bodyDefaultRegular"
+                overflow="hidden"
+                overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
+                textAlign={TEXT_ALIGN_CENTER}
               />
-              <Flex
-                gridGap={SPACING.spacing8}
-                flexDirection={DIRECTION_COLUMN}
-                alignItems={ALIGN_CENTER}
-              >
-                <StyledText desktopStyle="headingSmallBold">{title}</StyledText>
-                <StepInfo
-                  {...props}
-                  desktopStyle="bodyDefaultRegular"
-                  overflow="hidden"
-                  overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
-                  textAlign={TEXT_ALIGN_CENTER}
-                />
-              </Flex>
             </Flex>
           </Flex>
-          <Flex
-            gridGap={SPACING.spacing8}
-            justifyContent={JUSTIFY_END}
-            alignItems={ALIGN_CENTER}
-          >
+          <Flex gridGap={SPACING.spacing8} marginLeft="auto">
             <SecondaryButton isDangerous onClick={onCancelClick}>
               {t('cancel_run')}
             </SecondaryButton>
@@ -224,7 +205,7 @@ export function RunPausedSplash(
               </StyledText>
             </PrimaryButton>
           </Flex>
-        </RecoverySingleColumnContentWrapper>
+        </Flex>
       </RecoveryInterventionModal>
     )
   }