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

modify the size of images and add white background close RQA-3194 and RQA-3195
Opentrons · Sep 18, 2024 · e93f205 · e93f205
1 parent f3558f4
commit e93f205
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx b/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}

diff --git a/protocol-designer/src/assets/images/modules/MagneticBlock_GEN1_HERO.png b/protocol-designer/src/assets/images/modules/MagneticBlock_GEN1_HERO.png
diff --git a/protocol-designer/src/assets/images/modules/MagneticBlock_GEN1_HERO_crop.png b/protocol-designer/src/assets/images/modules/MagneticBlock_GEN1_HERO_crop.png
diff --git a/protocol-designer/src/assets/images/modules/magnetic_block_gen_1.png b/protocol-designer/src/assets/images/modules/magnetic_block_gen_1.png
diff --git a/protocol-designer/src/components/modules/ModuleDiagram.tsx b/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,9 @@ 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/mag_block.png'
+// import mag_block from '../../assets/images/modules/MagneticBlock_GEN1_HERO_crop.png'
+import mag_block from '../../assets/images/modules/magnetic_block_gen_1.png'
 import type { ModuleType, ModuleModel } from '@opentrons/shared-data'
 
 interface Props {
@@ -64,7 +66,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}
+    />
+  )
 }
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx b/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}
+                              minWidth="3.75rem"
+                            >
+                              <ModuleDiagram
+                                type={module.type}
+                                model={module.model}
+                              />
+                            </Flex>
                           }
                         />
                       </ListItem>

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
@@ -20,6 +20,7 @@ import {
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
+  OVERFLOW_AUTO,
   PRODUCT,
   RadioButton,
   SPACING,
@@ -137,7 +138,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}
             >