fix(app): fix intervention modal icon sizing (#16940)

Author: mjhuff

app/src/molecules/InterventionModal/index.tsx

@@ -23,7 +23,6 @@ import {
 
 import { getIsOnDevice } from '/app/redux/config'
 
-import type { IconName } from '@opentrons/components'
 import { ModalContentOneColSimpleButtons } from './ModalContentOneColSimpleButtons'
 import { TwoColumn } from './TwoColumn'
 import { OneColumn } from './OneColumn'
@@ -32,6 +31,10 @@ import { ModalContentMixed } from './ModalContentMixed'
 import { DescriptionContent } from './DescriptionContent'
 import { DeckMapContent } from './DeckMapContent'
 import { CategorizedStepContent } from './CategorizedStepContent'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { IconName } from '@opentrons/components'
+
 export {
   ModalContentOneColSimpleButtons,
   TwoColumn,
@@ -122,6 +125,8 @@ export interface InterventionModalProps {
   type?: ModalType
   /** optional icon name */
   iconName?: IconName | null | undefined
+  /* Optional icon size override. */
+  iconSize?: string
   /** modal contents */
   children: React.ReactNode
 }
@@ -133,6 +138,7 @@ export function InterventionModal({
   iconName,
   iconHeading,
   children,
+  iconSize,
 }: InterventionModalProps): JSX.Element {
   const modalType = type ?? 'intervention-required'
   const headerColor =
@@ -166,7 +172,7 @@ export function InterventionModal({
             {titleHeading}
             <Flex alignItems={ALIGN_CENTER} onClick={iconHeadingOnClick}>
               {iconName != null ? (
-                <Icon name={iconName} css={ICON_STYLE} />
+                <Icon name={iconName} css={buildIconStyle(iconSize)} />
               ) : null}
               {iconHeading != null ? iconHeading : null}
             </Flex>
@@ -178,9 +184,11 @@ export function InterventionModal({
   )
 }
 
-const ICON_STYLE = css`
-  width: ${SPACING.spacing32};
-  height: ${SPACING.spacing32};
+const buildIconStyle = (
+  iconSize: string | undefined
+): FlattenSimpleInterpolation => css`
+  width: ${iconSize ?? SPACING.spacing16};
+  height: ${iconSize ?? SPACING.spacing16};
   margin: ${SPACING.spacing4};
   cursor: ${CURSOR_POINTER};
 

app/src/organisms/InterventionModal/index.tsx

@@ -165,20 +165,22 @@ export function InterventionModal({
     }
   })()
 
-  const { iconName, headerTitle, headerTitleOnDevice } = (() => {
+  const { iconName, headerTitle, headerTitleOnDevice, iconSize } = (() => {
     switch (command.commandType) {
       case 'waitForResume':
       case 'pause':
         return {
           iconName: 'pause-circle' as IconName,
           headerTitle: t('pause_on', { robot_name: robotName }),
           headerTitleOnDevice: t('pause'),
+          iconSize: SPACING.spacing32,
         }
       case 'moveLabware':
         return {
           iconName: 'move-xy-circle' as IconName,
           headerTitle: t('move_labware_on', { robot_name: robotName }),
           headerTitleOnDevice: t('move_labware'),
+          iconSize: SPACING.spacing32,
         }
       default:
         console.warn(
@@ -189,6 +191,7 @@ export function InterventionModal({
           iconName: null,
           headerTitle: '',
           headerTitleOnDevice: '',
+          iconSize: undefined,
         }
     }
   })()
@@ -228,6 +231,7 @@ export function InterventionModal({
       iconHeading={<LegacyStyledText as="h1">{headerTitle}</LegacyStyledText>}
       iconName={iconName}
       type="intervention-required"
+      iconSize={iconSize}
     >
       <Box {...CONTENT_STYLE}>
         {childContent}