fix(app): update new confirmation buttons on protocol setup (#16132)

Designs now specify explicit confirmation "green checks" for LPC, labware, and liquid setup. Here, I update the copy for LPC confirmation from 'Confirm placements' to 'Confirm offsets', along with adding new copy above the offset table I also update the button styles from 'default' to 'rounded' to reflect designs. In addition, I add an `InfoScreen` showing no offset data if no non-identity vector offsets exit. Closes RQA-3104
Opentrons · Aug 27, 2024 · 80a446a · 80a446a
1 parent 88f46db
commit 80a446a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 24 deletions.
diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json
@@ -10,6 +10,7 @@
   "additional_off_deck_labware": "Additional Off-Deck Labware",
   "all_files_associated": "All files associated with the protocol run are available on the robot detail screen.",
   "applied_labware_offsets": "applied labware offsets",
+  "applied_labware_offset_data": "Applied labware offset data",
   "are_you_sure_you_want_to_proceed": "Are you sure you want to proceed to run?",
   "attach_gripper_failure_reason": "Attach the required gripper to continue",
   "attach_gripper": "attach gripper",

diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -187,6 +187,7 @@ export function ProtocolSetupLabware({
               setIsConfirmed(true)
               setSetupScreen('prepare to run')
             }}
+            buttonCategory="rounded"
           />
         )}
       </Flex>

diff --git a/app/src/organisms/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ProtocolSetupLiquids/index.tsx
@@ -74,6 +74,7 @@ export function ProtocolSetupLiquids({
               setIsConfirmed(true)
               setSetupScreen('prepare to run')
             }}
+            buttonCategory="rounded"
           />
         )}
       </Flex>

diff --git a/app/src/organisms/ProtocolSetupOffsets/index.tsx b/app/src/organisms/ProtocolSetupOffsets/index.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Flex,
+  Chip,
+  DIRECTION_COLUMN,
   DIRECTION_ROW,
+  Flex,
+  InfoScreen,
   JUSTIFY_SPACE_BETWEEN,
-  Chip,
+  SPACING,
+  StyledText,
 } from '@opentrons/components'
 
 import type { LabwareOffset } from '@opentrons/api-client'
@@ -92,19 +96,34 @@ export function ProtocolSetupOffsets({
               />
             ) : (
               <SmallButton
-                buttonText={t('confirm_placements')}
+                buttonText={t('confirm_offsets')}
                 disabled={nonIdentityOffsets.length === 0}
                 onClick={() => {
                   setIsConfirmed(true)
                   setSetupScreen('prepare to run')
                 }}
+                buttonCategory="rounded"
               />
             )}
           </Flex>
-          <TerseOffsetTable
-            offsets={nonIdentityOffsets}
-            labwareDefinitions={labwareDefinitions}
-          />
+          <Flex marginTop={SPACING.spacing32} flexDirection={DIRECTION_COLUMN}>
+            {nonIdentityOffsets.length > 0 ? (
+              <>
+                <StyledText
+                  oddStyle="level4HeaderSemiBold"
+                  marginBottom={SPACING.spacing8}
+                >
+                  {t('applied_labware_offset_data')}
+                </StyledText>
+                <TerseOffsetTable
+                  offsets={nonIdentityOffsets}
+                  labwareDefinitions={labwareDefinitions}
+                />
+              </>
+            ) : (
+              <InfoScreen contentType="noLabwareOffsetDataYet" />
+            )}
+          </Flex>
           <FloatingActionButton
             buttonText={t('update_offsets')}
             iconName="reticle"

diff --git a/components/src/molecules/ParametersTable/InfoScreen.tsx b/components/src/molecules/ParametersTable/InfoScreen.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
-import { LegacyStyledText } from '../../atoms/StyledText'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants/index'
+import { StyledText } from '../../atoms/StyledText'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
+import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+import { css } from 'styled-components'
 
 interface InfoScreenProps {
   contentType:
@@ -15,15 +16,14 @@ interface InfoScreenProps {
     | 'labware'
     | 'noFiles'
     | 'noLabwareOffsetData'
+    | 'noLabwareOffsetDataYet'
   t?: any
   backgroundColor?: string
+  height?: string
 }
 
-export function InfoScreen({
-  contentType,
-  t,
-  backgroundColor,
-}: InfoScreenProps): JSX.Element {
+export function InfoScreen(props: InfoScreenProps): JSX.Element {
+  const { contentType, t, backgroundColor } = props
   let bodyText: string = ''
   switch (contentType) {
     case 'parameters':
@@ -54,30 +54,55 @@ export function InfoScreen({
           ? t('no_offsets_available')
           : 'No Labware Offset data available'
       break
+    case 'noLabwareOffsetDataYet':
+      bodyText =
+        t != null ? t('no_labware_offset_data') : 'No labware offset data yet'
+      break
     default:
       bodyText = contentType
   }
 
   return (
     <Flex
-      alignItems={ALIGN_CENTER}
-      width="100%"
-      flexDirection={DIRECTION_COLUMN}
-      gridGap={SPACING.spacing12}
-      backgroundColor={backgroundColor ?? COLORS.grey30}
-      borderRadius={BORDERS.borderRadius8}
-      padding={`${SPACING.spacing40} ${SPACING.spacing16}`}
       data-testid={`InfoScreen_${contentType}`}
+      css={css`
+        width: 100%;
+        padding: ${SPACING.spacing40} ${SPACING.spacing16};
+        grid-gap: ${SPACING.spacing12};
+        flex-direction: ${DIRECTION_COLUMN};
+        background-color: ${backgroundColor ?? COLORS.grey30};
+        border-radius: ${BORDERS.borderRadius8};
+        align-items: ${ALIGN_CENTER};
+        justify-content: ${JUSTIFY_CENTER};
+        > svg {
+          height: 1.25rem;
+          width: 1.25rem;
+        }
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          height: 27.25rem;
+          padding: 0;
+          grid-gap: ${SPACING.spacing32};
+          background-color: ${backgroundColor ?? COLORS.grey35};
+          border-radius: ${BORDERS.borderRadius12};
+          > svg {
+            height: 3rem;
+            width: 3rem;
+          }
+        }
+      `}
     >
       <Icon
         name="ot-alert"
         size="1.25rem"
         color={COLORS.grey60}
         aria-label="alert"
       />
-      <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="level3HeaderSemiBold"
+      >
         {bodyText}
-      </LegacyStyledText>
+      </StyledText>
     </Flex>
   )
 }