From 58cadafee4becf91020ca5dddc51378468419027 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Thu, 14 Mar 2024 12:03:54 -0400
Subject: [PATCH] get rid of cardOutlineBorder abstraction per Mel

---
 .../organisms/ChooseProtocolSlideout/index.tsx   | 12 +++++++++++-
 app/src/organisms/ChooseRobotSlideout/index.tsx  | 12 +++++++++++-
 .../SetupLiquids/LiquidDetailCard.tsx            | 16 +++++++++++++---
 .../SetupLiquids/SetupLiquidsList.tsx            | 12 +++++++++++-
 components/src/helix-design-system/borders.ts    |  9 ---------
 5 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
index e532fb8a124..11279cf69b0 100644
--- 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
index 152939001c5..fa8d0cb1c3f 100644
--- 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
index 2229f4ddb58..b084031ea48 100644
--- 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
index 4ce1cb5da67..ce100867578 100644
--- 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
index 81e5f6d53fa..8f140ba7dc8 100644
--- 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