fix(protocol-designer): add slot clips to deck map views (#16688)

closes RQA-3404 RQA-3348
Opentrons · Nov 5, 2024 · ddbf5dd · ddbf5dd
1 parent 2a1470f
commit ddbf5dd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -67,6 +67,7 @@ const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
   'fixedTrash',
 ]
 export const lightFill = COLORS.grey35
+const darkFill = COLORS.grey60
 
 export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
   const { tab } = props
@@ -213,6 +214,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                           key={addressableArea.id}
                           cutoutId={cutoutId}
                           deckDefinition={deckDef}
+                          slotClipColor={darkFill}
                           showExpansion={cutoutId === 'cutoutA1'}
                           fixtureBaseColor={lightFill}
                         />
@@ -228,6 +230,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                             key={fixture.id}
                             cutoutId={fixture.location as StagingAreaLocation}
                             deckDefinition={deckDef}
+                            slotClipColor={darkFill}
                             fixtureBaseColor={lightFill}
                           />
                         )
@@ -284,6 +287,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
                               fixture.location as typeof WASTE_CHUTE_CUTOUT
                             }
                             deckDefinition={deckDef}
+                            slotClipColor={darkFill}
                             fixtureBaseColor={lightFill}
                           />
                         )

diff --git a/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx b/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx
@@ -48,6 +48,7 @@ const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
 ]
 
 const lightFill = COLORS.grey35
+const darkFill = COLORS.grey60
 
 interface DeckThumbnailProps {
   hoverSlot: DeckSlotId | null
@@ -140,6 +141,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
                       deckDefinition={deckDef}
                       showExpansion={cutoutId === 'cutoutA1'}
                       fixtureBaseColor={lightFill}
+                      slotClipColor={darkFill}
                     />
                   ) : null
                 })}
@@ -149,6 +151,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
                     cutoutId={fixture.location as StagingAreaLocation}
                     deckDefinition={deckDef}
                     fixtureBaseColor={lightFill}
+                    slotClipColor={darkFill}
                   />
                 ))}
                 {trash != null
@@ -185,6 +188,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
                     cutoutId={fixture.location as typeof WASTE_CHUTE_CUTOUT}
                     deckDefinition={deckDef}
                     fixtureBaseColor={lightFill}
+                    slotClipColor={darkFill}
                   />
                 ))}
               </>