clean up css to remove copied code

Opentrons · Dec 7, 2023 · caeb7cd · caeb7cd
1 parent 4a82bb6
commit caeb7cd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 50 deletions.
diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx
@@ -47,7 +47,7 @@ export function StagingAreaConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? STAGING_AREA_CONFIG_STYLE
+            ? STAGING_AREA_CONFIG_STYLE_EDITABLE
             : STAGING_AREA_CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
@@ -68,7 +68,7 @@ export function StagingAreaConfigFixture(
   )
 }
 
-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};
@@ -77,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};
@@ -90,18 +94,3 @@ const STAGING_AREA_CONFIG_STYLE = css`
     border: 3px solid ${COLORS.fundamentalsFocus};
   }
 `
-
-const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  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%;
-
-  &: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
@@ -53,7 +53,7 @@ export function TrashBinConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? TRASH_BIN_CONFIG_STYLE
+            ? TRASH_BIN_CONFIG_STYLE_EDTIABLE
             : TRASH_BIN_CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
@@ -74,7 +74,7 @@ export function TrashBinConfigFixture(
   )
 }
 
-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};
@@ -83,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};
@@ -95,17 +99,3 @@ const TRASH_BIN_CONFIG_STYLE = css`
   &:focus-visible {
   }
 `
-
-const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  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%;
-
-  &:focus-visible {
-  }
-`
diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx
@@ -56,7 +56,7 @@ export function WasteChuteConfigFixture(
       <Btn
         css={
           handleClickRemove != null
-            ? WASTE_CHUTE_CONFIG_STYLE
+            ? WASTE_CHUTE_CONFIG_STYLE_EDITABLE
             : WASTE_CHUTE_CONFIG_STYLE_READ_ONLY
         }
         cursor={handleClickRemove != null ? 'pointer' : 'default'}
@@ -77,7 +77,7 @@ export function WasteChuteConfigFixture(
   )
 }
 
-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};
@@ -86,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};
@@ -99,18 +103,3 @@ const WASTE_CHUTE_CONFIG_STYLE = css`
     border: 3px solid ${COLORS.fundamentalsFocus};
   }
 `
-
-const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css`
-  display: ${DISPLAY_FLEX};
-  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%;
-
-  &:focus-visible {
-    border: 3px solid ${COLORS.fundamentalsFocus};
-  }
-`