fix(protocol-designer): fix small DQA bugs (#17228)

Fixes 3 small style bugs for 1) copy for importing a protocol on PD landing page, 2) background color of selected off deck location, and 3) height of divider in liquid overflow menu Closes RQA-3646, Closes RQA-3672, Closes RQA-3683
Opentrons · Jan 9, 2025 · 7f3376c · 7f3376c
1 parent 784c622
commit 7f3376c
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 7 deletions.
diff --git a/protocol-designer/cypress/support/commands.ts b/protocol-designer/cypress/support/commands.ts
@@ -55,7 +55,7 @@ export const locators = {
   import: 'Import',
   createNew: 'Create new',
   createProtocol: 'Create a protocol',
-  editProtocol: 'Edit existing protocol',
+  importProtocol: 'Import existing protocol',
   settingsDataTestid: 'SettingsIconButton',
   settings: 'Settings',
   privacyPolicy: 'a[href="https://opentrons.com/privacy-policy"]',
@@ -103,7 +103,7 @@ Cypress.Commands.add('verifyCreateNewHeader', () => {
 Cypress.Commands.add('verifyHomePage', () => {
   cy.contains(content.welcome)
   cy.contains('button', locators.createProtocol).should('be.visible')
-  cy.contains('label', locators.editProtocol).should('be.visible')
+  cy.contains('label', locators.importProtocol).should('be.visible')
   cy.getByTestId(locators.settingsDataTestid).should('be.visible')
   cy.get(locators.privacyPolicy).should('exist').and('be.visible')
   cy.get(locators.eula).should('exist').and('be.visible')

diff --git a/protocol-designer/src/assets/localization/en/shared.json b/protocol-designer/src/assets/localization/en/shared.json
@@ -37,6 +37,7 @@
   "heatershakermoduletype": "Heater-shaker Module",
   "hints": "Hints",
   "import": "Import",
+  "import_existing_protocol": "Import existing protocol",
   "incorrect_file_header": "Invalid file type",
   "incorrect_file_type_body": "Protocol Designer only accepts JSON protocol files created with Protocol Designer. Upload a valid file to continue.",
   "invalid_json_file_body": "This JSON file is either missing required information or contains sections that Protocol Designer cannot read. At this time we do not support JSON files created outside of Protocol Designer.",

diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
@@ -5,10 +5,10 @@ import { useLocation } from 'react-router-dom'
 import {
   ALIGN_CENTER,
   BORDERS,
-  Box,
   COLORS,
   CURSOR_POINTER,
   DIRECTION_COLUMN,
+  Divider,
   Flex,
   Icon,
   LiquidIcon,
@@ -92,7 +92,7 @@ export function LiquidsOverflowMenu(
         )
       })}
       {liquids.length > 0 ? (
-        <Box width="100%" border={`1px solid ${COLORS.grey20}`} />
+        <Divider color={COLORS.grey20} marginY="0" />
       ) : null}
       <MenuItem
         data-testid="defineLiquid"

diff --git a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
@@ -126,7 +126,7 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
               justifyContent={JUSTIFY_CENTER}
               alignItems={ALIGN_CENTER}
               borderRadius={BORDERS.borderRadius8}
-              backgroundColor={COLORS.grey20}
+              backgroundColor={COLORS.white}
             >
               <Flex
                 padding={SPACING.spacing60}

diff --git a/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx b/protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx
@@ -58,7 +58,7 @@ describe('Landing', () => {
     )
     fireEvent.click(screen.getByRole('button', { name: 'Create a protocol' }))
     expect(vi.mocked(toggleNewProtocolModal)).toHaveBeenCalled()
-    screen.getByText('Edit existing protocol')
+    screen.getByText('Import existing protocol')
     screen.getByRole('img', { name: 'welcome image' })
   })
 

diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx
@@ -149,7 +149,7 @@ export function Landing(): JSX.Element {
         <StyledLabel>
           <Flex css={LINK_BUTTON_STYLE}>
             <StyledText desktopStyle="bodyLargeRegular">
-              {t('edit_existing')}
+              {t('import_existing_protocol')}
             </StyledText>
           </Flex>
           <input type="file" onChange={loadFile} />