diff --git a/app/src/assets/images/modules/heaterShakerModuleV1@3x.png b/app/src/assets/images/modules/heaterShakerModuleV1@3x.png index b3904f52eb8..475da933864 100644 Binary files a/app/src/assets/images/modules/heaterShakerModuleV1@3x.png and b/app/src/assets/images/modules/heaterShakerModuleV1@3x.png differ diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx index 962f5c579c2..9a72944a95d 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx @@ -41,6 +41,23 @@ const HIDE_SCROLLBAR = css` } ` +const IMAGE_STYLE = css` + max-width: 11.5rem; + max-height: 6.875rem; +` + +const IMAGE_CONTAINER_STYLE = css` + width: 11.5rem; + height: 100%; + justify-content: ${JUSTIFY_CENTER}; +` + +const LIST_ITEM_STYLE = css` + align-items: ${ALIGN_CENTER}; + height: 6.875rem; + justify-content: ${JUSTIFY_SPACE_BETWEEN}; +` + interface LabwareStackModalProps { labwareIdTop: string runId: string @@ -69,7 +86,10 @@ export const LabwareStackModal = ( } = getLocationInfoNames(labwareIdTop, commands) const topDefinition = getSlotLabwareDefinition(labwareIdTop, commands) - const adapterDef = getSlotLabwareDefinition(adapterId ?? '', commands) + const adapterDef = + adapterId != null + ? getSlotLabwareDefinition(adapterId ?? '', commands) + : null const isModuleThermocycler = moduleModel == null ? false @@ -80,16 +100,12 @@ export const LabwareStackModal = ( : TC_MODULE_LOCATION_OT2 const moduleDisplayName = moduleModel != null ? getModuleDisplayName(moduleModel) : null ?? '' - const tiprackAdapterImg = ( - - ) + const isAdapterForTiprack = + adapterDef?.parameters.loadName === 'opentrons_flex_96_tiprack_adapter' + const tiprackAdapterImg = const moduleImg = moduleModel != null ? ( - + ) : null return isOnDevice ? ( @@ -105,53 +121,48 @@ export const LabwareStackModal = ( ), onClick: closeModal, + padding: `${SPACING.spacing32} ${SPACING.spacing32} ${SPACING.spacing12}`, }} > <> - + - + + + {adapterDef != null ? ( <> - + - {adapterDef.parameters.loadName === - 'opentrons_flex_96_tiprack_adapter' ? ( - tiprackAdapterImg + {isAdapterForTiprack ? ( + {tiprackAdapterImg} ) : ( - + + + )} {moduleModel != null ? ( @@ -160,13 +171,9 @@ export const LabwareStackModal = ( ) : null} {moduleModel != null ? ( - + - {moduleImg} + {moduleImg} ) : null} @@ -188,39 +195,34 @@ export const LabwareStackModal = ( <> - + - + + + {adapterDef != null ? ( <> - + - {adapterDef.parameters.loadName === - 'opentrons_flex_96_tiprack_adapter' ? ( - tiprackAdapterImg + {isAdapterForTiprack ? ( + {tiprackAdapterImg} ) : ( - + + + )} {moduleModel != null ? ( @@ -229,13 +231,9 @@ export const LabwareStackModal = ( ) : null} {moduleModel != null ? ( - + - {moduleImg} + {moduleImg} ) : null} diff --git a/components/src/hardware-sim/Labware/LabwareStackRender.tsx b/components/src/hardware-sim/Labware/LabwareStackRender.tsx index 6b1b9aec35d..bbd017cd868 100644 --- a/components/src/hardware-sim/Labware/LabwareStackRender.tsx +++ b/components/src/hardware-sim/Labware/LabwareStackRender.tsx @@ -27,7 +27,7 @@ export interface LabwareStackRenderProps { /** highlight bottom labware if it exists */ highlightBottom: boolean gRef?: React.RefObject - definitionBottom?: LabwareDefinition2 + definitionBottom?: LabwareDefinition2 | null shouldRotateAdapterOrientation?: boolean /** option to show well labels inside or outside of labware outline */ wellLabelOption?: WellLabelOption