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