From 81ca902a85389b6fc3b795b7cd7be954a7268242 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:39:54 -0500
Subject: [PATCH] fix(app): fix pause icon alignment in ODD command icon
 (#14319)

* fix(app): fix pause icon alignment in ODD command icon

closes RQA-2030
---
 .../RunningProtocol/RunningProtocolCommandList.tsx   |  3 ++-
 app/src/organisms/RunPreview/CommandIcon.tsx         | 12 ++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
index c1cfa3a7c51..5bb52457c0c 100644
--- 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
index 11e7beb7ec3..b9314718c68 100644
--- 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
 }