fix(app): fix styling for instrument and module (#14444)

Fix empty card styling for instrument cards and border radius for instrument and module cards closes RQA-2262
Opentrons · Feb 8, 2024 · 8dc44b0 · 8dc44b0
1 parent 17963c0
commit 8dc44b0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
@@ -64,7 +64,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element {
     <Flex
       alignItems={ALIGN_FLEX_START}
       backgroundColor={COLORS.grey10}
-      borderRadius={BORDERS.radiusSoftCorners}
+      borderRadius={BORDERS.borderRadiusSize2}
       gridGap={SPACING.spacing8}
       padding={SPACING.spacing16}
       position={POSITION_RELATIVE}

diff --git a/app/src/organisms/Devices/PipetteCard/index.tsx b/app/src/organisms/Devices/PipetteCard/index.tsx
@@ -185,7 +185,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
   return (
     <Flex
       backgroundColor={COLORS.grey10}
-      borderRadius={BORDERS.radiusSoftCorners}
+      borderRadius={BORDERS.borderRadiusSize2}
       width="100%"
       data-testid={`PipetteCard_${String(pipetteDisplayName)}`}
     >
@@ -252,22 +252,23 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
         <>
           <Box padding={SPACING.spacing16} width="100%">
             <Flex flexDirection={DIRECTION_ROW} paddingRight={SPACING.spacing8}>
-              <Flex alignItems={ALIGN_CENTER} width="3.75rem" height="3.375rem">
-                {pipetteModelSpecs !== null ? (
+              {pipetteModelSpecs !== null ? (
+                <Flex
+                  alignItems={ALIGN_CENTER}
+                  width="3.75rem"
+                  height="3.375rem"
+                  paddingRight={SPACING.spacing8}
+                >
                   <InstrumentDiagram
                     pipetteSpecs={pipetteModelSpecs}
                     mount={mount}
                     //  pipette images for Flex are slightly smaller so need to be scaled accordingly
                     transform="scale(0.3)"
-                    transformOrigin={isFlex ? '-10% 52%' : '20% 52%'}
+                    transformOrigin={isFlex ? '-5% 52%' : '20% 52%'}
                   />
-                ) : null}
-              </Flex>
-              <Flex
-                flexDirection={DIRECTION_COLUMN}
-                flex="100%"
-                paddingLeft={SPACING.spacing8}
-              >
+                </Flex>
+              ) : null}
+              <Flex flexDirection={DIRECTION_COLUMN} flex="100%">
                 {isFlexPipetteAttached && !isPipetteCalibrated ? (
                   <Banner type="error" marginBottom={SPACING.spacing4}>
                     {isEstopNotDisengaged ? (

diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom'
 
 import {
   ALIGN_START,
+  BORDERS,
   Box,
   COLORS,
   DIRECTION_COLUMN,
@@ -248,7 +249,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
   return (
     <Flex
       backgroundColor={COLORS.grey10}
-      borderRadius={SPACING.spacing4}
+      borderRadius={BORDERS.borderRadiusSize2}
       width="100%"
       data-testid={`ModuleCard_${module.serialNumber}`}
     >