drop tip success image fixes

Opentrons · Aug 5, 2024 · 144765f · 144765f
1 parent 8d2956c
commit 144765f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 26 deletions.
diff --git a/app/src/assets/localization/en/drop_tip_wizard.json b/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",

diff --git 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' ? <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;
+  }
+`