update ui for fixtures

Opentrons · Sep 18, 2024 · 883c508 · 883c508
1 parent 48adb7b
commit 883c508
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
@@ -3,6 +3,9 @@ import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
 import { THERMOCYCLER_MODULE_V2 } from '@opentrons/shared-data'
 import {
+  ALIGN_CENTER,
+  BORDERS,
+  COLORS,
   DIRECTION_COLUMN,
   EmptySelectorButton,
   Flex,
@@ -168,7 +171,16 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
                       }
                       header={t(`${ae}`)}
                       leftHeaderItem={
-                        <AdditionalEquipmentDiagram additionalEquipment={ae} />
+                        <Flex
+                          backgroundColor={COLORS.white}
+                          borderRadius={BORDERS.borderRadius8}
+                          alignItems={ALIGN_CENTER}
+                          width="3.75rem"
+                        >
+                          <AdditionalEquipmentDiagram
+                            additionalEquipment={ae}
+                          />
+                        </Flex>
                       }
                     />
                   </ListItem>

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx
@@ -269,7 +269,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
                               backgroundColor={COLORS.white}
                               borderRadius={BORDERS.borderRadius8}
                               alignItems={ALIGN_CENTER}
-                              minWidth="3.75rem"
+                              width="3.75rem"
                             >
                               <ModuleDiagram
                                 type={module.type}

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx
@@ -78,7 +78,8 @@ interface EquipmentProps {
   additionalEquipment: AdditionalEquipment
 }
 
-const DIMENSION = '60px'
+const IMAGE_WIDTH = '60px'
+const IMAGE_HEIGHT = '54px'
 
 export function AdditionalEquipmentDiagram(props: EquipmentProps): JSX.Element {
   const { additionalEquipment } = props
@@ -87,8 +88,8 @@ export function AdditionalEquipmentDiagram(props: EquipmentProps): JSX.Element {
     case 'wasteChute': {
       return (
         <img
-          width={DIMENSION}
-          height={DIMENSION}
+          width={IMAGE_WIDTH}
+          height={IMAGE_HEIGHT}
           src={wasteChuteImage}
           alt={additionalEquipment}
         />
@@ -97,8 +98,8 @@ export function AdditionalEquipmentDiagram(props: EquipmentProps): JSX.Element {
     case 'trashBin': {
       return (
         <img
-          width={DIMENSION}
-          height={DIMENSION}
+          width={IMAGE_WIDTH}
+          height={IMAGE_HEIGHT}
           src={trashBinImage}
           alt={additionalEquipment}
         />
@@ -107,8 +108,8 @@ export function AdditionalEquipmentDiagram(props: EquipmentProps): JSX.Element {
     default: {
       return (
         <img
-          width={DIMENSION}
-          height={DIMENSION}
+          width={IMAGE_WIDTH}
+          height={IMAGE_HEIGHT}
           src={stagingAreaImage}
           alt={additionalEquipment}
         />