fix(app): fix desktop pause intervention sizing

Opentrons · Nov 20, 2024 · 4d6d802 · 4d6d802
1 parent 3d22cbd
commit 4d6d802
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 23 deletions.
diff --git a/app/src/molecules/InterventionModal/index.tsx b/app/src/molecules/InterventionModal/index.tsx
@@ -179,14 +179,12 @@ export function InterventionModal({
 }
 
 const ICON_STYLE = css`
-  width: ${SPACING.spacing16};
-  height: ${SPACING.spacing16};
+  width: ${SPACING.spacing32};
+  height: ${SPACING.spacing32};
   margin: ${SPACING.spacing4};
   cursor: ${CURSOR_POINTER};
 
   @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
-    width: ${SPACING.spacing32};
-    height: ${SPACING.spacing32};
     margin: ${SPACING.spacing12};
   }
 `
diff --git a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx
@@ -10,9 +10,8 @@ import {
   Flex,
   RESPONSIVENESS,
   SPACING,
-  TYPOGRAPHY,
   useInterval,
-  LegacyStyledText,
+  StyledText,
 } from '@opentrons/components'
 
 import { EMPTY_TIMESTAMP } from '/app/resources/runs'
@@ -61,20 +60,6 @@ const PAUSE_HEADER_STYLE = css`
   }
 `
 
-const PAUSE_TEXT_STYLE = css`
-  ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    ${TYPOGRAPHY.level4HeaderSemiBold}
-  }
-`
-
-const PAUSE_TIME_STYLE = css`
-  ${TYPOGRAPHY.h1Default}
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    ${TYPOGRAPHY.level1Header}
-  }
-`
-
 interface PauseHeaderProps {
   startedAt: string | null
 }
@@ -95,10 +80,15 @@ function PauseHeader({ startedAt }: PauseHeaderProps): JSX.Element {
 
   return (
     <Flex css={PAUSE_HEADER_STYLE}>
-      <LegacyStyledText css={PAUSE_TEXT_STYLE}>
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="level4HeaderSemiBold"
+      >
         {i18n.format(t('paused_for'), 'capitalize')}
-      </LegacyStyledText>
-      <LegacyStyledText css={PAUSE_TIME_STYLE}>{runTime}</LegacyStyledText>
+      </StyledText>
+      <StyledText desktopStyle="bodyDefaultSemiBold" oddStyle="level1Header">
+        {runTime}
+      </StyledText>
     </Flex>
   )
 }