fix(app): ui changes to moduleInfo and liquid color icon (#13334)

closes RQA-1301 and RQA-1298
Opentrons · Aug 17, 2023 · 524c76f · 524c76f
1 parent e88397d
commit 524c76f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx
@@ -17,6 +17,7 @@ import {
   getModuleDisplayName,
   getModuleDef2,
   MAGNETIC_BLOCK_V1,
+  THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
 import { StyledText } from '../../atoms/text'
@@ -58,7 +59,13 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
       y={0}
       height={labwareInterfaceYDimension ?? yDimension}
       width={labwareInterfaceXDimension ?? xDimension}
-      flexProps={{ padding: SPACING.spacing16 }}
+      flexProps={{
+        padding: SPACING.spacing16,
+        backgroundColor:
+          moduleDef.moduleType === THERMOCYCLER_MODULE_TYPE
+            ? COLORS.white
+            : COLORS.transparent,
+      }}
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -49,6 +49,13 @@ const HIDE_SCROLLBAR = css`
   }
 `
 
+const LIQUID_BORDER_STYLE = css`
+  border-style: ${BORDERS.styleSolid};
+  border-width: 1px;
+  border-color: ${COLORS.medGreyEnabled};
+  border-radius: ${BORDERS.radiusSoftCorners};
+`
+
 export function SetupLiquidsList(props: SetupLiquidsListProps): JSX.Element {
   const { runId } = props
   const protocolData = useMostRecentCompletedAnalysis(runId)
@@ -261,7 +268,7 @@ export const LiquidsListItemDetails = (
   return (
     <Flex flexDirection={DIRECTION_ROW}>
       <Flex
-        css={BORDERS.cardOutlineBorder}
+        css={LIQUID_BORDER_STYLE}
         padding={SPACING.spacing12}
         height="max-content"
         backgroundColor={COLORS.white}