From df4b436ce8c93c49219abb05bc0763209fdadd34 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 20 Nov 2023 16:32:19 -0500
Subject: [PATCH] refactor(components): make entire fixture area clickable in
 deckconfigurator

make entire fixture area clickable in deckconfigurator

close RAUT-873
---
 .../DeckConfigurator/EmptyConfigFixture.tsx   | 18 ++++++-------
 .../StagingAreaConfigFixture.tsx              | 25 ++++++++++---------
 .../TrashBinConfigFixture.tsx                 | 25 ++++++++++---------
 .../WasteChuteConfigFixture.tsx               | 25 ++++++++++---------
 4 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
index c0294942b69..f20f402eed6 100644
--- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex } from '../../primitives'
+import { Btn } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -48,20 +48,18 @@ export function EmptyConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={EMPTY_CONFIG_STYLE}>
-        <Btn
-          display={DISPLAY_FLEX}
-          justifyContent={JUSTIFY_CENTER}
-          onClick={() => handleClickAdd(fixtureLocation)}
-        >
-          <Icon name="add" color={COLORS.blueEnabled} height="2rem" />
-        </Btn>
-      </Flex>
+      <Btn
+        css={EMPTY_CONFIG_STYLE}
+        onClick={() => handleClickAdd(fixtureLocation)}
+      >
+        <Icon name="add" color={COLORS.blueEnabled} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const EMPTY_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   justify-content: ${JUSTIFY_CENTER};
   background-color: ${COLORS.mediumBlueEnabled};
diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
index 80cecfd71d5..6f01125d965 100644
--- a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -44,25 +44,26 @@ export function StagingAreaConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={STAGING_AREA_CONFIG_STYLE}>
+      <Btn
+        css={STAGING_AREA_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {STAGING_AREA_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const STAGING_AREA_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};
diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
index c0c745e367e..03879379c98 100644
--- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -50,25 +50,26 @@ export function TrashBinConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={TRASH_BIN_CONFIG_STYLE}>
+      <Btn
+        css={TRASH_BIN_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {TRASH_BIN_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const TRASH_BIN_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};
diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
index 5e974d7eb8a..c4163f8c7a3 100644
--- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import { Icon } from '../../icons'
-import { Btn, Flex, Text } from '../../primitives'
+import { Btn, Text } from '../../primitives'
 import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
@@ -53,25 +53,26 @@ export function WasteChuteConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex css={WASTE_CHUTE_CONFIG_STYLE}>
+      <Btn
+        css={WASTE_CHUTE_CONFIG_STYLE}
+        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        onClick={
+          handleClickRemove != null
+            ? () => handleClickRemove(fixtureLocation)
+            : () => {}
+        }
+      >
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {WASTE_CHUTE_DISPLAY_NAME}
         </Text>
-        {handleClickRemove != null ? (
-          <Btn
-            display={DISPLAY_FLEX}
-            justifyContent={JUSTIFY_CENTER}
-            onClick={() => handleClickRemove(fixtureLocation)}
-          >
-            <Icon name="remove" color={COLORS.white} height="2.25rem" />
-          </Btn>
-        ) : null}
-      </Flex>
+        <Icon name="remove" color={COLORS.white} size="2rem" />
+      </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
 const WASTE_CHUTE_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
   border-radius: ${BORDERS.borderRadiusSize1};