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