From 7f3376c890e0dfe26e9a6c622ec2fa74ce22f49a Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:55:52 -0500
Subject: [PATCH] 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
---
 protocol-designer/cypress/support/commands.ts                 | 4 ++--
 protocol-designer/src/assets/localization/en/shared.json      | 1 +
 protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx  | 4 ++--
 protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx      | 2 +-
 .../src/pages/Landing/__tests__/Landing.test.tsx              | 2 +-
 protocol-designer/src/pages/Landing/index.tsx                 | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/protocol-designer/cypress/support/commands.ts b/protocol-designer/cypress/support/commands.ts
index 5a40d7762cb..deaa7a4d1ff 100644
--- 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
index 212ae62bf05..afbd96b1211 100644
--- 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
index 1a4b2e12c29..38b5867b2cc 100644
--- 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
index 07ca6fcd197..7f3cb7deec1 100644
--- 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
index c064a66dfb2..0cb0d3c9a68 100644
--- 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
index 412800c5bc4..3f2f839e33b 100644
--- 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} />