fix(protocol-designer): fix modules and fixtures image display (#16282)

* fix(protocol-designer): fix modules and fixtures image display

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -33,7 +33,7 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
   } = props
   return (
     <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
-      <Flex gridGap={SPACING.spacing8} width="50%" alignItems={ALIGN_CENTER}>
+      <Flex gridGap={SPACING.spacing16} width="50%" alignItems={ALIGN_CENTER}>
         {leftHeaderItem != null ? (
           <Flex size="3.75rem">{leftHeaderItem}</Flex>
         ) : null}

protocol-designer/src/components/modules/ModuleDiagram.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styles from './styles.module.css'
+import { css } from 'styled-components'
 import {
   MAGNETIC_MODULE_TYPE,
   TEMPERATURE_MODULE_TYPE,
@@ -25,7 +25,7 @@ import temp_deck_gen_2_transparent from '../../assets/images/modules/temp_deck_g
 import thermocycler from '../../assets/images/modules/thermocycler.png'
 import thermocycler_gen2 from '../../assets/images/modules/thermocycler_gen2.png'
 import heater_shaker_module_transparent from '../../assets/images/modules/heater_shaker_module_transparent.png'
-import mag_block from '../../assets/images/modules/mag_block.png'
+import mag_block from '../../assets/images/modules/MagneticBlock_GEN1_HERO.png'
 import type { ModuleType, ModuleModel } from '@opentrons/shared-data'
 
 interface Props {
@@ -64,7 +64,18 @@ const MODULE_IMG_BY_TYPE: ModuleImg = {
   },
 }
 
+const IMAGE_MAX_WIDTH = '96px'
 export function ModuleDiagram(props: Props): JSX.Element {
   const model = MODULE_IMG_BY_TYPE[props.type][props.model]
-  return <img className={styles.module_diagram} src={model} alt={props.type} />
+  return (
+    <img
+      css={css`
+        max-width: ${IMAGE_MAX_WIDTH};
+        width: 100%;
+        height: auto;
+      `}
+      src={model}
+      alt={props.type}
+    />
+  )
 }

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>

protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx

@@ -2,6 +2,9 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import {
+  ALIGN_CENTER,
+  BORDERS,
+  COLORS,
   DIRECTION_COLUMN,
   EmptySelectorButton,
   Flex,
@@ -262,10 +265,17 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
                           }}
                           header={getModuleDisplayName(module.model)}
                           leftHeaderItem={
-                            <ModuleDiagram
-                              type={module.type}
-                              model={module.model}
-                            />
+                            <Flex
+                              backgroundColor={COLORS.white}
+                              borderRadius={BORDERS.borderRadius8}
+                              alignItems={ALIGN_CENTER}
+                              width="3.75rem"
+                            >
+                              <ModuleDiagram
+                                type={module.type}
+                                model={module.model}
+                              />
+                            </Flex>
                           }
                         />
                       </ListItem>

protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx

@@ -21,6 +21,7 @@ import {
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
+  OVERFLOW_AUTO,
   PRODUCT,
   RadioButton,
   SPACING,
@@ -138,7 +139,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
             <Flex
               flexDirection="column"
               height="41.5vh"
-              overflowY="scroll"
+              overflowY={OVERFLOW_AUTO}
               marginBottom={SPACING.spacing16}
               marginTop={SPACING.spacing60}
             >

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}
         />