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.
Opentrons · May 9, 2024 · 2978ade · 2978ade
1 parent 2011402
commit 2978ade
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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}`)
+  })
 })