fix(app): Center app and robot update modals (#14541)

Closes RQA-2349

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?",

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'
+    )
+  })
 })

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}
     >

app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx

@@ -155,7 +155,7 @@ export function UpdateRobotModal({
     >
       <Flex flexDirection={DIRECTION_COLUMN}>
         <UpdateAppBanner type="informing" marginBottom={SPACING.spacing8}>
-          {t('updating_robot_system')}
+          {t('update_requires_restarting')}
         </UpdateAppBanner>
         <ReleaseNotes source={releaseNotes} />
       </Flex>

app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx

@@ -51,7 +51,7 @@ export function RobotSystemVersionModal({
         >
           <InlineNotification
             type="neutral"
-            heading={t('updating_robot_system')}
+            heading={t('update_requires_restarting')}
             hug
           />
           <ReleaseNotes source={releaseNotes} />

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'
+    )
+  })
 })

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