From 2978ade387c55b7d4305a70e15fcb6b28d49fc78 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 9 May 2024 10:16:36 -0400
Subject: [PATCH] fix(app): fix background color on magnetic module slideout
 data

According to designs, the background for magnetic module slideout height range table should be
grey20, not grey10.
---
 app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx  | 3 ++-
 .../ModuleCard/__tests__/MagneticModuleSlideout.test.tsx | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx
index 347b7871a7c..347710982f5 100644
--- a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx
+++ b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx
@@ -164,13 +164,14 @@ export const MagneticModuleSlideout = (
         {t('height_ranges', { gen: info.version })}
       </StyledText>
       <Flex
-        backgroundColor={COLORS.grey10}
+        backgroundColor={COLORS.grey20}
         flexDirection={DIRECTION_ROW}
         justifyContent={JUSTIFY_SPACE_BETWEEN}
         fontWeight={TYPOGRAPHY.fontWeightRegular}
         fontSize={TYPOGRAPHY.fontSizeP}
         padding={SPACING.spacing16}
         borderRadius={BORDERS.borderRadius4}
+        data-testid={`MagneticModuleSlideout_body_data_${module.serialNumber}`}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
diff --git a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
index fb3156d8c77..8414580df17 100644
--- a/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/MagneticModuleSlideout.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { COLORS } from '@opentrons/components'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
@@ -97,4 +98,12 @@ describe('MagneticModuleSlideout', () => {
     })
     expect(button).not.toBeEnabled()
   })
+
+  it('renders the correct background color in magnetic module data', () => {
+    render(props)
+    const magneticModuleInfo = screen.getByTestId(
+      'MagneticModuleSlideout_body_data_def456'
+    )
+    expect(magneticModuleInfo).toHaveStyle(`background-color: ${COLORS.grey20}`)
+  })
 })