get rid of cardOutlineBorder abstraction per Mel

Opentrons · Mar 14, 2024 · 58cadaf · 58cadaf
1 parent 8a4baca
commit 58cadaf
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 15 deletions.
diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -40,6 +40,16 @@ import type { Robot } from '../../redux/discovery/types'
 import type { StoredProtocolData } from '../../redux/protocol-storage'
 import type { State } from '../../redux/types'
 
+export const CARD_OUTLINE_BORDER_STYLE = css`
+  border-style: ${BORDERS.styleSolid};
+  border-width: 1px;
+  border-color: ${COLORS.grey30};
+  border-radius: ${BORDERS.borderRadius4};
+  &:hover {
+    border-color: ${COLORS.grey55};
+  }
+`
+
 const _getFileBaseName = (filePath: string): string => {
   return filePath.split('/').reverse()[0]
 }
@@ -360,7 +370,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
       minHeight="11rem"
       padding={SPACING.spacing16}
       css={css`
-        ${BORDERS.cardOutlineBorder}
+        ${CARD_OUTLINE_BORDER_STYLE}
         &:hover {
           border-color: ${COLORS.grey30};
         }

diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx
@@ -46,6 +46,16 @@ import type { State, Dispatch } from '../../redux/types'
 import type { Robot } from '../../redux/discovery/types'
 import { useFeatureFlag } from '../../redux/config'
 
+export const CARD_OUTLINE_BORDER_STYLE = css`
+  border-style: ${BORDERS.styleSolid};
+  border-width: 1px;
+  border-color: ${COLORS.grey30};
+  border-radius: ${BORDERS.borderRadius4};
+  &:hover {
+    border-color: ${COLORS.grey55};
+  }
+`
+
 interface RobotIsBusyAction {
   type: 'robotIsBusy'
   robotName: string
@@ -210,7 +220,7 @@ export function ChooseRobotSlideout(
       {!isScanning && healthyReachableRobots.length === 0 ? (
         <Flex
           css={css`
-            ${BORDERS.cardOutlineBorder}
+            ${CARD_OUTLINE_BORDER_STYLE}
             &:hover {
               border-color: ${COLORS.grey30};
             }

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
@@ -27,8 +27,18 @@ import {
 import { getIsOnDevice } from '../../../../redux/config'
 import { getWellRangeForLiquidLabwarePair } from './utils'
 
+export const CARD_OUTLINE_BORDER_STYLE = css`
+  border-style: ${BORDERS.styleSolid};
+  border-width: 1px;
+  border-color: ${COLORS.grey30};
+  border-radius: ${BORDERS.borderRadius4};
+  &:hover {
+    border-color: ${COLORS.grey55};
+  }
+`
+
 const LIQUID_CARD_STYLE = css`
-  ${BORDERS.cardOutlineBorder}
+  ${CARD_OUTLINE_BORDER_STYLE}
   &:hover {
     border: 1px solid ${COLORS.grey60};
     border-radius: ${BORDERS.borderRadius4};
@@ -98,7 +108,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
     >
       <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16}>
         <Flex
-          css={BORDERS.cardOutlineBorder}
+          css={CARD_OUTLINE_BORDER_STYLE}
           padding={SPACING.spacing8}
           height="3rem"
           width="3rem"
@@ -198,7 +208,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
         justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
         <Flex
-          css={BORDERS.cardOutlineBorder}
+          css={CARD_OUTLINE_BORDER_STYLE}
           padding={SPACING.spacing8}
           height="max-content"
           width="max-content"

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -56,6 +56,16 @@ const LIQUID_BORDER_STYLE = css`
   border-radius: ${BORDERS.borderRadius4};
 `
 
+export const CARD_OUTLINE_BORDER_STYLE = css`
+  border-style: ${BORDERS.styleSolid};
+  border-width: 1px;
+  border-color: ${COLORS.grey30};
+  border-radius: ${BORDERS.borderRadius4};
+  &:hover {
+    border-color: ${COLORS.grey55};
+  }
+`
+
 export function SetupLiquidsList(props: SetupLiquidsListProps): JSX.Element {
   const { runId } = props
   const protocolData = useMostRecentCompletedAnalysis(runId)
@@ -109,7 +119,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element {
   const trackEvent = useTrackEvent()
 
   const LIQUID_CARD_STYLE = css`
-    ${BORDERS.cardOutlineBorder}
+    ${CARD_OUTLINE_BORDER_STYLE}
 
     &:hover {
       cursor: pointer;

diff --git a/components/src/helix-design-system/borders.ts b/components/src/helix-design-system/borders.ts
@@ -23,15 +23,6 @@ export const styleSolid = 'solid'
  */
 export const activeLineBorder = `1px ${styleSolid} ${COLORS.blue50}`
 export const lineBorder = `1px ${styleSolid} ${COLORS.grey30}`
-export const cardOutlineBorder = css`
-  border-style: ${styleSolid};
-  border-width: 1px;
-  border-color: ${COLORS.grey30};
-  border-radius: ${borderRadius4};
-  &:hover {
-    border-color: ${COLORS.grey55};
-  }
-`
 
 /**
  * Shadows