fix(app, components): update style of LabwareStackModal (#15971)

Updates style of `LabwareStackModal` component according to design changes Closes RQA-2971
Opentrons · Aug 13, 2024 · 113b3aa · 113b3aa
1 parent 312236e
commit 113b3aa
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 73 deletions.
diff --git a/app/src/assets/images/modules/[email protected] b/app/src/assets/images/modules/[email protected]
diff --git 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 = (
-    <img width="156px" height="130px" src={tiprackAdapter} />
-  )
+  const isAdapterForTiprack =
+    adapterDef?.parameters.loadName === 'opentrons_flex_96_tiprack_adapter'
+  const tiprackAdapterImg = <img src={tiprackAdapter} css={IMAGE_STYLE} />
   const moduleImg =
     moduleModel != null ? (
-      <img
-        width="156px"
-        height="130px"
-        src={getModuleImage(moduleModel, true)}
-      />
+      <img src={getModuleImage(moduleModel, true)} css={IMAGE_STYLE} />
     ) : null
 
   return isOnDevice ? (
@@ -105,53 +121,48 @@ export const LabwareStackModal = (
           </Flex>
         ),
         onClick: closeModal,
+        padding: `${SPACING.spacing32} ${SPACING.spacing32} ${SPACING.spacing12}`,
       }}
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}
         css={HIDE_SCROLLBAR}
         overflowY="scroll"
-        gridGap={SPACING.spacing16}
         width="41.675rem"
       >
         <>
-          <Flex
-            alignItems={ALIGN_CENTER}
-            height="6.875rem"
-            gridGap={SPACING.spacing32}
-          >
+          <Flex css={LIST_ITEM_STYLE}>
             <LabwareStackLabel
               isOnDevice
               text={labwareName}
               subText={labwareNickname}
             />
-            <LabwareStackRender
-              definitionTop={topDefinition}
-              definitionBottom={adapterDef}
-              highlightBottom={false}
-              highlightTop={true}
-            />
+            <Flex css={IMAGE_CONTAINER_STYLE}>
+              <LabwareStackRender
+                definitionTop={topDefinition}
+                definitionBottom={adapterDef}
+                highlightBottom={false}
+                highlightTop={adapterDef != null && !isAdapterForTiprack}
+              />
+            </Flex>
           </Flex>
           <Divider marginY={SPACING.spacing16} />
         </>
         {adapterDef != null ? (
           <>
-            <Flex
-              alignItems={ALIGN_CENTER}
-              height="6.875rem"
-              gridGap={SPACING.spacing32}
-            >
+            <Flex css={LIST_ITEM_STYLE}>
               <LabwareStackLabel text={adapterName ?? ''} isOnDevice />
-              {adapterDef.parameters.loadName ===
-              'opentrons_flex_96_tiprack_adapter' ? (
-                tiprackAdapterImg
+              {isAdapterForTiprack ? (
+                <Flex css={IMAGE_CONTAINER_STYLE}>{tiprackAdapterImg}</Flex>
               ) : (
-                <LabwareStackRender
-                  definitionTop={topDefinition}
-                  definitionBottom={adapterDef}
-                  highlightBottom={true}
-                  highlightTop={false}
-                />
+                <Flex css={IMAGE_CONTAINER_STYLE}>
+                  <LabwareStackRender
+                    definitionTop={topDefinition}
+                    definitionBottom={adapterDef}
+                    highlightBottom={true}
+                    highlightTop={false}
+                  />
+                </Flex>
               )}
             </Flex>
             {moduleModel != null ? (
@@ -160,13 +171,9 @@ export const LabwareStackModal = (
           </>
         ) : null}
         {moduleModel != null ? (
-          <Flex
-            alignItems={ALIGN_CENTER}
-            height="6.875rem"
-            gridGap={SPACING.spacing32}
-          >
+          <Flex css={LIST_ITEM_STYLE}>
             <LabwareStackLabel text={moduleDisplayName} isOnDevice />
-            {moduleImg}
+            <Flex css={IMAGE_CONTAINER_STYLE}>{moduleImg}</Flex>
           </Flex>
         ) : null}
       </Flex>
@@ -188,39 +195,34 @@ export const LabwareStackModal = (
       <Box padding={SPACING.spacing24} backgroundColor={COLORS.white}>
         <Flex flexDirection={DIRECTION_COLUMN}>
           <>
-            <Flex
-              alignItems={ALIGN_CENTER}
-              height="6.875rem"
-              justifyContent={JUSTIFY_SPACE_BETWEEN}
-            >
+            <Flex css={LIST_ITEM_STYLE}>
               <LabwareStackLabel text={labwareName} subText={labwareNickname} />
-              <LabwareStackRender
-                definitionTop={topDefinition}
-                definitionBottom={adapterDef}
-                highlightBottom={false}
-                highlightTop={true}
-              />
+              <Flex css={IMAGE_CONTAINER_STYLE}>
+                <LabwareStackRender
+                  definitionTop={topDefinition}
+                  definitionBottom={adapterDef}
+                  highlightBottom={false}
+                  highlightTop={adapterDef != null && !isAdapterForTiprack}
+                />
+              </Flex>
             </Flex>
             <Divider marginY={SPACING.spacing16} />
           </>
           {adapterDef != null ? (
             <>
-              <Flex
-                alignItems={ALIGN_CENTER}
-                height="6.875rem"
-                justifyContent={JUSTIFY_SPACE_BETWEEN}
-              >
+              <Flex css={LIST_ITEM_STYLE}>
                 <LabwareStackLabel text={adapterName ?? ''} />
-                {adapterDef.parameters.loadName ===
-                'opentrons_flex_96_tiprack_adapter' ? (
-                  tiprackAdapterImg
+                {isAdapterForTiprack ? (
+                  <Flex css={IMAGE_CONTAINER_STYLE}>{tiprackAdapterImg}</Flex>
                 ) : (
-                  <LabwareStackRender
-                    definitionTop={topDefinition}
-                    definitionBottom={adapterDef}
-                    highlightBottom={true}
-                    highlightTop={false}
-                  />
+                  <Flex css={IMAGE_CONTAINER_STYLE}>
+                    <LabwareStackRender
+                      definitionTop={topDefinition}
+                      definitionBottom={adapterDef}
+                      highlightBottom
+                      highlightTop={false}
+                    />
+                  </Flex>
                 )}
               </Flex>
               {moduleModel != null ? (
@@ -229,13 +231,9 @@ export const LabwareStackModal = (
             </>
           ) : null}
           {moduleModel != null ? (
-            <Flex
-              alignItems={ALIGN_CENTER}
-              justifyContent={JUSTIFY_SPACE_BETWEEN}
-              height="6.875rem"
-            >
+            <Flex css={LIST_ITEM_STYLE}>
               <LabwareStackLabel text={moduleDisplayName} />
-              {moduleImg}
+              <Flex css={IMAGE_CONTAINER_STYLE}>{moduleImg}</Flex>
             </Flex>
           ) : null}
         </Flex>

diff --git 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<SVGGElement>
-  definitionBottom?: LabwareDefinition2
+  definitionBottom?: LabwareDefinition2 | null
   shouldRotateAdapterOrientation?: boolean
   /** option to show well labels inside or outside of labware outline */
   wellLabelOption?: WellLabelOption