refactor(app): update deckmap and deck configurator styling (#13946)

* refactor(app): update deck configurator styling (#13946)
Opentrons · Nov 14, 2023 · 7a78164 · 7a78164
1 parent 93d83f1
commit 7a78164
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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};
+  }
+`