fix(app): fix styling of read-only deck configurator (#14116)

* fix(app): fix styling of read-only deck configurator closes RQA-1987
Opentrons · Dec 7, 2023 · 93c879a · 93c879a
1 parent 9c008f2
commit 93c879a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -45,8 +45,12 @@ export function StagingAreaConfigFixture(
       foreignObjectProps={{ flex: '1' }}
     >
       <Btn
-        css={STAGING_AREA_CONFIG_STYLE}
-        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        css={
+          handleClickRemove != null
+            ? STAGING_AREA_CONFIG_STYLE_EDITABLE
+            : STAGING_AREA_CONFIG_STYLE_READ_ONLY
+        }
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
           handleClickRemove != null
             ? () => handleClickRemove(fixtureLocation)
@@ -56,13 +60,15 @@ export function StagingAreaConfigFixture(
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {STAGING_AREA_DISPLAY_NAME}
         </Text>
-        <Icon name="remove" color={COLORS.white} size="2rem" />
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
       </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
-const STAGING_AREA_CONFIG_STYLE = css`
+const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css`
   display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
@@ -71,6 +77,10 @@ const STAGING_AREA_CONFIG_STYLE = css`
   grid-gap: ${SPACING.spacing8};
   justify-content: ${JUSTIFY_CENTER};
   width: 100%;
+`
+
+const STAGING_AREA_CONFIG_STYLE_EDITABLE = css`
+  ${STAGING_AREA_CONFIG_STYLE_READ_ONLY}
 
   &:active {
     background-color: ${COLORS.darkBlack90};

diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx
@@ -51,8 +51,12 @@ export function TrashBinConfigFixture(
       foreignObjectProps={{ flex: '1' }}
     >
       <Btn
-        css={TRASH_BIN_CONFIG_STYLE}
-        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        css={
+          handleClickRemove != null
+            ? TRASH_BIN_CONFIG_STYLE_EDTIABLE
+            : TRASH_BIN_CONFIG_STYLE_READ_ONLY
+        }
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
           handleClickRemove != null
             ? () => handleClickRemove(fixtureLocation)
@@ -62,13 +66,15 @@ export function TrashBinConfigFixture(
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {TRASH_BIN_DISPLAY_NAME}
         </Text>
-        <Icon name="remove" color={COLORS.white} size="2rem" />
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
       </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
-const TRASH_BIN_CONFIG_STYLE = css`
+const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css`
   display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
@@ -77,6 +83,10 @@ const TRASH_BIN_CONFIG_STYLE = css`
   justify-content: ${JUSTIFY_CENTER};
   grid-gap: ${SPACING.spacing8};
   width: 100%;
+`
+
+const TRASH_BIN_CONFIG_STYLE_EDTIABLE = css`
+  ${TRASH_BIN_CONFIG_STYLE_READ_ONLY}
 
   &:active {
     background-color: ${COLORS.darkBlack90};

diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -54,8 +54,12 @@ export function WasteChuteConfigFixture(
       foreignObjectProps={{ flex: '1' }}
     >
       <Btn
-        css={WASTE_CHUTE_CONFIG_STYLE}
-        cursor={handleClickRemove != null ? 'pointer' : 'none'}
+        css={
+          handleClickRemove != null
+            ? WASTE_CHUTE_CONFIG_STYLE_EDITABLE
+            : WASTE_CHUTE_CONFIG_STYLE_READ_ONLY
+        }
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
         onClick={
           handleClickRemove != null
             ? () => handleClickRemove(fixtureLocation)
@@ -65,13 +69,15 @@ export function WasteChuteConfigFixture(
         <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
           {WASTE_CHUTE_DISPLAY_NAME}
         </Text>
-        <Icon name="remove" color={COLORS.white} size="2rem" />
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
       </Btn>
     </RobotCoordsForeignObject>
   )
 }
 
-const WASTE_CHUTE_CONFIG_STYLE = css`
+const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css`
   display: ${DISPLAY_FLEX};
   align-items: ${ALIGN_CENTER};
   background-color: ${COLORS.grey2};
@@ -80,6 +86,10 @@ const WASTE_CHUTE_CONFIG_STYLE = css`
   justify-content: ${JUSTIFY_CENTER};
   grid-gap: ${SPACING.spacing8};
   width: 100%;
+`
+
+const WASTE_CHUTE_CONFIG_STYLE_EDITABLE = css`
+  ${WASTE_CHUTE_CONFIG_STYLE_READ_ONLY}
 
   &:active {
     background-color: ${COLORS.darkBlack90};