edit a few things to match lateset designs

protocol-designer/src/assets/localization/en/create_new_protocol.json

@@ -3,15 +3,16 @@
   "add_fixtures": "Add your fixtures",
   "add_gripper": "Add a gripper",
   "add_modules": "Add your modules",
-  "add_pip": "Add a pipette",
+  "add_pip": "Add a pipette and tips",
   "author_org": "Author/Organization",
   "basics": "Let’s start with the basics",
   "description": "Description",
   "edit": "Edit",
   "fixtures_added": "Fixtures added",
   "modules_added": "Modules added",
   "name": "Name",
-  "need_gripper": "Does your protocol need a Flex Gripper?",
+  "need_gripper": "Do you want to move labware automatically with the gripper?",
+  "fixtures_replace": "Fixtures replace standard deck slots and let you add functionality to your Flex.",
   "pip_gen": "Pipette generation",
   "pip_tips": "Pipette tips",
   "pip_type": "Pipette type",
@@ -21,20 +22,20 @@
   "questions": "We’re going to ask a few questions to help you get started building your protocol.",
   "remove": "Remove",
   "robot_pips": "Robot pipettes",
-  "robot_type": "Which robot would you like to use?",
+  "robot_type": "What kind of robot do you have?",
   "show_all_tips": "Show all tips",
   "show_default_tips": "Show default tips",
   "stagingArea_cutoutA3": "Staging area A3",
   "stagingArea_cutoutB3": "Staging area B3",
   "stagingArea_cutoutC3": "Staging area C3",
   "stagingArea_cutoutD3": "Staging area D3",
-  "swap": "Swap",
+  "swap": "Swap pipettes",
   "tell_us": "Tell us about your protocol",
   "trashBin": "Trash bin",
   "vol_label": "{{volume}} uL",
   "wasteChute": "Waste chute",
   "which_fixtures": "Which fixtures will you be using?",
-  "which_mods": "Which modules will you be using?",
-  "which_pip": "Tell us what pipette and tips you want to use.",
+  "which_mods": "Select modules to use in your protocol.",
+  "which_pip": "Pick your first pipette. If you need a second pipette, you can add it next.",
   "your_pips": "Your pipettes"
 }

protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx

@@ -33,7 +33,11 @@ export function AddMetadata(props: WizardTileProps): JSX.Element | null {
         proceed(1)
       }}
     >
-      <>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        marginTop={SPACING.spacing60}
+        gridGap={SPACING.spacing12}
+      >
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
           <StyledText desktopStyle="captionRegular">{t('name')}</StyledText>
           {/* TODO(ja, 8/9/24): add new input field */}
@@ -55,7 +59,7 @@ export function AddMetadata(props: WizardTileProps): JSX.Element | null {
             register={register}
           />
         </Flex>
-      </>
+      </Flex>
     </WizardBody>
   )
 }

protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx

@@ -42,7 +42,7 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
   const { t, i18n } = useTranslation('create_new_protocol')
   const otherMount = mount === 'left' ? 'right' : 'left'
   const allLabware = useSelector(getLabwareDefsByURI)
