fix(app): add grey square with x for stale and error protocol map

fix RQA-2634
Opentrons · Apr 25, 2024 · 28b6fb2 · 28b6fb2
1 parent 4ea08cb
commit 28b6fb2
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git 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
@@ -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} />