From b91340922df6d0d66a6e1258972b435c8143d4a3 Mon Sep 17 00:00:00 2001
From: Seth Foster <seth@opentrons.com>
Date: Thu, 8 Aug 2024 09:30:43 -0400
Subject: [PATCH] fix(app): styles and copy in error recovery error (#15931)

Guess we never got around to updating these. They're correct for [the
release
file](https://www.figma.com/design/Rwdt9R0aERFC55oTLDTlqY/8.0-September-Release-File?node-id=218-35940&t=wOA3qgaCJdi9T3ub-4)

Closes RQA-2919
---
 .../localization/en/error_recovery.json       |  2 +-
 .../ErrorRecoveryFlows/RecoveryError.tsx      | 24 +++++++++++++------
 .../__tests__/RecoveryError.test.tsx          | 12 +++++++---
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/app/src/assets/localization/en/error_recovery.json b/app/src/assets/localization/en/error_recovery.json
index f7eb5c5a565..f0ee3b0f4e0 100644
--- a/app/src/assets/localization/en/error_recovery.json
+++ b/app/src/assets/localization/en/error_recovery.json
@@ -33,6 +33,7 @@
   "manually_fill_liquid_in_well": "Manually fill liquid in well {{well}}",
   "manually_fill_well_and_skip": "Manually fill well and skip to next step",
   "next_step": "Next step",
+  "next_try_another_action": "Next, you can try another recovery action or cancel the run.",
   "no_liquid_detected": "No liquid detected",
   "overpressure_is_usually_caused": "Overpressure is usually caused by a tip contacting labware, a clog, or moving viscous liquid too quickly. If the issue persists, cancel the run and make the necessary changes to the protocol.",
   "pick_up_tips": "Pick up tips",
@@ -54,7 +55,6 @@
   "retry_with_same_tips": "Retry with same tips",
   "retrying_step_succeeded": "Retrying step {{step}} succeeded.",
   "return_to_menu": "Return to menu",
-  "return_to_the_menu": "Return to the menu to choose how to proceed.",
   "robot_door_is_open": "Robot door is open",
   "robot_is_canceling_run": "Robot is canceling the run",
   "robot_is_in_recovery_mode": "Robot is in recovery mode",
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx
index e38647927db..370b80174a6 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx
@@ -6,7 +6,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   Icon,
-  LegacyStyledText,
+  StyledText,
   SPACING,
   ALIGN_CENTER,
   JUSTIFY_END,
@@ -61,7 +61,7 @@ export function ErrorRecoveryFlowError({
     <ErrorContent
       isOnDevice={isOnDevice}
       title={t('recovery_action_failed', { action: userRecoveryOptionCopy })}
-      subTitle={t('return_to_the_menu')}
+      subTitle={t('next_try_another_action')}
       btnText={t('back_to_menu')}
       btnOnClick={onPrimaryClick}
     />
@@ -103,13 +103,13 @@ export function RecoveryDropTipFlowErrors({
   const buildSubTitle = (): string => {
     switch (step) {
       case ERROR_WHILE_RECOVERING.STEPS.DROP_TIP_GENERAL_ERROR:
-        return t('return_to_the_menu')
+        return t('next_try_another_action')
       case ERROR_WHILE_RECOVERING.STEPS.DROP_TIP_TIP_DROP_FAILED:
-        return t('return_to_the_menu')
+        return t('next_try_another_action')
       case ERROR_WHILE_RECOVERING.STEPS.DROP_TIP_BLOWOUT_FAILED:
         return t('you_can_still_drop_tips')
       default:
-        return t('return_to_the_menu')
+        return t('next_try_another_action')
     }
   }
 
@@ -189,8 +189,18 @@ export function ErrorContent({
           alignItems={ALIGN_CENTER}
           textAlign={ALIGN_CENTER}
         >
-          <LegacyStyledText as="h3Bold">{title}</LegacyStyledText>
-          <LegacyStyledText as="h4">{subTitle}</LegacyStyledText>
+          <StyledText
+            oddStyle="level3HeaderBold"
+            desktopStyle="headingSmallBold"
+          >
+            {title}
+          </StyledText>
+          <StyledText
+            oddStyle="level4HeaderRegular"
+            desktopStyle="bodyDefaultRegular"
+          >
+            {subTitle}
+          </StyledText>
         </Flex>
       </Flex>
       <Flex justifyContent={JUSTIFY_END}>
diff --git a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
index 5e95f0c65a5..d3b0d4dd629 100644
--- a/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/__tests__/RecoveryError.test.tsx
@@ -50,7 +50,9 @@ describe('RecoveryError', () => {
 
     expect(screen.getByText('Retry step failed')).toBeInTheDocument()
     expect(
-      screen.getByText('Return to the menu to choose how to proceed.')
+      screen.getByText(
+        'Next, you can try another recovery action or cancel the run.'
+      )
     ).toBeInTheDocument()
     expect(screen.getByText('Back to menu')).toBeInTheDocument()
   })
@@ -62,7 +64,9 @@ describe('RecoveryError', () => {
 
     expect(screen.getByText('Retry step failed')).toBeInTheDocument()
     expect(
-      screen.getByText('Return to the menu to choose how to proceed.')
+      screen.getByText(
+        'Next, you can try another recovery action or cancel the run.'
+      )
     ).toBeInTheDocument()
     expect(screen.getByText('Return to menu')).toBeInTheDocument()
   })
@@ -88,7 +92,9 @@ describe('RecoveryError', () => {
 
     expect(screen.getByText('Tip drop failed')).toBeInTheDocument()
     expect(
-      screen.getByText('Return to the menu to choose how to proceed.')
+      screen.getByText(
+        'Next, you can try another recovery action or cancel the run.'
+      )
     ).toBeInTheDocument()
     expect(screen.getByText('Return to menu')).toBeInTheDocument()
   })