fix(app): fix pause icon alignment in ODD command icon (#14319)

* fix(app): fix pause icon alignment in ODD command icon closes RQA-2030
Opentrons · Jan 24, 2024 · 81ca902 · 81ca902
1 parent 46195f5
commit 81ca902
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
@@ -232,8 +232,9 @@ export function RunningProtocolCommandList({
                     lineHeight="1.75rem"
                     fontWeight={TYPOGRAPHY.fontWeightRegular}
                     borderRadius={BORDERS.borderRadiusSize2}
+                    gridGap="0.875rem"
                   >
-                    <CommandIcon command={command} />
+                    <CommandIcon command={command} size="2rem" />
                     <CommandText
                       command={command}
                       robotSideAnalysis={robotSideAnalysis}

diff --git a/app/src/organisms/RunPreview/CommandIcon.tsx b/app/src/organisms/RunPreview/CommandIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SPACING, Icon, IconName } from '@opentrons/components'
+import { Icon, IconName } from '@opentrons/components'
 import { RunTimeCommand } from '@opentrons/shared-data'
 import type { StyleProps } from '@opentrons/components'
 
@@ -11,9 +11,10 @@ const ICON_BY_COMMAND_TYPE: { [commandType: string]: IconName } = {
 }
 interface CommandIconProps extends StyleProps {
   command: RunTimeCommand
+  size?: string | number
 }
 export function CommandIcon(props: CommandIconProps): JSX.Element | null {
-  const { command, ...styleProps } = props
+  const { command, size = '1rem', ...styleProps } = props
   let iconName = null
   if (
     command.commandType === 'moveLabware' &&
@@ -30,11 +31,6 @@ export function CommandIcon(props: CommandIconProps): JSX.Element | null {
   }
 
   return iconName != null ? (
-    <Icon
-      {...styleProps}
-      name={iconName}
-      size={SPACING.spacing20}
-      flex="0 0 auto"
-    />
+    <Icon {...styleProps} size={size} name={iconName} flex="0 0 auto" />
   ) : null
 }