From ddbf5dd3190e58a3ad1d805ca1f87ca805e4f902 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:14:24 -0500
Subject: [PATCH] fix(protocol-designer): add slot clips to deck map views
 (#16688)

closes RQA-3404 RQA-3348
---
 .../src/pages/Designer/DeckSetup/DeckSetupContainer.tsx       | 4 ++++
 .../src/pages/ProtocolOverview/DeckThumbnail.tsx              | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
index b06cbfd535a..00511d96c4d 100644
--- 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
index 6420d45557a..250feb06df2 100644
--- 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}
                   />
                 ))}
               </>