From 3460d7d2405d9c7c9a89cd91cc87f9ccb46d0895 Mon Sep 17 00:00:00 2001
From: Jethary <jethary@opentrons.com>
Date: Wed, 18 Dec 2024 10:48:55 -0500
Subject: [PATCH] address feedback

---
 .../BaseDeck/WasteChuteFixture.tsx            | 22 +++++++++++--------
 .../src/hardware-sim/Deck/FlexTrash.tsx       |  3 +--
 .../molecules/DropdownStepFormField/index.tsx | 14 +++++-------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
index 938d6fb29ef..cc977a4e8b6 100644
--- a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
@@ -11,7 +11,6 @@ import {
 import { DeckLabelSet } from '../../organisms'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
-import { blue50 } from '../../helix-design-system/colors'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
 import { SlotBase } from './SlotBase'
 import type {
@@ -21,6 +20,11 @@ import type {
 } from '@opentrons/shared-data'
 import type { DeckLabelProps } from '../../molecules'
 
+const WASTE_CHUTE_WIDTH = 130
+const WASTE_CHUTE_HEIGHT = 138
+const WASTE_CHUTE_X = 322
+const WASTE_CHUTE_Y = -51
+const TAG_HEIGHT = 28
 interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
   cutoutId: typeof WASTE_CHUTE_CUTOUT
   deckDefinition: DeckDefinition
@@ -96,9 +100,9 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
   return (
     <>
       <RobotCoordsForeignObject
-        width={130}
-        height={138}
-        x={322}
+        width={WASTE_CHUTE_WIDTH}
+        height={WASTE_CHUTE_HEIGHT}
+        x={WASTE_CHUTE_X}
         y={-51}
         flexProps={{ flex: '1' }}
         foreignObjectProps={{ flex: '1' }}
@@ -113,7 +117,7 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
           justifyContent={JUSTIFY_CENTER}
           padding={SPACING.spacing8}
           width="100%"
-          border={showHighlight ? `3px solid ${blue50}` : 'none'}
+          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
         >
           <Icon name="trash" color={wasteIconColor} height="2rem" />
           <Text
@@ -127,10 +131,10 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (
         <DeckLabelSet
-          width={130}
-          height={138}
-          x={322}
-          y={-79}
+          width={WASTE_CHUTE_WIDTH}
+          height={WASTE_CHUTE_HEIGHT}
+          x={WASTE_CHUTE_X}
+          y={WASTE_CHUTE_Y - TAG_HEIGHT}
           deckLabels={tagInfo}
         />
       ) : null}
diff --git a/components/src/hardware-sim/Deck/FlexTrash.tsx b/components/src/hardware-sim/Deck/FlexTrash.tsx
index 99ca9c83e21..00ae3fb2a1b 100644
--- a/components/src/hardware-sim/Deck/FlexTrash.tsx
+++ b/components/src/hardware-sim/Deck/FlexTrash.tsx
@@ -9,7 +9,6 @@ import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
-import { blue50 } from '../../helix-design-system/colors'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
@@ -106,7 +105,7 @@ export const FlexTrash = ({
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing8}
           width="100%"
-          border={showHighlight ? `3px solid ${blue50}` : 'none'}
+          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
         >
           {rotateDegrees === '180' ? (
             <Text
diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index 5d7a647dbd7..9ad0feb716b 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -21,6 +21,9 @@ export interface DropdownStepFormFieldProps extends FieldProps {
   onExit?: () => void
 }
 
+const FIRST_FIELDS = ['aspirate_labware', 'labware', 'moduleId']
+const SECOND_FIELDS = ['dispense_labware', 'newLocation']
+
 export function DropdownStepFormField(
   props: DropdownStepFormFieldProps
 ): JSX.Element {
@@ -55,21 +58,14 @@ export function DropdownStepFormField(
       id: value,
       text,
     }
-    if (
-      fieldName === 'aspirate_labware' ||
-      fieldName === 'labware' ||
-      fieldName === 'moduleId'
-    ) {
+    if (FIRST_FIELDS.includes(fieldName)) {
       dispatch(
         selectDropdownItem({
           selection: { ...selection, field: '1' },
           mode: 'add',
         })
       )
-    } else if (
-      fieldName === 'dispense_labware' ||
-      fieldName === 'newLocation'
-    ) {
+    } else if (SECOND_FIELDS.includes(fieldName)) {
       dispatch(
         selectDropdownItem({
           selection: { ...selection, field: '2' },