diff --git a/app/src/assets/localization/en/drop_tip_wizard.json b/app/src/assets/localization/en/drop_tip_wizard.json index 4bedd4bc8e6..fe673268a50 100644 --- a/app/src/assets/localization/en/drop_tip_wizard.json +++ b/app/src/assets/localization/en/drop_tip_wizard.json @@ -1,7 +1,7 @@ { "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", @@ -9,7 +9,7 @@ "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", diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx index 7876866d56d..bfed6273f1e 100644 --- a/app/src/atoms/buttons/RadioButton.tsx +++ b/app/src/atoms/buttons/RadioButton.tsx @@ -93,7 +93,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { /> {buttonLabel} diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx index 61e6b6de67a..5e79b1ff8bd 100644 --- a/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx +++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx @@ -141,8 +141,8 @@ export function SimpleWizardBodyContent(props: Props): JSX.Element { <> {isSuccess ? ( Success Icon diff --git a/app/src/organisms/DropTipWizardFlows/Success.tsx b/app/src/organisms/DropTipWizardFlows/Success.tsx index 7fb10ae9cc4..5e72dd66281 100644 --- a/app/src/organisms/DropTipWizardFlows/Success.tsx +++ b/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' ? : null} - + + Success Icon + + {message} + + + {isOnDevice ? ( - - - + ) : ( {proceedText} )} - - + + ) } + +const WIZARD_CONTAINER_STYLE = css` + min-height: 394px; + flex-direction: ${DIRECTION_COLUMN}; + justify-content: ${JUSTIFY_CENTER}; + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + height: 472px; + } +` diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx index 4a0d64f7661..0f3f3fdb227 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryInProgress.tsx +++ b/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 ( - + ) } + +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}; + } +` diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx index 7fba59a0a6f..d5fe9a80f59 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx @@ -121,7 +121,7 @@ export function ODDRecoveryOptions({ return ( {validRecoveryOptions.map((recoveryOption: RecoveryRoute) => { @@ -135,6 +135,7 @@ export function ODDRecoveryOptions({ setSelectedRoute(recoveryOption) }} isSelected={recoveryOption === selectedRoute} + radioButtonType="large" /> ) })} diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryTakeover.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryTakeover.tsx index 3c4d0a7b261..13ad5c3e2eb 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryTakeover.tsx +++ b/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} > - - + + ) } - -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}; -` diff --git a/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx index db66388deaa..78a1ae1e43b 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx @@ -9,7 +9,6 @@ import { ALIGN_CENTER, SPACING, COLORS, - BORDERS, DIRECTION_COLUMN, POSITION_ABSOLUTE, TYPOGRAPHY, @@ -18,7 +17,6 @@ import { JUSTIFY_SPACE_BETWEEN, TEXT_ALIGN_CENTER, StyledText, - JUSTIFY_END, PrimaryButton, SecondaryButton, } from '@opentrons/components' @@ -26,12 +24,12 @@ import { 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( - - + + + - {title} + - - {title} - - - + {t('cancel_run')} @@ -224,7 +205,7 @@ export function RunPausedSplash( - + ) } diff --git a/app/src/organisms/ErrorRecoveryFlows/constants.ts b/app/src/organisms/ErrorRecoveryFlows/constants.ts index 2af09a3bf97..faadf0730aa 100644 --- a/app/src/organisms/ErrorRecoveryFlows/constants.ts +++ b/app/src/organisms/ErrorRecoveryFlows/constants.ts @@ -1,6 +1,14 @@ import { css } from 'styled-components' -import { RESPONSIVENESS, SPACING } from '@opentrons/components' +import { + RESPONSIVENESS, + SPACING, + DIRECTION_COLUMN, + ALIGN_CENTER, + JUSTIFY_CENTER, + JUSTIFY_SPACE_BETWEEN, + TEXT_ALIGN_CENTER, +} from '@opentrons/components' import type { StepOrder } from './types' @@ -232,3 +240,22 @@ export const ICON_SIZE_ALERT_INFO_STYLE = css` height: ${SPACING.spacing60}; } ` + +export const BANNER_TEXT_CONTAINER_STYLE = css` + flex-direction: ${DIRECTION_COLUMN}; + justify-content: ${JUSTIFY_SPACE_BETWEEN}; + align-items: ${ALIGN_CENTER}; + padding-top: ${SPACING.spacing12}; + width: 100%; +` + +export const BANNER_TEXT_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}; + width: 100%; +`