From 28b6fb213007bcd47c23ab4c00d2623866e15d86 Mon Sep 17 00:00:00 2001
From: smb2268 <sarah.breen@opentrons.com>
Date: Thu, 25 Apr 2024 15:40:40 -0400
Subject: [PATCH] fix(app): add grey square with x for stale and error protocol
 map

fix RQA-2634
---
 .../ChooseProtocolSlideout/index.tsx          | 36 +++++++++++++------
 .../ProtocolsLanding/ProtocolCard.tsx         | 26 ++++++++++++--
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
index dfd7b7c12a2..25e93901a40 100644
--- a/app/src/organisms/ChooseProtocolSlideout/index.tsx
+++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -526,19 +526,35 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
                 onClick={() => handleSelectProtocol(storedProtocol)}
               >
                 <Box display="grid" gridTemplateColumns="1fr 3fr">
-                  <Box
-                    marginY={SPACING.spacingAuto}
-                    backgroundColor={isSelected ? COLORS.white : 'inherit'}
-                    marginRight={SPACING.spacing16}
-                    height="4.25rem"
-                    width="4.75rem"
-                  >
-                    {!missingAnalysisData ? (
+                  {!missingAnalysisData ? (
+                    <Box
+                      marginY={SPACING.spacingAuto}
+                      backgroundColor={isSelected ? COLORS.white : 'inherit'}
+                      marginRight={SPACING.spacing16}
+                      height="4.25rem"
+                      width="4.75rem"
+                    >
                       <ProtocolDeck
                         protocolAnalysis={storedProtocol.mostRecentAnalysis}
                       />
-                    ) : null}
-                  </Box>
+                    </Box>
+                  ) : (
+                    <Flex
+                      height="4.25rem"
+                      width="4.75rem"
+                      marginRight={SPACING.spacing16}
+                      backgroundColor={COLORS.grey30}
+                      borderRadius={SPACING.spacing8}
+                      alignItems={ALIGN_CENTER}
+                      justifyContent={JUSTIFY_CENTER}
+                    >
+                      <Icon
+                        name="ot-close"
+                        color={COLORS.grey40}
+                        size="2.25rem"
+                      />
+                    </Flex>
+                  )}
                   <StyledText
                     as="p"
                     fontWeight={TYPOGRAPHY.fontWeightSemiBold}
diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
index 932e7e0086c..dc81d682c5e 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -52,6 +52,8 @@ import {
 import type { StoredProtocolData } from '../../redux/protocol-storage'
 import type { State } from '../../redux/types'
 import { getProtocolUsesGripper } from '../ProtocolSetupInstruments/utils'
+import { ALIGN_CENTER } from '@opentrons/components'
+import { JUSTIFY_CENTER } from '@opentrons/components'
 
 interface ProtocolCardProps {
   handleRunProtocol: (storedProtocolData: StoredProtocolData) => void
@@ -184,8 +186,28 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
                 size={SIZE_3}
               />
             ),
-            error: <Box size="6rem" backgroundColor={COLORS.grey30} />,
-            stale: <Box size="6rem" backgroundColor={COLORS.grey30} />,
+            error: (
+              <Flex
+                size="6rem"
+                backgroundColor={COLORS.grey30}
+                borderRadius={SPACING.spacing8}
+                alignItems={ALIGN_CENTER}
+                justifyContent={JUSTIFY_CENTER}
+              >
+                <Icon name="ot-close" color={COLORS.grey40} size="2.75rem" />
+              </Flex>
+            ),
+            stale: (
+              <Flex
+                size="6rem"
+                backgroundColor={COLORS.grey30}
+                borderRadius={SPACING.spacing8}
+                alignItems={ALIGN_CENTER}
+                justifyContent={JUSTIFY_CENTER}
+              >
+                <Icon name="ot-close" color={COLORS.grey40} size="2.75rem" />
+              </Flex>
+            ),
             complete:
               mostRecentAnalysis != null ? (
                 <ProtocolDeck protocolAnalysis={mostRecentAnalysis} />