-
+  const is96Channel = pipetteName === 'p1000_96'
   return (
     <ListItem type="noActive">
       <Flex
@@ -52,7 +52,10 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
       >
         <Flex gridGap={SPACING.spacing4} flexDirection={DIRECTION_COLUMN}>
           <StyledText desktopStyle="bodyDefaultSemiBold">
-            {i18n.format(t('pip', { mount }), 'capitalize')}
+            {i18n.format(
+              t('pip', { mount: is96Channel ? 'Left+Right' : mount }),
+              'capitalize'
+            )}
           </StyledText>
           <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
             {getPipetteSpecsV2(pipetteName)?.displayName}

protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx

@@ -39,6 +39,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
     <WizardBody
       stepNumber={5}
       header={t('add_fixtures')}
+      subHeader={t('fixtures_replace')}
       disabled={false}
       goBack={() => {
         goBack(1)

protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
-import { Flex, SPACING, StyledText, RadioButton } from '@opentrons/components'
+import {
+  Flex,
+  SPACING,
+  StyledText,
+  RadioButton,
+  DIRECTION_COLUMN,
+} from '@opentrons/components'
 import { WizardBody } from './WizardBody'
 
 import type { WizardTileProps } from './types'
@@ -37,7 +43,7 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null {
         proceed(1)
       }}
     >
-      <>
+      <Flex flexDirection={DIRECTION_COLUMN} marginTop={SPACING.spacing60}>
         <StyledText
           desktopStyle="headingSmallBold"
           marginBottom={SPACING.spacing16}
@@ -62,7 +68,7 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null {
             isSelected={gripperStatus === 'no'}
           />
         </Flex>
-      </>
+      </Flex>
     </WizardBody>
   )
 }

protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx

@@ -58,6 +58,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
   const allPipetteOptions = getAllPipetteNames('maxVolume', 'channels')
   const robotType = fields.robotType ?? OT2_ROBOT_TYPE
   const defaultMount = mount ?? 'left'
+  const has96Channel = pipettesByMount.left.pipetteName === 'p1000_96'
   const selectedPip =
     pipetteType === '96' || pipetteGen === 'GEN1'
       ? `${pipetteVolume}_${pipetteType}`
@@ -69,8 +70,6 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     setPipetteType(null)
     setPipetteGen('flex')
     setPipetteVolume(null)
-    setValue(`pipettesByMount.${defaultMount}.pipetteName`, undefined)
-    setValue(`pipettesByMount.${defaultMount}.tiprackDefURI`, undefined)
   }
 
   //    initialize pipette name once all fields are filled out
