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

Author: ncdiehl11

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')

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.",

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"

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}

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' })
   })
 

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} />