From 3156ed3cb119d43c3bb2c612157ee00fc8a804d7 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Wed, 8 Nov 2023 15:15:34 -0500
Subject: [PATCH] refactor(app): update deckmap and deck configurator styling
 (#13946)

* refactor(app): update deck configurator styling (#13946)
---
 .../DeckConfigurator/EmptyConfigFixture.tsx   | 37 +++++++++++++++----
 .../StagingAreaConfigFixture.tsx              | 33 ++++++++++++-----
 .../TrashBinConfigFixture.tsx                 | 32 +++++++++++-----
 .../WasteChuteConfigFixture.tsx               | 33 ++++++++++++-----
 4 files changed, 100 insertions(+), 35 deletions(-)

diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
index ef579ea5bda..d53f7d98188 100644
--- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css } from 'styled-components'
 
 import {
   getDeckDefFromRobotType,
@@ -71,14 +72,7 @@ export function EmptyConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        backgroundColor={COLORS.mediumBlueEnabled}
-        border={`5px dashed ${COLORS.blueEnabled}`}
-        borderRadius={BORDERS.radiusSoftCorners}
-        justifyContent={JUSTIFY_CENTER}
-        width="100%"
-      >
+      <Flex css={EMPTY_CONFIG_STYLE}>
         <Btn
           display={DISPLAY_FLEX}
           justifyContent={JUSTIFY_CENTER}
@@ -90,3 +84,30 @@ export function EmptyConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
+
+const EMPTY_CONFIG_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  justify-content: ${JUSTIFY_CENTER};
+  background-color: ${COLORS.mediumBlueEnabled};
+  border: 3px dashed ${COLORS.blueEnabled};
+  border-radius: ${BORDERS.radiusSoftCorners};
+  width: 100%;
+
+  &:active {
+    border: 3px solid ${COLORS.blueEnabled};
+    background-color: ${COLORS.mediumBluePressed};
+  }
+
+  &:focus {
+    border: 3px solid ${COLORS.blueEnabled};
+    background-color: ${COLORS.mediumBluePressed};
+  }
+
+  &:hover {
+    background-color: ${COLORS.mediumBluePressed};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.fundamentalsFocus};
+  }
+`
diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
index f8ba5b44e35..6f7013e053f 100644
--- a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css } from 'styled-components'
 
 import {
   getDeckDefFromRobotType,
@@ -64,15 +65,7 @@ export function StagingAreaConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        backgroundColor={COLORS.grey2}
-        borderRadius={BORDERS.radiusSoftCorners}
-        color={COLORS.white}
-        gridGap={SPACING.spacing8}
-        justifyContent={JUSTIFY_CENTER}
-        width="100%"
-      >
+      <Flex css={STAGING_AREA_CONFIG_STYLE}>
         <Text css={TYPOGRAPHY.bodyTextSemiBold}>
           {stagingAreaDef.metadata.displayName}
         </Text>
@@ -89,3 +82,25 @@ export function StagingAreaConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
+
+const STAGING_AREA_CONFIG_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  background-color: ${COLORS.grey2};
+  border-radius: ${BORDERS.borderRadiusSize1};
+  color: ${COLORS.white};
+  grid-gap: ${SPACING.spacing8};
+  justify-content: ${JUSTIFY_CENTER};
+  width: 100%;
+
+  &:active {
+    background-color: ${COLORS.darkBlack90};
+  }
+
+  &:hover {
+    background-color: ${COLORS.grey1};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.fundamentalsFocus};
+  }
+`
diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
index 0d78b538fb7..5ca41d53c33 100644
--- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css } from 'styled-components'
 
 import {
   getDeckDefFromRobotType,
@@ -70,15 +71,7 @@ export function TrashBinConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        backgroundColor={COLORS.grey2}
-        borderRadius={BORDERS.radiusSoftCorners}
-        color={COLORS.white}
-        gridGap={SPACING.spacing8}
-        justifyContent={JUSTIFY_CENTER}
-        width="100%"
-      >
+      <Flex css={TRASH_BIN_CONFIG_STYLE}>
         <Text css={TYPOGRAPHY.bodyTextSemiBold}>
           {trashBinDef.metadata.displayName}
         </Text>
@@ -95,3 +88,24 @@ export function TrashBinConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
+
+const TRASH_BIN_CONFIG_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  background-color: ${COLORS.grey2};
+  border-radius: ${BORDERS.borderRadiusSize1};
+  color: ${COLORS.white};
+  justify-content: ${JUSTIFY_CENTER};
+  grid-gap: ${SPACING.spacing8};
+  width: 100%;
+
+  &:active {
+    background-color: ${COLORS.darkBlack90};
+  }
+
+  &:hover {
+    background-color: ${COLORS.grey1};
+  }
+
+  &:focus-visible {
+  }
+`
diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
index da0b9241df7..e43ae7eadfb 100644
--- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css } from 'styled-components'
 
 import {
   getDeckDefFromRobotType,
@@ -64,15 +65,7 @@ export function WasteChuteConfigFixture(
       flexProps={{ flex: '1' }}
       foreignObjectProps={{ flex: '1' }}
     >
-      <Flex
-        alignItems={ALIGN_CENTER}
-        backgroundColor={COLORS.grey2}
-        borderRadius={BORDERS.radiusSoftCorners}
-        color={COLORS.white}
-        gridGap={SPACING.spacing8}
-        justifyContent={JUSTIFY_CENTER}
-        width="100%"
-      >
+      <Flex css={WASTE_CHUTE_CONFIG_STYLE}>
         <Text css={TYPOGRAPHY.bodyTextSemiBold}>
           {wasteChuteDef.metadata.displayName}
         </Text>
@@ -89,3 +82,25 @@ export function WasteChuteConfigFixture(
     </RobotCoordsForeignObject>
   )
 }
+
+const WASTE_CHUTE_CONFIG_STYLE = css`
+  align-items: ${ALIGN_CENTER};
+  background-color: ${COLORS.grey2};
+  border-radius: ${BORDERS.borderRadiusSize1};
+  color: ${COLORS.white};
+  justify-content: ${JUSTIFY_CENTER};
+  grid-gap: ${SPACING.spacing8};
+  width: 100%;
+
+  &:active {
+    background-color: ${COLORS.darkBlack90};
+  }
+
+  &:hover {
+    background-color: ${COLORS.grey1};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.fundamentalsFocus};
+  }
+`