From 8dc44b0986e22b3eae19a05c130a153005d30682 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:52:01 -0500
Subject: [PATCH] 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
---
 app/src/molecules/InstrumentCard/index.tsx    |  2 +-
 .../organisms/Devices/PipetteCard/index.tsx   | 23 ++++++++++---------
 app/src/organisms/ModuleCard/index.tsx        |  3 ++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx
index c8a32724405..727a2db041f 100644
--- 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
index bd285277205..6f2a01ee4be 100644
--- 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
index 888a95c3510..7066fe4f18d 100644
--- 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}`}
     >