diff --git a/app/src/assets/localization/en/device_settings.json b/app/src/assets/localization/en/device_settings.json
index 4c62a44044a..63912b30fa8 100644
--- a/app/src/assets/localization/en/device_settings.json
+++ b/app/src/assets/localization/en/device_settings.json
@@ -301,7 +301,7 @@
"update_robot_software_description": "Bypass the Opentrons App auto-update process and update the robot software manually.",
"update_robot_software_link": "Launch Opentrons software update page",
"updating": "Updating",
- "updating_robot_system": "Updating the robot software requires restarting the robot",
+ "update_requires_restarting": "Updating the robot software requires restarting the robot",
"usage_settings": "Usage Settings",
"usb": "USB",
"usb_to_ethernet_description": "Looking for USB-to-Ethernet Adapter info?",
diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
index c7808ec38fc..6175cf0810a 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
+++ b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
@@ -1,4 +1,5 @@
import * as React from 'react'
+import { screen } from '@testing-library/react'
import { COLORS, renderWithProviders } from '@opentrons/components'
@@ -20,33 +21,43 @@ describe('LegacyModal', () => {
})
it('should render modal without header icon when type is info', () => {
- const [{ getByText, queryByTestId, getByTestId }] = render(props)
- expect(queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
- getByText('mock info modal')
- expect(getByTestId('Modal_header')).toHaveStyle(
+ render(props)
+ expect(screen.queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
+ screen.getByText('mock info modal')
+ expect(screen.getByTestId('Modal_header')).toHaveStyle(
`background-color: ${COLORS.white}`
)
})
it('should render modal with orange header icon when type is warning', () => {
props.type = 'warning'
- const [{ getByTestId }] = render(props)
- const headerIcon = getByTestId('Modal_header_icon')
+ render(props)
+ const headerIcon = screen.getByTestId('Modal_header_icon')
expect(headerIcon).toBeInTheDocument()
expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`)
- expect(getByTestId('Modal_header')).toHaveStyle(
+ expect(screen.getByTestId('Modal_header')).toHaveStyle(
`background-color: ${COLORS.white}`
)
})
it('should render modal with red header icon when type is error', () => {
props.type = 'error'
- const [{ getByTestId }] = render(props)
- const headerIcon = getByTestId('Modal_header_icon')
+ render(props)
+ const headerIcon = screen.getByTestId('Modal_header_icon')
expect(headerIcon).toBeInTheDocument()
expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`)
- expect(getByTestId('Modal_header')).toHaveStyle(
+ expect(screen.getByTestId('Modal_header')).toHaveStyle(
`background-color: ${COLORS.white}`
)
})
+
+ it('should supply a default margin to account for the sidebar, aligning the modal in the center of the app', () => {
+ render(props)
+ expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+ 'width: 31.25rem'
+ )
+ expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+ 'margin-left: 5.656rem'
+ )
+ })
})
diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx
index 03c9dd1d72f..7f5a6004111 100644
--- a/app/src/molecules/LegacyModal/index.tsx
+++ b/app/src/molecules/LegacyModal/index.tsx
@@ -70,7 +70,7 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => {
header={modalHeader}
onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined}
// center within viewport aside from nav
- marginLeft={styleProps.marginLeft ?? '7.125rem'}
+ marginLeft={styleProps.marginLeft ?? '5.656rem'}
{...styleProps}
footer={footer}
>
diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
index 3762cdd1955..a659259e698 100644
--- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
@@ -155,7 +155,7 @@ export function UpdateRobotModal({
>
- {t('updating_robot_system')}
+ {t('update_requires_restarting')}
diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
index 4610dc6dc92..e1fffe74e30 100644
--- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
@@ -51,7 +51,7 @@ export function RobotSystemVersionModal({
>
diff --git a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index f3473854489..1831f991e2f 100644
--- a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -133,4 +133,13 @@ describe('UpdateAppModal', () => {
screen.getByRole('heading', { name: 'Update Error' })
).toBeInTheDocument()
})
+ it('uses a custom width and left margin to properly center the modal', () => {
+ render(props)
+ expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+ 'width: 40rem'
+ )
+ expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+ 'margin-left: 5.336rem'
+ )
+ })
})
diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx
index 6f4bf3f8a23..7154cc58446 100644
--- a/app/src/organisms/UpdateAppModal/index.tsx
+++ b/app/src/organisms/UpdateAppModal/index.tsx
@@ -85,6 +85,7 @@ const UPDATE_PROGRESS_BAR_STYLE = css`
`
const LEGACY_MODAL_STYLE = css`
width: 40rem;
+ margin-left: 5.336rem;
`
const RESTART_APP_AFTER_TIME = 5000