@@ -95,6 +94,8 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
       goBack={() => {
         if (page === 'add') {
           resetFields()
+          setValue(`pipettesByMount.${defaultMount}.pipetteName`, undefined)
+          setValue(`pipettesByMount.${defaultMount}.tiprackDefURI`, undefined)
           goBack(1)
         } else {
           setPage('add')
@@ -109,7 +110,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
           flexDirection="column"
           height="48vh"
           overflowY="scroll"
-          marginBottom={SPACING.spacing40}
+          marginTop={SPACING.spacing60}
         >
           <>
             <StyledText
@@ -119,27 +120,31 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
               {t('pip_type')}
             </StyledText>
             <Flex gridGap={SPACING.spacing4}>
-              {PIPETTE_TYPES[robotType].map(type => (
-                <RadioButton
-                  key={`${type.label}_${type.value}`}
-                  onChange={() => {
-                    setPipetteType(type.value)
-                    setPipetteGen('flex')
-                    setPipetteVolume(null)
-                    setValue(
-                      `pipettesByMount.${defaultMount}.pipetteName`,
-                      undefined
-                    )
-                    setValue(
-                      `pipettesByMount.${defaultMount}.tiprackDefURI`,
-                      undefined
-                    )
-                  }}
-                  buttonLabel={t(`shared:${type.label}`)}
-                  buttonValue="single"
-                  isSelected={pipetteType === type.value}
-                />
-              ))}
+              {PIPETTE_TYPES[robotType].map(type => {
+                return type.value === '96' &&
+                  (pipettesByMount.left.pipetteName != null ||
+                    pipettesByMount.right.pipetteName != null) ? null : (
+                  <RadioButton
+                    key={`${type.label}_${type.value}`}
+                    onChange={() => {
+                      setPipetteType(type.value)
+                      setPipetteGen('flex')
+                      setPipetteVolume(null)
+                      setValue(
+                        `pipettesByMount.${defaultMount}.pipetteName`,
+                        undefined
+                      )
+                      setValue(
+                        `pipettesByMount.${defaultMount}.tiprackDefURI`,
+                        undefined
+                      )
+                    }}
+                    buttonLabel={t(`shared:${type.label}`)}
+                    buttonValue="single"
+                    isSelected={pipetteType === type.value}
+                  />
+                )
+              })}
             </Flex>
           </>
           {pipetteType != null && robotType === OT2_ROBOT_TYPE ? (
@@ -314,35 +319,37 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
             <StyledText desktopStyle="headingSmallBold">
               {t('your_pips')}
             </StyledText>
-            <Btn
-              onClick={() => {
-                const leftPipetteName = pipettesByMount.left.pipetteName
-                const rightPipetteName = pipettesByMount.right.pipetteName
-                const leftTiprackDefURI = pipettesByMount.left.tiprackDefURI
-                const rightTiprackDefURI = pipettesByMount.right.tiprackDefURI
+            {has96Channel ? null : (
+              <Btn
+                onClick={() => {
+                  const leftPipetteName = pipettesByMount.left.pipetteName
+                  const rightPipetteName = pipettesByMount.right.pipetteName
+                  const leftTiprackDefURI = pipettesByMount.left.tiprackDefURI
+                  const rightTiprackDefURI = pipettesByMount.right.tiprackDefURI
 
-                setValue('pipettesByMount.left.pipetteName', rightPipetteName)
-                setValue('pipettesByMount.right.pipetteName', leftPipetteName)
-                setValue(
-                  'pipettesByMount.left.tiprackDefURI',
-                  rightTiprackDefURI
-                )
-                setValue(
-                  'pipettesByMount.right.tiprackDefURI',
-                  leftTiprackDefURI
-                )
-              }}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {t('swap')}
-              </StyledText>
-            </Btn>
+                  setValue('pipettesByMount.left.pipetteName', rightPipetteName)
+                  setValue('pipettesByMount.right.pipetteName', leftPipetteName)
+                  setValue(
+                    'pipettesByMount.left.tiprackDefURI',
+                    rightTiprackDefURI
+                  )
+                  setValue(
+                    'pipettesByMount.right.tiprackDefURI',
+                    leftTiprackDefURI
+                  )
+                }}
+              >
+                <StyledText desktopStyle="bodyDefaultRegular">
+                  {t('swap')}
+                </StyledText>
+              </Btn>
+            )}
           </Flex>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
             {pipettesByMount.left.pipetteName != null &&
             pipettesByMount.left.tiprackDefURI != null ? (
               <PipetteInfoItem
-                mount="left"
+                mount={'left'}
                 pipetteName={pipettesByMount.left.pipetteName as PipetteName}
                 tiprackDefURIs={pipettesByMount.left.tiprackDefURI}
                 editClick={() => {
@@ -380,7 +387,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
                 setValue={setValue}
                 cleanForm={resetFields}
               />
-            ) : (
+            ) : has96Channel ? null : (
               <EmptySelectorButton
                 onClick={() => {
                   setPage('add')

protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Flex, RadioButton, SPACING, StyledText } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  RadioButton,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { WizardBody } from './WizardBody'
 import type { WizardTileProps } from './types'
@@ -15,13 +21,12 @@ export function SelectRobot(props: WizardTileProps): JSX.Element {
     <WizardBody
       stepNumber={1}
       header={t('basics')}
-      subHeader={t('questions')}
       disabled={robotType === undefined}
       proceed={() => {
         proceed(1)
       }}
     >
-      <>
+      <Flex flexDirection={DIRECTION_COLUMN} marginTop={SPACING.spacing60}>
         <StyledText
           desktopStyle="headingSmallBold"
           marginBottom={SPACING.spacing16}
@@ -47,7 +52,7 @@ export function SelectRobot(props: WizardTileProps): JSX.Element {
             isSelected={robotType === OT2_ROBOT_TYPE}
           />
         </Flex>
-      </>
+      </Flex>
     </WizardBody>
   )
 }

protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

@@ -67,7 +67,6 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           {subHeader != null ? (
             <StyledText
               desktopStyle="headingLargeRegular"
-              marginBottom={SPACING.spacing60}
               color={COLORS.grey60}
             >
               {subHeader}

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx

@@ -47,7 +47,9 @@ describe('SelectGripper', () => {
     render(props)
     screen.getByText('Step 3')
     screen.getByText('Add a gripper')
-    screen.getByText('Does your protocol need a Flex Gripper?')
+    screen.getByText(
+      'Do you want to move labware automatically with the gripper?'
+    )
     fireEvent.click(screen.getByRole('label', { name: 'Yes' }))
     expect(props.setValue).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('label', { name: 'No' }))

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx

@@ -45,10 +45,7 @@ describe('SelectRobot', () => {
     render(props)
     screen.getByText('Step 1')
     screen.getByText('Let’s start with the basics')
-    screen.getByText(
-      'We’re going to ask a few questions to help you get started building your protocol.'
-    )
-    screen.getByText('Which robot would you like to use?')
+    screen.getByText('What kind of robot do you have?')
     fireEvent.click(screen.getByRole('label', { name: 'Opentrons Flex' }))
     expect(props.setValue).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('label', { name: 'Opentrons OT-2' }))