feedback

Opentrons · Apr 11, 2024 · 4c583ab · 4c583ab
1 parent 80893a5
commit 4c583ab
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunPausedSplash.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunPausedSplash.tsx
@@ -12,7 +12,6 @@ import {
  DIRECTION_COLUMN,
  POSITION_ABSOLUTE,
  TYPOGRAPHY,
- BORDERS,
  OVERFLOW_WRAP_BREAK_WORD,
 } from '@opentrons/components'
 import styled from 'styled-components'
@@ -45,13 +44,13 @@ export function RunPausedSplash({
  position={POSITION_ABSOLUTE}
  flexDirection={DIRECTION_COLUMN}
  gridGap={SPACING.spacing40}
- padding={SPACING.spacing40}
+ padding={SPACING.spacing120}
  backgroundColor={COLORS.grey50}
  onClick={onClose}
  >
  <SplashFrame>
  <Flex gridGap={SPACING.spacing32} alignItems={ALIGN_CENTER}>
- <Icon name={'ot-alert'} size="4.5rem" color={COLORS.white} />
+ <Icon name="ot-alert" size="4.5rem" color={COLORS.white} />
  <SplashHeader>{t('run_paused')}</SplashHeader>
  </Flex>
  <Flex width="49rem" justifyContent={JUSTIFY_CENTER}>
@@ -65,8 +64,8 @@ export function RunPausedSplash({
 const SplashHeader = styled.h1`
  font-weight: ${TYPOGRAPHY.fontWeightBold};
  text-align: ${TYPOGRAPHY.textAlignLeft};
- font-size: 80px;
- line-height: 94px;
+ font-size: ${TYPOGRAPHY.fontSize80}
+ line-height: ${TYPOGRAPHY.lineHeight96};
  color: ${COLORS.white};
 `
 const SplashBody = styled.h4`
@@ -90,5 +89,4 @@ const SplashFrame = styled(Flex)`
  justify-content: ${JUSTIFY_CENTER};
  align-items: ${ALIGN_CENTER};
  grid-gap: ${SPACING.spacing40};
- border-radius: ${BORDERS.borderRadius8};
 `
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunPausedSplash.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunPausedSplash.test.tsx
@@ -2,12 +2,12 @@ import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { i18n } from '../../../../i18n'
 
 import { COLORS } from '@opentrons/components'
 
 import { RunPausedSplash } from '../RunPausedSplash'
-import { renderWithProviders } from '../../../../__testing-utils__'
-import { i18n } from '../../../../i18n'
 
 const render = (props: React.ComponentProps<typeof RunPausedSplash>) => {
  return renderWithProviders(

diff --git a/app/src/pages/RunningProtocol/index.tsx b/app/src/pages/RunningProtocol/index.tsx
@@ -28,6 +28,7 @@ import {
  RUN_STATUS_AWAITING_RECOVERY,
 } from '@opentrons/api-client'
 
+import { useFeatureFlag } from '../../redux/config'
 import { StepMeter } from '../../atoms/StepMeter'
 import { useMostRecentCompletedAnalysis } from '../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import {
@@ -55,7 +56,6 @@ import { ConfirmCancelRunModal } from '../../organisms/OnDeviceDisplay/RunningPr
 import { RunPausedSplash } from '../../organisms/OnDeviceDisplay/RunningProtocol/RunPausedSplash'
 import { getLocalRobot } from '../../redux/discovery'
 import { OpenDoorAlertModal } from '../../organisms/OpenDoorAlertModal'
-import { useFeatureFlag } from '../../redux/config'
 
 import type { OnDeviceRouteParams } from '../../App/types'
 
@@ -282,7 +282,7 @@ export function RunningProtocol(): JSX.Element {
  <RunningProtocolSkeleton currentOption={currentOption} />
  )}
  <Flex
- marginTop="2rem"
+ marginTop={SPACING.spacing32}
  flexDirection={DIRECTION_ROW}
  gridGap={SPACING.spacing16}
  justifyContent={JUSTIFY_CENTER}